How do I format an ISO timestamp?

[Andy]

So I have dates which comes back in an ISO style timestamp: 2022-01-29T18:01:52.477Z

It does not appear to recognize this and isn't formatting it:

const setDateFormat = {
    type: 'date', format: 'dd/MM/yyyy'
}

<ColumnDirective headerText='Created On' field='CreatedOn' format={setDateFormat} width='80' />

How should I get this working? Thanks.

[Rajapandiyan Settu]

Hi Andy, 

Thanks for contacting Syncfusion support. 

By analyzing your query, we could see that you are using DateString value on date column. Before proceeding with your query, we would like to share the behavior of date typed column in Grid. 

In EJ2 Grid, the Formatting, Filtering, Sorting, Grouping actions are performed with the data values as in the Grid’s dataSource. If the Date typed column has string value in the dataSource, then performing Sort, Filter, Group actions works like a string and date formatting is not applied on string value. This is the default behavior of Grid. 

So, we suggest you to use dateObject in the Grid dataSource instead of using dateString to resolve the problem.  

Date Formatting: https://ej2.syncfusion.com/react/documentation/grid/columns/columns/#date-formatting 

[app.js] 

var data = [ 

  { 

    OrderID: 10248, 

    CustomerID: 'VINET', 

    EmployeeID: 5, 

    OrderDate: new Date('2022-01-29T18:01:52.477Z'), // use DateObject value for date column 

  }, 

  ---- 

]; 

const setDateFormat = { 

  type: 'date', 

  format: 'dd/MM/yyyy', 

}; 

const SyncGrid = () => { 

  return ( 

    <div> 

      <GridComponent dataSource={data}> 

        --- 

          <ColumnDirective 

            field="OrderDate" 

            headerText="Order Date" 

            width="130" 

            type="date" 

            format={setDateFormat} 

          /> 

        </ColumnsDirective> 

      </GridComponent> 

    </div> 

  ); 

}; 

  

Sample: https://stackblitz.com/edit/react-xa25ij-ssrzig?file=component%2Fapp.jsx 

Still, if you have some issue, Kindly share the below detail to validate further. 

1. Which type of data-binding (local/remote) you have used? Share the adaptor details.
2. Are you binding data from any custom service? Share the full code and details about your custom service.
3. Share the complete Grid code.

Regards, 

Rajapandiyan S 

[Onur Ozyer]

I also need to output the hh:mm:ss of the date time. I try like below, but the time section comes incorrect.
I noticed, it works corretly, only when 'Z' - zulu character is removed the input date.

Could you help to show to display the dat and time correctly, when input date is in Zulu format ?

var data = [

{

OrderDate: new Date('2022-01-29T18:01:52.477Z'),

}

];

const setDateFormat = {

type: 'date',

format: 'dd/MM/yyyy hh:mm',

};

const SyncGrid = () => {

return (

<div>

<GridComponent dataSource={data}>

<ColumnDirective

field="OrderDate"

headerText="Order Date"

width="130"

type="date"

format={setDateFormat}

/>

GridComponent>

div>

);

};

[Rajapandiyan Settu]

Hi Onur,

Thanks for contacting Syncfusion support.

When converting UTC DateStriing into a Date object, it will be converted into the local timezone. This is the default behavior of Javascript.

In order to assist you further, kindly share the below details to proceed further.

1. Share the complete Grid code files and package.json file.
2. How could you bind the data to the Grid?
3. Which type of data binding (remote/ local/ custom binding) you have used? Share the code details.

Regards,

Rajapandiyan S

[Andy]

Here's what I have done to make this work, I use a valueAccessor which basically lets me set whatever I want. I think for your timezone in india you would use .toLocaleString('hi')

// Convert the grid action dates into dateTime
  const setDateFormat = (field, data, column) => {
    return new Date(data[field]).toLocaleDateString("en-US", {
      timeZone: "UTC",
      month: "short",
      day: "numeric",
      year: "numeric",
    })
  }
​
// Attach a valueAccessor property
<ColumnDirective
            headerText"Action Date"
            field="actionDate"
            valueAccessor={setDateFormat}
            width="150"
          />

[Rajapandiyan Settu]

Hi Onur,

You can use the value accessor method to show the values in a customized format. But this is used only for display purposes, all the data actions like filtering, sorting, etc., are performed with the data bound to the Grid. We can convert the time before binding the data to the Grid. Kindly share the below details to achieve this.

1. Share the complete Grid code files and package.json file.
2. How could you bind the data to the Grid?
3. Which type of data binding (remote/ local/ custom binding) you have used? Share the code details.

Regards,

Rajapandiyan S