Recommendations for Date Picker package

[wouterds]

Is there any date picker package you would recommend for using in combination with Chakra UI? I absolutely love this lib but am troubled finding a decent date picker package to integrate with.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wouterds]

I ended up using react-datepicker and styling that myself a bit.

[segunadebayo]

Thanks for coming back to share your solution @wouterds.

Cheers.

[cbioley]

@wouterds Would you mind sharing your styles? 🤓

[wouterds]

@wouterds Would you mind sharing your styles? 🤓

.react-datepicker {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  overflow: hidden;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 90px;
}

.react-datepicker__navigation--previous,
.react-datepicker__navigation--next {
  height: 8px;
}

.react-datepicker__navigation--previous {
  border-right-color: #cbd5e0;

  &:hover {
    border-right-color: #a0aec0;
  }
}

.react-datepicker__navigation--next {
  border-left-color: #cbd5e0;

  &:hover {
    border-left-color: #a0aec0;
  }
}

.react-datepicker-wrapper,
.react-datepicker__input-container {
  display: block;
}

.react-datepicker__header {
  border-radius: 0;
  background: #f7fafc;
}

.react-datepicker,
.react-datepicker__header,
.react-datepicker__time-container {
  border-color: #e2e8f0;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  font-size: inherit;
  font-weight: 600;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  margin: 0 1px 0 0;
  height: auto;
  padding: 7px 10px;

  &:hover {
    background: #edf2f7;
  }
}

.react-datepicker__day:hover {
  background: #edf2f7;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background: #3182ce;
  font-weight: normal;

  &:hover {
    background: #2a69ac;
  }
}

[cbioley]

@wouterds Wow, thank you very much! 🙌🏼

[raymclee]

@wouterds can you show us how to use the custom styles please?

[baumandm]

For anyone else who ends up here and wants a more complete example, I created [https://gist.github.com/baumandm/8665a34bc418574737847f7394f98bd9](). It demonstrates a wrapper component for React-datepicker that applies Chakra-UI styles, building on the styles from @wouterds and adding a few additional styles I needed.

It's shown in the gist, but to apply the custom styles, you'll want to import both the default react-datepicker.css and the custom Chakra-fied styles, like this:

import 'react-datepicker/dist/react-datepicker.css';
import './date-picker.css';

(YMMV if you're using a different bundler, but that worked for me)

[brandoncroberts]

@baumandm I think the gist link doesn't work?

[d-ivashchuk]

@baumandm gist indeed seems not to work and I would be up to looking at the styles that you came up with. Especially if they include dark theme!

[baumandm]

Sorry, the link text was correct but it linked back to this page for some reason. Here's the correct link: https://gist.github.com/baumandm/8665a34bc418574737847f7394f98bd9

[moritzjacobs]

For anyone still interested in this, I gave react-day-picker@8.x a shot, but it is still in beta. It works well with chakra though, because you can let chakra handle a few things like the popover etc.

Here's a sandbox: https://codesandbox.io/s/react-day-picker8x-vs-chakra-ui-example-rqjnx?file=/src/index.tsx

[adam-thomas-privitar]

https://www.npmjs.com/package/dayzed is a headless date picker which should be easy to integrate

[aboveyunhai]

https://www.npmjs.com/package/dayzed is a headless date picker which should be easy to integrate

I just made a simply one for basic usage via dayzed, it's not going to be any fancy but I guess other devs can get an idea based on it. https://github.com/aboveyunhai/chakra-dayzed-datepicker

[bpofficial]

I've made https://github.com/OrangeDigitalAustralia/chakra-datepicker and it's been serving me well while also conforming to chakra-ui styles

[G-MAKROGLOU]

I don't know if this is still relevant but you can use the Chakra-UI Input with a type of date or datetime-local to get datepickers and date-time pickers styled with the Chakra-UI theme.

E.g. <Input type="date" {...otherProps}/> <Input type="datetime-local" {...otherProps}/>

This approach will also work with Formik forms out of the box.

[slavaspirin]

Guys I would highly recommend react-date-picker It is so easy to style and it has very flexible functionality (including range picker)

DatePicker.js

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

import 'react-date-picker/dist/DatePicker.css'
import 'react-calendar/dist/Calendar.css'
import './date-picker.css'

const DatePickerr = () => {
    const [value, onChange] = useState(new Date());
    return (<div>
        <DatePicker onChange={onChange} value={value} maxDetail={'year'} />
    </div>);
}

export default DatePickerr;

DatePicker.css

.react-date-picker,
.react-date-picker *,
.react-date-picker *:before,
.react-date-picker *:after {
    border-radius: 5px
}

.react-date-picker__wrapper {
    padding: 6px;
    border: thin solid var(--chakra-colors-chakra-border-color)
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
    padding: 1em 1em
}

[barbinbrad]

I've been evaluating some of the options in this thread -- and I wanted to keep exploring for two reasons:

1. A lack of a dedicated time picker component (like antd)
2. Internationalization

I came Adobe's newest datepicker release: https://react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html

Here's an example integration with Chakra: https://codesandbox.io/s/white-breeze-rer8g2?file=/src/DatePicker.js

[charlie0077]

Does chakra ui has plan to make its own date range filter??? It is easy to just use other packages, but it takes time to customize the style, especially for dark mode... Should be easy for chakra-ui devs to leverage 3rd party lib to develop a date range picker.

[ImBIOS]

https://github.com/uselessdev/datepicker

I found this

[JollyGrin]

I ended up using react-datepicker and styling that myself a bit.

How did you get this to work?

Would love to use this but when applying these styles to the most recent version of react-datepicker I can't get it to work. I'm replacing the default css with this. Doesn't seem to be applying and when looking at the dom it seems the names are a bit different

[EldanGS]

Updates, https://chakra-ui.com/docs/components/input#input-methods-other-than-text

<Input
 placeholder="Select Date and Time"
 size="md"
 type="datetime-local"
/>

[ImBIOS]

https://github.com/ImBIOS/datepicker

I forked something I'm working on

[hortegag]

Hi Any recommendation to use date picker component with chakra ui 2.8.x ???

[moritzjacobs]

@hortegag Still using https://react-day-picker.js.org/