Force all EJ2 controls to display dates in UTC time zone - Branched from F182017

[Rob]

Thanks for getting back to me.

That seems to work for the Grid, however this is an issue with the DatePicker and InPlaceEditor controls as well.

See below:

https://stackblitz.com/edit/4mmvbb?file=index.ts

As you can see, if we set the initial value to 2023-01-01T00:00:00Z it displays this as 12/31/22.

How does this make any sense?

This is a date picker NOT a date time picker.

If I pick 1 January I'm picking 1 January irrespective of timezone.

It makes no sense for the DatePicker to apply a timezone offset and shift the date like this.

Is there a way to disable this for the DatePicker (and also the InPlaceEditor in Date mode)?

Thanks,

...................................................................................................................

It seems the only foolproof way to stop the EJ2 controls from applying TZ offsets is to strip the Z from the UTC date on the server before returning it to the client.

That's what I'm doing now and it seems to work perfectly, would be good if there was a way to completely disable timezone offsetting across all EJ2 controls though.

Rob

[Sureshkumar P]

Hi Rob,

As per our previous update you can also use the same servertimezoneoffset property as datepicker component to resolve the issue. To know more about the servertimezoneoffset property on datepicker, please refer to the API documentation.

Documentation: https://ej2.syncfusion.com/documentation/api/datepicker/#servertimezoneoffset

Regards,

Sureshkumar P

[Rob]

Hi,

Setting serverTimezoneOffset to 0 makes no difference in this case.

See this demo:

https://4mmvbb.stackblitz.io

Here I am explicitly setting the value of the DatePicker to 2023-01-01T00:00:00Z

i.e. 00:00 on 01/01/2023

But the date picker displays this as 12/31/2022

This has to be a bug.

Please take a closer look.

Thanks,

Rob

[UdhayaKumar Duraisamy]

We would like to inform you that if you provide any predefined values then it will be converted based on the timeZone offset provided. But today date (new Date() or DateTime.Now) will be set based on the client time zone only and it will not depend on serverTimeZoneOffset property. Based on your requirement you can set the serverTimeZoneOffset property.

import { DatePicker } from '@syncfusion/ej2-calendars';

 

const firstOfJanuaryUtc = new Date('2023-01-01');

 

document.getElementById('utcDate').innerHTML = firstOfJanuaryUtc.toISOString();

 

const datePicker: DatePicker = new DatePicker({

  value: firstOfJanuaryUtc,

  serverTimezoneOffset: -8,

  change: (e) =>

    (document.getElementById('datePickerUtcDate').innerHTML =

      e.value.toISOString()),

});

 

datePicker.appendTo('#datePicker');

 

Please refer to the documentation shared below for more information.

API Documentation: https://ej2.syncfusion.com/documentation/api/datepicker/#servertimezoneoffset

Sample: https://stackblitz.com/edit/4mmvbb-pzkgjm?file=index.ts

[Rob]

Hi UdhayaKumar,

Thanks for your reply however this does not appear to solve the issue.

See below screenshot - this is what I see when opening your Stackblitz fork without editing it at all.

Note that the date (2023-01-01) is still being displayed as 12/31/2022 even with serverTimezoneOffset set.

This makes no sense whatsoever. If you set a date picker to the date 2023-01-01 it should display 01/01/2023, simple as that. Timezone should not come into it at all as this is a DATE picker not a DATETIME picker and dates are absolute.

[UdhayaKumar Duraisamy]

Based on the information shared, we suspect that you are attempting to retrieve the selected date value in the dd/MM/yyyy format. You can use the format property as dd/MM/yyyy and the toLocaleDateString method to display the date value in the dd/MM/yyyy format.

Documentation:

• https://ej2.syncfusion.com/documentation/common/internationalization/#manipulating-datetime
• https://ej2.syncfusion.com/documentation/api/datepicker/#format

Sample: https://stackblitz.com/edit/4mmvbb-2rfxe2?file=index.ts