Setting timeZoneName doesn't seem to affect the datetimepicker

[arielAzarconColcap]

Please see this: I temporarily set the phone's timezone in such a way that the date is still the day before as compared to the current day in AU (+11:00, Australia/Sydney tz).

Then I open the DateTimePicker like this: DateTimePickerAndroid.open({ value: variableToUse, minimumDate, timeZoneName: "Australia/Sydney", onChange: (ev, newDate) => { if (ev.type === 'set') { if(onChangeDateFn) onChangeDateFn(newDate) } } })

However, upon opening the Datepicker, it still highlights the previous day as if setting timeZoneName to Australia/Sydney did not have any effect:

Is this intentional? My expectation is that it should now follow +11:00 timezone, and as such, the current day should be February 12, not February 11. I cannot select it anymore though. that means the minimumDate props is working, but it should be greyed out as well, like the previous days before it.

I'm using: Expo: 50.0.6 @react-native-community/datetimepicker: 7.6.2 Android: 11

[olivertylsar]

I noticed the same thing.

[neemanwa]

same issue

[neemanwa]

Any update on this issue? Is there any fix for this ?

[Marinatim]

same issue as well for France, Edit: installed moment, and its all solved.

[arielAzarconColcap]

same issue as well for France, Edit: installed moment, and its all solved.

Aside from installing moment, may I know what else you did @Marinatim? I asked because I already got moment installed before trying this date picker package, and it still had that issue.

[neemanwa]

The issue was reproducible when on different timeZones.

Solved by converting the time to UTC.

Get the timezone offset, current locale's timezone and UTC. then adding the offset to UTC time. Create a date using UTC time, represents the actual date in the local time zone.

  const timeZoneOffsetInMinutes = dob.getTimezoneOffset();
  const utcTime = dob.getTime() + (timeZoneOffsetInMinutes * 60000);
  const actualDate = new Date(utcTime); //setting the actual date on dateTimePicker renders the correct date on calendar.

[arielAzarconColcap]

The issue was reproducible when on different timeZones.

Solved by converting the time to UTC.

Get the timezone offset, current locale's timezone and UTC. then adding the offset to UTC time. Create a date using UTC time, represents the actual date in the local time zone.

  const timeZoneOffsetInMinutes = dob.getTimezoneOffset();
  const utcTime = dob.getTime() + (timeZoneOffsetInMinutes * 60000);
  const actualDate = new Date(utcTime); //setting the actual date on dateTimePicker renders the correct date on calendar.

Thanks @neemanwa, but the issue still remains I think. Please see this:

The selected date is February 12, right. But the current date per the date picker is February 11. That's why it has that style instead of being greyed out like February 1-10. Yes it cannot be selected anymore, but that is due to minimumDate working as expected.

We have no way of setting what the current date is. I think this is correct because it should be based on timeZoneName that was set when we called the datepicker (or the phone's timezone if we did not set timeZoneName). As of writing this, its already April 05, 2024 in Australia, but its still April 4, 2024 in the UK. if I set the timezone to "Australia/Sydney", it should follow AU's timezone right? and that means that upon opening the datepicker, the current date should now be April 05 even though I am currently in the UK and my phone has UK's timezone in it.

[Marinatim]

same issue as well for France, Edit: installed moment, and its all solved.

Aside from installing moment, may I know what else you did @Marinatim? I asked because I already got moment installed before trying this date picker package, and it still had that issue.

@arielAzarconColcap what helped me is following- so my datetimepicker is: <DateTimePickerModal display="inline" isVisible={isDatePickerVisible} mode="datetime" onConfirm={handleConfirm} onCancel={hideDatePicker} minimumDate={new Date()} locale="fr_FR" timeZoneName={"Europe/Paris"} minuteInterval={10} /> Then in handleConfirm function i have added : setDateStart(date); setTimeStart(date);

const handleConfirm = (date) => { console.warn("A date has been picked: ", date); // here time is 2h earlier than i picked hideDatePicker(); setDateStart(date); setTimeStart(date); };

const [isDateStart, setDateStart] = useState(); const startDate = Moment(isDateStart).format("MMMM Do"); const [isTimeStart, setTimeStart] = useState(); const startTime = Moment(isTimeStart).format("HH:mm"); // then here my time shows correctly console.log("date after adding moment", startDate, startTime);