search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.59k stars 672 forks source link

Editable Date Inputs not working with certain locales and unexpected behavior of date range #351

Open Lumen27 opened 4 years ago

Lumen27 commented 4 years ago

Subject of the issue

I copied the DateRange code from the documentation and changed the locale to 'ru'. When I changed the input value an error icon appeared. I tried other locales too. Default and fr works, lv and ru don't. I didn't try the rest. I am aware that there is an "updated" version by meyve, but that didn't work for me and it was last updated 2 years ago.

While writing this issue I ran into another one. I don't know if it's a bug or a feature, but when I have chosen a range and change the first date, the second one resets to the date I changed. Lets say I have days 2-10 selected and changed the first day from 2 to 4. The 10 also changes to 4. Is there a way for the second position to not change?

[BUG] Bug Reproduce Steps

  1. Copy code from http://adphorus.github.io/react-date-range/#daterange (by clicking view code) I'm using a class component, so I rewrote the state.
  2. add import { ru } from 'date-fns/locale';
  3. add locale={ru} prop
  4. Select range, edit the input and press Enter.

[BUG] Expected behaviour

Expected the range to change, but got an error icon. Date range didn't change.

Environment

Package Version: v1.0.3 React version: v16.13.0 Node version: v12.13.1 Browser: Google Chrome

WaveMeUp commented 4 years ago

Same here

blogui91 commented 4 years ago

I have the same problem for es (Spanish) in my case it doesn't throw any error, it just ignores locale, i followed the same steps above. :/

blogui91 commented 4 years ago

I just realized i am using the typings @types/react-date-range but don't match with the library. So i had to remove the typings and add ''declare module 'react-date-range';" in my index.d.ts.

Finally it worked.

josx commented 3 years ago

@blogui91 i cant make it work in any locale. Can you show us what you have done?

blogui91 commented 3 years ago

@blogui91 i cant make it work in any locale. Can you show us what you have done?

İf you have installed @types/react-date-range just uninstall it. Create a definition file (.d.ts) in the root of Your project (It May be one already created) And add the following code in the file: declare module 'react-date-range';

That should work