javascriptreactjsmaterial-ui

My question is about material-ui 4, material-ui/pickers compaining of inexistent "mask" property

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.

DatePicker components now complain of inexistent "mask" property which used to work fine on mui3.

Migration guide nothing mentions about Pickers. So I wonder. For now I rolled back to using mui 3.9 and material-ui-pickers 2.2.1.

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}
    />
  );

Expected behaviour is DatePicker should work as in mui v3 since nothing is mentioned on the migration guide.

Actual is the mask property no longer exists for the component.

Solution

  • 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.