Search code examples
reactjsmaterial-uidatepickertimezoneiso

Material date-time pickers and zoned time string problem

I have a page with @material-ui/pickers

 <TimePicker .. value={value}/> /* value == 2020-12-24T13:05:10.714Z */

The value in the example is a zoned datetime string coming the from server. My time zone is +2:00, Ukraine/Kiev.

The problem is that rendered time is 15:05. Is this behaviour normal when input value is zoned datetime? I would like to see 13:05. Is this the server that provides me with incorrect datetime format or is it me misusing @meterial/pickers and @date-fns ?

Solution

  • 2020-12-24T13:05:10.714Z is an ISO-8601 datetime string. The suffix Z means that the time is in UTC (see wikipedia). The rendered time of 15:05 in your +02:00 zone matches that.

    So yes, if your server meant to specify 13:05 Kiev time, it's using the wrong format or the wrong time. It should say 2020-12-24T11:05:10.714Z or 2020-12-24T13:05:10.714+02:00.