DateOnly from server converting to local user timezone

Hi, 


When loading a date-only field, the date is displayed one day earlier. The local timezone is -4 (America/New_York). I tried adding `DataUtil.serverTimezoneOffset = 0` to ngOnInit with no effect. See the stackblitz demo https://stackblitz.com/edit/angular-u5hmge?file=src%2Fapp.component.html.

Screenshot 2024-08-28 at 3.20.27 PM.png

Please advise.


Thanks


3 Replies 1 reply marked as answer

DM Dineshnarasimman Muthu Syncfusion Team August 29, 2024 01:28 PM UTC

Hi Chalber,


Greetings from Syncfusion Support.


We have validated your query regarding the grid displaying the previous date when the local timezone is -4. Upon validating the sample which you have provided, we noticed that the 'OrderDate' value in the data.js file is not in proper UTC format. The Grid requires datetime values in UTC format to display them correctly based on users' time zones. This mismatch might be causing the values to appear one day behind.


We have modified the sample which you have provided with proper UTC format in the OrderDate field value and then we implemented the serverTimezoneOffset value in the load event of the grid.


 

let stringData = JSON.stringify([

  {

    OrderID: 10248,

    CustomerID: 'VINET',

    OrderDate: '1996-07-04T00:00:00Z',

    ShippedDate: '1996-07-16T00:00:00Z',

    Freight: 32.38,

 



Image with local Timezone as -4:



Sample: https://stackblitz.com/edit/angular-u5hmge-pvmtjp


If you still face any issue, we request you to provide the data binding information and please provide image of the response sent from the server in the network tab of the browser.


Image of network tab for reference:


Regards,

Dineshnarasimman M



CH Chalber August 29, 2024 03:38 PM UTC

Hi Dineshnarasimman,


Thank you for your detailed response. I can confirm that your solution is working. However, it doesn't work for us because we're using the C# DateOnly type, which only outputs a date in "YYYY-MM-DD" format without any time zone. 

Here's a screenshot from the OData response.

Screenshot 2024-08-29 at 11.16.52 AM.png


Best,

Chalber



DM Dineshnarasimman Muthu Syncfusion Team September 2, 2024 03:39 AM UTC

Hi Chalber,


Thank you providing the image of the network tab. We understand that you using DateOnly type in your server and sending the data to the client. In the grid, upon setting format with type as date the date is displayed in the grid is set to previous day.


To overcome this, we suggest you to use 'dateonly' type in the grid columns.type instead of type 'date'. We have attached the code snippet for your reference.


<e-column field='OrderDate' headerText='OrderDate' type="dateonly"

    format="MMM d, yyyy" width='150'></e-column>

 



We have prepared a sample implementing DateOnly in the server-side and displaying the same date in the grid using the dateonly column type. We have attached the sample for your reference.


Image of the Network Tab:



Image of the date displayed in the grid:




Please let us know if you need any further assistance.


Regards,

Dineshnarasimman M


Attachment: ODataV4Adaptor_49b2a757.zip

Marked as answer
Loader.
Up arrow icon