search

CodeYellowBV / re-cy-cle

React component library for Code Yellow
https://codeyellowbv.github.io/re-cy-cle/
6 stars 6 forks source link

SingleDatePicker: improve UX when typing instead of using picker #44

Closed SpaceK33z closed 7 years ago

SpaceK33z commented 7 years ago

Currently it is possible to freely type in the input field instead of using the picker to select a date, but it is not clear at all how the date should be formatted. If we use some sort of text mask we can make this clear to the user.

Perhaps react-dates already has something for this.

cc @RogerKemp

SpaceK33z commented 7 years ago

Relevant issue in react-dates: https://github.com/airbnb/react-dates/issues/237

SpaceK33z commented 7 years ago

With react-day-picker this seems to be a lot easier. <DayPickerInput /> accepts a component prop, which we can use to pass a custom input component - with a text mask applied.

react-day-picker also has the advantage of being a lot lighter than react-dates.

SpaceK33z commented 7 years ago

Refactored to react-day-picker (wow this was easy). Next step is actually fixing this issue.

aminbenselim commented 6 years ago

@SpaceK33z, the issue I had with react-day-picker, and react-dates is that when I change the month on the input, the month is not visible on the calendar but i actually have to navigate to it.

did you face the same issue ?

SpaceK33z commented 6 years ago

@amine-benselim yes I did face the same issue, I fixed it with this commit: https://github.com/CodeYellowBV/re-cy-cle/commit/843b49cca5e38bafd8d77dd171e19454aa0e2b2f#diff-56694972cccd2c99fe20018197905792

aminbenselim commented 6 years ago

thanks @SpaceK33z. the issue I am facing is that I am not using the 'react-day-picker` input field but my custom one.