0

I have an application built with Reactjs(front-end) and MeteroJS(back-end), I am using material-ui as UI design library. Recently we have implemented a globalization functionality in app, While developing global clock functionalities We have faced an issue with material-ui/DatePicker. In a search form I tried to create a date picker with user-specified timezone using material-ui/DatePicker and moment-timezone packages, and I passed the input date like this:

new Date(moment.tz("userTimeZone").endOf('day'))

But the datepicker is automatically converting the date to system local time + specified timezone time. How can I set specified timezone time in my DatePicker?

Farshid616
  • 1,404
  • 1
  • 14
  • 26
suneeth
  • 127
  • 3
  • 10
  • 1
    try using ParseIO https://stackoverflow.com/questions/60382084/material-ui-datepicker-showing-wrong-date/64805720#64805720 – sonali Jan 07 '21 at 05:40
  • @sonali Thanks for the response, i have installed date-fns package and created a date object for date picker using parseISO function, like this , parseISO(moment.tz("userTimeZone").format("YYYY-MM-DDTHH:mm:ssZ") but it doesn't still showing the date in my local system, not with the preferred timezone date – suneeth Jan 07 '21 at 09:55
  • @sonali I have tried date-fns-tz , utcToZonedTime function, i can successfully convert the local time to proffered zone time but when changing the date from date-picker the date automatically compute the selected date with proffered zone date and set to that computed date( i have a tz setting functionality on date onChange function too ), I think the cause of this issue is, the output of material UI date-picker is UTC and it converting to preferred zone time, u have any suggestion to fix this issue? – suneeth Jan 12 '21 at 07:08

0 Answers0