Hi Syncfusion Team,
I'm using the Grid component containing a date column.
I need to show the date value is the same in any time zone.
My data:
I have a problem: at the time zones greater than 1, the day shown is delayed 1 day. Example: 2021-31-12 is shown as 2021-12-30.
How can I config to reach my requirement?
Link sample: https://stackblitz.com/edit/react-ldbwpc?file=index.js,package.json
Thank you in advance for any support.
Hi Ton,
Greetings from Syncfusion support
The Grid component will automatically convert the datetime values from UTC to local time zone and display it in the Grid. We have analyzed the attached code examples at our end. We found that the data are not properly parsed before binding it into the Grid.
However, if needed you can display the UTC time itself in the Grid by setting the DataUtil’s serverTimezoneOffset property of the EJ2 Data as ‘0’ on initialization.
While using local data binding, we need to parse the stringify result data in DataUtil to apply the serverTimeZoneOffset. Please refer to the below code example.
DataUtil.serverTimezoneOffset = 0;
const DATA = [ { OrderID: 1, CustomerName: 'Customer Name 1', OrderDate: new Date('2021-12-29'), }, { OrderID: 1, CustomerName: 'Customer Name 2', OrderDate: new Date('2021-12-30'), }, { OrderID: 1, CustomerName: 'Customer Name 3', OrderDate: new Date('2021-12-31'), }, ];
function Default() { React.useEffect(() => { updateSampleSection(); }, []); console.log(DATA); return ( <div className="control-pane"> <div className="control-section"> <GridComponent dataSource={DataUtil.parse.parseJson(JSON.stringify(DATA))} height="350"> <ColumnsDirective> <ColumnDirective field="OrderID" headerText="Order ID" width="120" textAlign="Right" ></ColumnDirective> <ColumnDirective field="CustomerName" headerText="Customer Name" width="150" ></ColumnDirective> <ColumnDirective field="OrderDate" headerText="Order Date" width="130" format="yyyy-MM-dd" textAlign="Right" /> </ColumnsDirective> </GridComponent> </div> </div> ); }
|
Sample: https://stackblitz.com/edit/react-ldbwpc-l9vzyl?file=index.js,package.json
Regards,
Rajapandi R
It works for me. Thank you very much.
Ton,
We are happy to hear that our provided solution was helpful to resolve the problem at your end.
Please get back to us if you need further assistance.
Hi Rajapandi,
With format date:
and I switch to time zone +7, the date value shown in the table is still wrong.
Link sample: https://stackblitz.com/edit/react-ldbwpc-k1y276?file=index.js,package.json
Ton,
To achieve your requirement, we suggest you use the proper UTC format. Please refer the below code example and sample for more information.
DataUtil.serverTimezoneOffset = 0;
const DATA = [ { OrderID: 1, CustomerName: 'Customer Name 1', OrderDate: new Date('2021-02-28T00:00:00.000Z'), }, { OrderID: 1, CustomerName: 'Customer Name 2', OrderDate: new Date('2021-12-30'), }, { OrderID: 1, CustomerName: 'Customer Name 3', OrderDate: new Date('2021-12-31'), }, ];
function Default() { React.useEffect(() => { updateSampleSection(); }, []); console.log(DATA); return ( <div className="control-pane"> <div className="control-section"> <GridComponent dataSource={DataUtil.parse.parseJson(JSON.stringify(DATA))} height="350"> <ColumnsDirective> <ColumnDirective field="OrderID" headerText="Order ID" width="120" textAlign="Right" ></ColumnDirective> <ColumnDirective field="CustomerName" headerText="Customer Name" width="150" ></ColumnDirective> <ColumnDirective field="OrderDate" headerText="Order Date" width="130" format="yyyy-MM-dd" textAlign="Right" /> </ColumnsDirective> </GridComponent> </div> </div> ); }
|
Sample: https://stackblitz.com/edit/react-ldbwpc-dqtlnc?file=index.js,package.json
Screenshot:
Regards,
Rajapandi R
Thank you for your support.
Ton,
Most Welcome.