Time zone in Grid

[Ton That Hung]

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.

[Rajapandi Ravi]

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

[Ton That Hung]

It works for me. Thank you very much.

[Rajapandi Ravi]

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.

[Ton That Hung]

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

[Rajapandi Ravi]

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

[Ton That Hung]

Thank you for your support.

[Rajapandi Ravi]

Ton,

Most Welcome.