Ability to set timezone

[Eric24]

Is your feature request related to a problem? Please describe.
There does not appear to be a way to specify the timezone reference used by the component (i.e. it uses only the browser's timezone). This is not always correct, as there are times when an application or even a specific date field needs to be displayed in a specific timezone.

Describe the solution you'd like
A way to override the default timezone with a specific timezone.

Describe alternatives you've considered
Our current solution is to manipulate the input value, adding an offset value to make the component's default timezone match that of the desired timezone, and then do the same on the way out. It's definitely a hack.

[gpbl]

@Eric24 thanks for your suggestion! This should go in the next major release. Do you think a timezone prop would work?

[Eric24]

Yes, timezone would certainly make sense as a prop; the other option is tz, which is pretty common.

By default, the component would work as it does now (using the browser's timezone), but if defined, it just uses the prop value to explicitly set the timezone of the passed-in date value.

[m-nathani]

hey guys i badly need this.. is there any update for this ? . or do you have part-time of solution how to fix it ?

[danben4]

Any update on this?
I see that the issue "Ability to set timezone #1010" is marked as done in the "DayPicker v8" project. But that component doesn't seem to support this still.

[mauriciosoares]

Any updates on this feature? Is this something that we can help with a Pull Request?

[gpbl]

@mauriciosoares it would be nice to know in details how it should work as this issue is rather old. Would you mind to open a feature request? https://github.com/gpbl/react-day-picker/issues/new/choose

[mauriciosoares]

Done! #1389,

btw, if you need some help with this, I'd gladly do my best to assist you 🤘

[nerburish]

Hello! Today exists any feature or workaround to set the timezone instead of use the browser default?

[nguyenbry]

Here is a workaround using luxon

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  const myTz = "America/New_York"; // Something different from browser TZ

  return (
    <DayPicker
      mode="single"
      selected={
        selected &&
        DateTime.fromJSDate(selected, { zone: myTz })
          .setZone("local", { keepLocalTime: true })
          .toJSDate()
      }
      onSelect={(day) => {
        if (!day) return setSelected(undefined);

        const manipulated = DateTime.fromJSDate(day)
          .setZone(myTz, { keepLocalTime: true })
          .toJSDate();
        setSelected(manipulated);
      }}
    />
  );
}