chakra-pro-issues
chakra-pro-issues copied to clipboard
chakra-ui
DatePicker, DateRangePicker that supports Week/Month/Quarter/Year selection
Screenshot & Url A very good example is https://ant.design/components/date-picker/#components-date-picker-demo-date-render
Additional context
It will be super nice to implement it in a way that it has an interface for date formatting/parsing functions that are needed for its implementation, but as it's an interface and not the implementation any date library can be used. date-fns, moment, dayjs and others.
Antd design picker does exactly that.
https://ant.design/docs/react/replace-moment
And this is which one I use currently with some shitty overrides of the global CSS classes to adopt it to the color palette of chakra + to add dark theme support.
They're using picker-rc under the hood. It may be taken as an inspiration.
https://github.com/react-component/picker
Maybe refactoring to chakra-ui styling approach + slight API redesign will do the trick, but taking ideas and then reimplementing them would be even better :) As there is currently an annoying micro bug.
Happens when you select the date it changes to an old date and then back to the one that is selected super quickly yet visible.
So the selection of 2000-01-02 from 2000-01-01 for a 0.1ms will go back to 2000-01-01 and then to selected 2000-01-02.
But API and UX wise it's good. Unsure how good accessibility is as well as the responsiveness.
Either way, this component will be AWESOME to have. If it will land open sourced chakra-ui it will be even better :) As it's super sad that in 2021 it's that hard to get good cross-platform date pickers to work :)
https://github.com/deseretdigital/dayzed This sounds like an awesome library to build DatePicker :) It's like a downshift, but DatePicker :)
This sounds great, a Chakra Date Picker would be a dream. Something like this: https://material-ui-pickers.dev/demo/datetime-picker
Hi,
Any updates on this ? I've purchased chakra ui pro yesterday and we will be in need of this component soon.
I have used this one before and it works ok: https://www.npmjs.com/package/react-datepicker
But it doesn't fit in with a Chakra app. I think a date picker component should be added to the open source ChakraUI
What is the plan here, @segunadebayo ? I purchased Chakra UI Pro yesterday so I can support this sort of thing. And I am happy to help. Would you like me to send a pull request to ChakraUI, or would the Chakra team like to work on it?
Wost case, I could publish a 3rd-party react-datepicker fork called chakra-ui-datepicker. But it would fit way better into the Chakra ecosystem if the team helps
I have used this one before and it works ok: https://www.npmjs.com/package/react-datepicker
But it doesn't fit in with a Chakra app. I think a date picker component should be added to the open source ChakraUI
What is the plan here, @segunadebayo ? I purchased Chakra UI Pro yesterday so I can support this sort of thing. And I am happy to help. Would you like me to send a pull request to ChakraUI, or would the Chakra team like to work on it?
Wost case, I could publish a 3rd-party react-datepicker fork called
chakra-ui-datepicker. But it would fit way better into the Chakra ecosystem if the team helps
I would like to help :)
Ok here is the thread to follow: https://github.com/chakra-ui/chakra-ui/issues/580
It looks like somebody has prototyped both:
- CSS for react-datepicker that makes it look nice with Chakra.
- A prototype of chakra date picker built with the headless dayzed (a great idea!) - https://github.com/aboveyunhai/chakra-dayzed-datepicker
So 1 is a good option if you are building an app right now and quickly need a high-quality date picker.
And aboveyunhai/chakra-dayzed-datepicker is a great start to a custom ChakraUI date picker. It needs lots of work on improved styling, more features (such as date ranges), and documentation.
Something with the customization options and features of this one would be amazing: https://demo.mobiscroll.com/react/calendar/mobile-desktop-display
