diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
index 3c26ea1d79cd0..a95e65d7e29fc 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
@@ -15,7 +15,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 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 InputBase from '@mui/material/InputBase';
 import { enUS as locale } from 'date-fns/locale';
 import format from 'date-fns/format';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -36,7 +35,7 @@ const dateColumnType = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDate');
+      return format(value, 'MM/dd/yyyy', { locale });
     }
     return '';
   },
@@ -129,7 +128,7 @@ const dateTimeColumnType = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDateTime');
+      return format(value, 'MM/dd/yyyy hh:mm a', { locale });
     }
     return '';
   },
diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
index ada857fad5b8b..f4bb3dcd5dae1 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
@@ -20,7 +20,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 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 InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { enUS as locale } from 'date-fns/locale';
 import format from 'date-fns/format';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -41,24 +40,12 @@ const dateColumnType: GridColTypeDef<Date, string> = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDate');
+      return format(value, 'MM/dd/yyyy', { locale });
     }
     return '';
   },
 };
 
-const GridEditDateInput = styled(InputBase)({
-  fontSize: 'inherit',
-  padding: '0 9px',
-});
-
-function WrappedGridEditDateInput(props: TextFieldProps) {
-  const { InputProps, focused, ...other } = props;
-  return (
-    <GridEditDateInput fullWidth {...InputProps} {...(other as InputBaseProps)} />
-  );
-}
-
 function GridEditDateCell({
   id,
   field,
@@ -154,7 +141,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 '';
   },