React-datepicker: Not able to set default time zone for date picker

[HariSoni87]

All the dates which we receive from date picker are in local time zone. Is there a way to define the time zone.
In our application use case we want to get the date in server time zone in place user's time zone.
React version - 15.6.2
React-datepicker version - 1.6.0

[neerajtomar98]

Facing the same issue.

[stephent]

As a workaround to this, I'm cheating the selected date by offsetting the actual date/time of my application's state by the utc offsets of the user's default time zone and the time zone my application is working in. Using moment-timezone.js:

const mo1 = moment(dateTime); // in browser default time zone, e.g. America/Denver
const mo2 = moment(dateTime).tz(myTimezoneId); // in current state time zone e.g. Africa/Bamako

const modifiedDate = moment(dateTime);
modifiedDate.subtract(mo1.utcOffset() - mo2.utcOffset(), 'minutes');

return modifiedDate.valueOf();

Then, in react date picker:

<DatePicker selected={modifiedDate} />

It would be nice to be able to set a time zone on react-datepicker directly so as to avoid having to do this.

[JohnStarich]

I'm doing something similar to @stephent, and wrapped it up into a component to wrap DatePicker. So far it's working pretty well, but I'd love for this to be built-in

Happy to contribute this logic if we get some buy-in on the idea.

[MCBama]

This is definitely still an issue. Any chance we'll get some word on this?

[neerajtomar98]

This is definitely still an issue. Any chance we'll get some word on this?

Iam using a workaround for this issue.
please check https://github.com/Hacker0x01/react-datepicker/issues/1388#issuecomment-582590792
But it will be good if there is prop in-built for this.

[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.

[JohnStarich]

This seems like a fairly common problem, judging from the top comment reactions.

@martijnrusschen Is this something you want in react-datepicker? If so, I'd be happy to contribute something like a utc option to store dates in UTC.

[danielo515]

Yep, we really need this too.

[dzmitry-kankalovich]

Really need this feature, sometimes I have cases when I need a datepicker to deal with datetime of the specific fixed TZ as opposed to browsers local TZ.

For example, I live in LA, so it's PST TZ, but I want to select datetime of the schduled job to run in let's say Moscow local TZ, and I don't want to try to remember what would equivalent date time for Nov 11, 10 pm Moscow time in my loca TZ which is PST.

So by default the datetime would be selected in my local PST TZ, and my workaround is to offset the selected value to the target TZ in onClick event:

  getTzOffsetMs() {
    const targetTz = +3; // UTC+3
    return (new Date().getTimezoneOffset() + (targetTz * 60)) * 60 * 1000;
  }

  toTargetTime(localTime) {
    // substraction of offset gives results as if I was selecting date having target TZ as a local TZ in my browser
    return localTime.getTime() - this.getTzOffsetMs() 
  }

  toLocalTime(targetTime) {
    return targetTime.getTime() + this.getTzOffsetMs()
  }

  onClickDatepicker(date) {
    const targetTs = this.toTargetTime(date)

    this.setState({
      scheduled_at: targetTs, // the value I need
      scheduled_at_dp: date.getTime() // the display value for Datepicker
    })
  }

Hope this makes sense. This though works reliably only if target TZ does not have Daylight Saving Time (DST).

Ideally though, I should be able to override TZ in Datepicker configuration properties.

[swkre]

Yes @martijnrusschen, it would be great if you can implement this as a built in property! @JohnStarich: Your UTC option would be perfect. We have an app where we would like the client's interaction to be in UTC.

[stephent]

@swkre @JohnStarich I think generalizing it beyond just UTC would be preferable. I have a use case where the time zone of the control should match the time zone of a location on the map (which could be anywhere). Being able to set a Timezone ID or UTC offset for the control would be ideal.

[talovicnedim]

+1 for UTC.