From ac50b04fb995ca38a4f2424aebf8ea5c07133724 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 23 Dec 2024 18:18:53 +0200
Subject: [PATCH] Use date library API over library internals

---
 .../data-grid/custom-columns/EditingWithDatePickers.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
index 8eb42e4186dee..92d5206e7ae54 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
@@ -21,8 +21,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as locale } from 'date-fns/locale';
-
-const dateAdapter = new AdapterDateFns({ locale });
+import format from 'date-fns/format';
 
 /**
  * `date` column
@@ -41,7 +40,7 @@ const dateColumnType: GridColTypeDef<Date, string> = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDate');
+      return format(value, 'MM/dd/yyyy', { locale });
     }
     return '';
   },
@@ -123,7 +122,7 @@ const dateTimeColumnType: GridColTypeDef<Date, string> = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDateTime');
+      return format(value, 'MM/dd/yyyy hh:mm a', { locale });
     }
     return '';
   },