React-datepicker: Date picker offset dates incorrectly is selected props receives a non-moment object

Created on 16 Nov 2016  路  9Comments  路  Source: Hacker0x01/react-datepicker

You can see the issue on the 'Clear datepicker input' example.
After clear the component, the selected field will receive a null value. That will create a strange behavior inside the DatePicker that will wrongly offset the dates.
The Calendar component will understand the week starts on Saturday and not Monday for en locale, creating a cascade of wrong day assignment to each Day component.

Most helpful comment

Looks like this is still an issue, was able to avoid it by setting an openToDate prop. Seems like it might be related to the utcOffset handling but I'm not sure.

All 9 comments

I think it is intended behavior that clearing the date input propagates a null value; since the component uses moment.js objects for the API, there aren't really any other possibilities. Can you give a concrete sample app that shows:

  • Sample code
  • Expected behavior
  • Actual behavior

@rafeememon, I will use the 'Clear datepicker input' as a base example. We can change the handler function to:

  handleChange (date) {
    console.log(date && date.valueOf()); // This line will show the problem
    this.setState({
      startDate: date
    })
  },

Assuming you choose 10/27/2016 on the calendar, the value for date.valueOf() will be 1477526400000. When you build a new Date object using this value you will receive the follow output Wed Oct 26 2016 17:00:00 GMT-0700 (PDT).

I would expect a timestamp related to 10/27/2016 and not 10/26/2016.

Makes sense?

Looks like this is still an issue, was able to avoid it by setting an openToDate prop. Seems like it might be related to the utcOffset handling but I'm not sure.

Guys, I have the same issue with wrong date.
1) I scroll months say from June to August.
2) Then for instance I click 08/01/2017 and get 07/31/2017.

Has anyone found a fix for this issue with wrong date? I'm using react-datepicker v.0.48.0
P.S. Seems that scrolling months is essential

Hi guys, I have the same story...does anybody have a workaround here?

@romanveryovkin I have found workaround for my case:

moment.utc(date.valueOf() + date.utcOffset() * 60000)

I don't know if it works in your case or in every case.

@vladimir-konnov Did not work in my case. It looks like the issue _is_ with the time of day, however. For example, picking 02/02/2018 where I am gives me 02/01/2018 at 19:00:00 and I am GMT-0500. This means it's probably selecting 02/02/2018 at 00:00:00 and then accounting for the fact that I am 5 hours ahead of that.

@vladimir-konnov, works for me
moment.utc(date.valueOf() + date.utcOffset() * 60000)

Moment.js was removed in #1527, starting v2.0.0, this package doesn't use Moment anymore.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

evolve2k picture evolve2k  路  3Comments

dhruvparmar372 picture dhruvparmar372  路  3Comments

ahribori picture ahribori  路  3Comments

ali-master picture ali-master  路  3Comments

lclemence picture lclemence  路  3Comments