"我的问题是关于 material-ui 4，material-ui\/pickers compaiing 的不存在的“mask”属性"

Question

Upgraded a reactjs project using Material-UI (mui) from v3 to v4 and following the recommended migration guide. As part of that replaced material-ui-pickers 2.2.1 to @material-ui\/pickers.

import { DatePicker, DateTimePicker } from '@material-ui/pickers';

// later on...

return (
    <DatePicker
      name={name}
      value={value}
      clearable
      autoOk
      onChange={handleChange}
      format="DD/MM/YYYY"
      placeholder="___/___/______"
      mask={masked(value)}         // <=== The mask property
      {...other}
    />
  );

Answer 1

The And now no more need in mask prop section in the Upgrading to v3 page says:

Mask will be generated and applied automatically from the format passed.

And if you look at the DatePicker API you'll find that there is no mask property, so you must use the format property instead or you can use KeyboardDatePicker which has a mask property that can be used to override generate from format.

Answer 2

In case of a custom date format , you should update also the mask to match the same date format.

Example:

 <MuiDateTimePicker
   inputFormat="DD/MM/yyyy HH:mm:ss"
   mask={"__/__/____ __:__:__"}   
   />

Answer 3

for those who just dont want to use the mask, to remove the warnings (caused a performance issue in my case), just pass an empty string mask="", and use the 'locale' prop in LocalizationProvider to set the lang-standard mask.

<LocalizationProvider dateAdapter={AdapterDateFns} locale={"en"}>
  <DateTimePicker
    mask=""
    renderInput={(props) => {return (<TextField {...props} />)}}
    label="date-time"
    value={this.state.date}
    onChange={(newValue) => {
      this.setDateTime(newValue);
    }}
  />
</LocalizationProvider>