date format react editing date

dafer660

Hey,

I was trying to save date in a different format using the datepicker.

I tried to have the column like this:

id: 'date',
header: 'Date',
editor: {
	type: "datepicker",
	config: { format: "%d/%m/%Y" },
},
template: (value) => (dayjs(value).isValid() ? dayjs(value).format('YYYY-MM-DD') : ''),
width: 275,

However, it still stores as the following:

"2025-10-16T23:00:00.000Z"

Is there any way I could store as "YYYY-MM-DD"?

Many thanks,
Daniel F.

tasha

Hello dafer660,

To format date this way 'YYYY-MM-DD' using the datepicker you can use templateparameter of the columns property:

   {
      id: "date",
      header: 'Date - "datepicker"',
      width: 180,
      editor: "datepicker",
      template: (v) =>
        v
          ? v.toLocaleDateString("en-CA", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
            })
          : "",
    },

Please check the example: https://stackblitz.com/edit/vitejs-vite-6vtvrbmn?file=src%2FGridComponent.jsx

dafer660

Hey Tasha,

Thanks for having the time to reply, but I as using similar solution, and indeed it works when the field is empty, but it doesn't seem to like UTC:

Imgur - Svar utc date

However, if I change to edit the current date, which is in format 'YYYY-MM-DD', it crashes:

Imgur - crash 1

Imgur - crash 2

Currently data comes in JSON and each row is like this:

{
  "actual_price": null,
  "area": "Firewalls",
  "certs_included": false,
  "comment": null,
  "created_by": "someone",
  "creation_date": "2025-09-19",
  "date": "2025-09-19",
  "duration": null,
  "engineer": "a jack of all trades",
  "estimated_price": 100,
  "fy": "25",
  "id": 157,
  "modified_by": null,
  "modified_in": "2025-09-19",
  "priority": 3,
  "status": null,
  "technology": "tech",
  "training_name": "training_name",
  "type": "cert"
}

Many thanks,
Daniel F.

tasha

Hello dafer660,

I can assume this error occurs because the date comes in a string format as I can see from your code: "date": "2025-09-19"and the string doesn't have a getFullYear method, as indicated in your error.
Therefore, you need to convert the string into a date format before editing.
You can use the editor action for this:

const init = (api) => {
    api.on("editor", (ev) => {
        console.log("A new value:", ev.value);
    });
};

dafer660

Unfortunately that did not work, as it crashes before the event with api.on() or api.intercept() are called/initiated.

tasha

If you use datepicker editor to make it work correctly, you need your date to be in the date format initially.
Thus before parsing it into the grid, change date string into date format using useEffect hook.

Please check the example: https://stackblitz.com/edit/vitejs-vite-fc52pfgu?file=src%2FGridComponent.jsx