Date Formats in DataTables and Editor

taslargroup

We are pulling data from a REST API that returns dates in the format "YYYY-MM-DD", which works fine in the DataTables. We are using the render method to re-format to "MM/DD/YYYY", which also works. We are showing the date picker in the Editor with the same format by setting the format and type properties. The issue is that in the Editor edit form, the date is shown as "YYYY-MM-DD". After selecting a new date using the picker, it uses the proper format. If we change the API to return the date in the format "MM/DD/YYYY" the DataTables show "invalid date" but the Editor form shows the date in the correct format. What are we missing?

{
label: "Start Date",
name: "StartDate",
type: "datetime",
format: "MM/DD/YYYY",
visible: true,
render: function (data, type, full) {
if (data === null || data === "") {
return data;
}
else {
return dateRenderer(data, type, full);
}
}
}

colin

Hi @taslargroup ,

The format needs to match, so it's not possible to do the conversion in the first part of your question. If the data is changed, then you should also see "MM/DD/YYYY" in the edit box as shown in this example here.

Hope that gets you going, if not, please could you modify my example to demonstrate your problem,

Cheers,

Colin

taslargroup

I modified the example but it does not behave the way our project does. When we receive data from the datasource in anything other than "YYYY-MM-DD", the datatable shows "invalid date" in the column. But the editor will show the formatted date.

colin

Hi @taslargroup ,

Do you have

format: 'MM/DD/YYYY'

as in my example? If you do, and still getting that error, could you link to your page.

Cheers,

Colin

taslargroup

Yes, we do and the date picker populates the field with properly formatted dates. I can't link you to our page due to it being internal.

allan

Hi,

Editor works on the raw unformatted data that is available at the client-side. So the format option would match whatever that is (YYYY-MM-DD) from your description. It doesn't have an option to transform that into something else (the format option is told it what the format is, not any kind of conversion).

So if you wanted the date picker to show a different format, you'd need to transform the data that is being loaded into the DataTable.

How are you currently loading in the data? Can the format be transformed on output from the server?

Allan

allan

Sorry - I should have addressed this point:

When we receive data from the datasource in anything other than "YYYY-MM-DD", the datatable shows "invalid date" in the column

Remove the renderer for the DataTable. Its already in display format, so you don't need to rerender it.

Allan