We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Time zone in Grid

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:

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'),
},
];

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.


6 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team November 21, 2022 02:30 AM

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


Marked as answer

TT Ton That Hung November 21, 2022 05:04 AM

It works for me. Thank you very much.



RR Rajapandi Ravi Syncfusion Team November 22, 2022 12:34 AM

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.



TT Ton That Hung November 24, 2022 09:54 PM

Hi Rajapandi,
With format date:

OrderDate: new Date('2021-02-28T00:00:00'),


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




RR Rajapandi Ravi Syncfusion Team November 25, 2022 07:39 AM

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



TT Ton That Hung November 29, 2022 03:11 AM

Thank you for your support.


Loader.
Live Chat Icon For mobile
Up arrow icon