[DataGrid] Fix DatePicker bug by limiting years to 4 digits (#3222)

mui · Dec 7, 2021 · 8ac4544 · 8ac4544
1 parent 2bd776e
commit 8ac4544
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx b/packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx
@@ -34,6 +34,7 @@ export function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBas
     tabIndex,
     hasFocus,
     getValue,
+    inputProps,
     ...other
   } = props;
 
@@ -117,6 +118,10 @@ export function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBas
       fullWidth
       className={classes.root}
       type={isDateTime ? 'datetime-local' : 'date'}
+      inputProps={{
+        max: isDateTime ? '9999-12-31T23:59' : '9999-12-31',
+        ...inputProps,
+      }}
       value={valueState.formatted}
       onChange={handleChange}
       {...other}

diff --git a/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -11,7 +11,7 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
 export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
 
 function GridFilterInputDate(props: GridFilterInputDateProps) {
-  const { item, applyValue, type, apiRef, focusElementRef, ...other } = props;
+  const { item, applyValue, type, apiRef, focusElementRef, InputProps, ...other } = props;
 
   const filterTimeout = React.useRef<any>();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
@@ -45,12 +45,6 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     setFilterValueState(String(itemValue));
   }, [item.value]);
 
-  const InputProps = {
-    ...(applying ? { endAdornment: <GridLoadIcon /> } : {}),
-    max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-    ...other.InputProps,
-  };
-
   return (
     <TextField
       id={id}
@@ -64,8 +58,15 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
         shrink: true,
       }}
       inputRef={focusElementRef}
+      InputProps={{
+        ...(applying ? { endAdornment: <GridLoadIcon /> } : {}),
+        ...InputProps,
+        inputProps: {
+          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+          ...InputProps?.inputProps,
+        },
+      }}
       {...other}
-      InputProps={InputProps}
     />
   );
 }