[docs] Refactor Data Grid with Date Pickers example (mui#15992)

Author: LukasTy

docs/data/data-grid/custom-columns/EditingWithDatePickers.js

@@ -15,11 +15,8 @@ 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 { styled } from '@mui/material/styles';
-
-const dateAdapter = new AdapterDateFns({ locale });
+import format from 'date-fns/format';
 
 /**
  * `date` column
@@ -38,22 +35,12 @@ const dateColumnType = {
   })),
   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) {
-  const { InputProps, focused, ...other } = props;
-  return <GridEditDateInput fullWidth {...InputProps} {...other} />;
-}
-
 function GridEditDateCell({ id, field, value, colDef }) {
   const apiRef = useGridApiContext();
 
@@ -68,7 +55,20 @@ function GridEditDateCell({ id, field, value, colDef }) {
       value={value}
       autoFocus
       onChange={handleChange}
-      slots={{ textField: WrappedGridEditDateInput }}
+      slotProps={{
+        textField: {
+          variant: 'standard',
+          fullWidth: true,
+          sx: {
+            padding: '0 9px',
+            justifyContent: 'center',
+          },
+          InputProps: {
+            disableUnderline: true,
+            sx: { fontSize: 'inherit' },
+          },
+        },
+      }}
     />
   );
 }
@@ -87,18 +87,7 @@ function GridFilterDateInput(props) {
       value={item.value ? new Date(item.value) : null}
       autoFocus
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      slotProps={{
-        textField: {
-          variant: 'standard',
-        },
-        inputAdornment: {
-          sx: {
-            '& .MuiButtonBase-root': {
-              marginRight: -1,
-            },
-          },
-        },
-      }}
+      slotProps={{ textField: { size: 'small' } }}
       onChange={handleFilterChange}
     />
   );
@@ -121,7 +110,7 @@ const dateTimeColumnType = {
   })),
   valueFormatter: (value) => {
     if (value) {
-      return dateAdapter.format(value, 'keyboardDateTime');
+      return format(value, 'MM/dd/yyyy hh:mm a', { locale });
     }
     return '';
   },

docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx

@@ -20,12 +20,8 @@ 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 { styled } from '@mui/material/styles';
-import { TextFieldProps } from '@mui/material/TextField';
-
-const dateAdapter = new AdapterDateFns({ locale });
+import format from 'date-fns/format';
 
 /**
  * `date` column
@@ -44,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,
@@ -81,7 +65,20 @@ function GridEditDateCell({
       value={value}
       autoFocus
       onChange={handleChange}
-      slots={{ textField: WrappedGridEditDateInput }}
+      slotProps={{
+        textField: {
+          variant: 'standard',
+          fullWidth: true,
+          sx: {
+            padding: '0 9px',
+            justifyContent: 'center',
+          },
+          InputProps: {
+            disableUnderline: true,
+            sx: { fontSize: 'inherit' },
+          },
+        },
+      }}
     />
   );
 }
@@ -102,18 +99,7 @@ function GridFilterDateInput(
       value={item.value ? new Date(item.value) : null}
       autoFocus
       label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      slotProps={{
-        textField: {
-          variant: 'standard',
-        },
-        inputAdornment: {
-          sx: {
-            '& .MuiButtonBase-root': {
-              marginRight: -1,
-            },
-          },
-        },
-      }}
+      slotProps={{ textField: { size: 'small' } }}
       onChange={handleFilterChange}
     />
   );
@@ -136,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 '';
   },

packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx

@@ -161,9 +161,11 @@ const PickersTextField = React.forwardRef(function PickersTextField(
         ownerState={ownerState}
         {...other}
       >
-        <InputLabel htmlFor={id} id={inputLabelId} {...InputLabelProps}>
-          {label}
-        </InputLabel>
+        {label != null && label !== '' && (
+          <InputLabel htmlFor={id} id={inputLabelId} {...InputLabelProps}>
+            {label}
+          </InputLabel>
+        )}
         <PickersInputComponent
           elements={elements}
           areAllSectionsEmpty={areAllSectionsEmpty}