fix: datepicker filter fix

material-table-core · Jul 12, 2021 · 7bb9169 · 7bb9169
1 parent c3e46fc
commit 7bb9169
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/src/components/MTableEditField/DateField.js b/src/components/MTableEditField/DateField.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
+import { TextField } from '@material-ui/core';
 import { LocalizationProvider, DatePicker } from '@material-ui/lab';
 
 function DateField({
@@ -44,6 +45,7 @@ function DateField({
             fontSize: 13
           }
         }}
+        renderInput={(params) => <TextField {...params} />}
         inputProps={{
           'aria-label': `${columnDef.title}: press space to edit`
         }}

diff --git a/src/components/MTableFilterRow/DateFilter.js b/src/components/MTableFilterRow/DateFilter.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import DateFnsUtils from '@date-io/date-fns';
+import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
+import TextField from '@material-ui/core/TextField';
 import { getLocalizedFilterPlaceHolder } from './utils';
 import {
   DatePicker,
   DateTimePicker,
-  LocalizationProvider,
-  TimePicker
+  TimePicker,
+  LocalizationProvider
 } from '@material-ui/lab';
 
 function DateFilter({
@@ -20,22 +21,39 @@ function DateFilter({
   const pickerProps = {
     value: columnDef.tableData.filterValue || null,
     onChange: onDateInputChange,
-    placeholder: getLocalizedFilterPlaceHolder(columnDef),
+    placeholder: getLocalizedFilterPlaceHolder(columnDef, localization),
     clearable: true
   };
-
   let dateInputElement = null;
   if (columnDef.type === 'date') {
-    dateInputElement = <DatePicker {...pickerProps} ref={forwardedRef} />;
+    dateInputElement = (
+      <DatePicker
+        {...pickerProps}
+        ref={forwardedRef}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    );
   } else if (columnDef.type === 'datetime') {
-    dateInputElement = <DateTimePicker {...pickerProps} ref={forwardedRef} />;
+    dateInputElement = (
+      <DateTimePicker
+        {...pickerProps}
+        ref={forwardedRef}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    );
   } else if (columnDef.type === 'time') {
-    dateInputElement = <TimePicker {...pickerProps} ref={forwardedRef} />;
+    dateInputElement = (
+      <TimePicker
+        {...pickerProps}
+        ref={forwardedRef}
+        renderInput={(params) => <TextField {...params} />}
+      />
+    );
   }
 
   return (
     <LocalizationProvider
-      dateAdapter={DateFnsUtils}
+      dateAdapter={AdapterDateFns}
       locale={localization.dateTimePickerLocalization}
     >
       {dateInputElement}

diff --git a/src/components/MTableFilterRow/DefaultFilter.js b/src/components/MTableFilterRow/DefaultFilter.js
@@ -19,7 +19,7 @@ function DefaultFilter({
       style={columnDef.type === 'numeric' ? { float: 'right' } : {}}
       type={columnDef.type === 'numeric' ? 'number' : 'search'}
       value={columnDef.tableData.filterValue || ''}
-      placeholder={getLocalizedFilterPlaceHolder(columnDef)}
+      placeholder={getLocalizedFilterPlaceHolder(columnDef, localization)}
       onChange={(event) => {
         onFilterChanged(columnDef.tableData.id, event.target.value);
       }}

diff --git a/src/components/MTableFilterRow/LookupFilter.js b/src/components/MTableFilterRow/LookupFilter.js
@@ -23,7 +23,12 @@ const MenuProps = {
   }
 };
 
-function LookupFilter({ columnDef, onFilterChanged, forwardedRef }) {
+function LookupFilter({
+  columnDef,
+  onFilterChanged,
+  localization,
+  forwardedRef
+}) {
   const [selectedFilter, setSelectedFilter] = useState(
     columnDef.tableData.filterValue || []
   );
@@ -38,7 +43,7 @@ function LookupFilter({ columnDef, onFilterChanged, forwardedRef }) {
         htmlFor={'select-multiple-checkbox' + columnDef.tableData.id}
         style={{ marginTop: -16 }}
       >
-        {getLocalizedFilterPlaceHolder(columnDef)}
+        {getLocalizedFilterPlaceHolder(columnDef, localization)}
       </InputLabel>
       <Select
         multiple
@@ -54,9 +59,7 @@ function LookupFilter({ columnDef, onFilterChanged, forwardedRef }) {
             onFilterChanged(columnDef.tableData.id, event.target.value);
           }
         }}
-        input={
-          <Input id={'select-multiple-checkbox' + columnDef.tableData.id} />
-        }
+        labelId={'select-multiple-checkbox' + columnDef.tableData.id}
         renderValue={(selectedArr) =>
           selectedArr.map((selected) => columnDef.lookup[selected]).join(', ')
         }