Skip to content

v4.0.0-alpha.4

Pre-release
Pre-release
Compare
Choose a tag to compare
@dmtrKovalenko dmtrKovalenko released this 19 Mar 15:26
· 212 commits to next since this release
v4.0.0-alpha.4
4d04b43

API improvements release

Breaking changes

LocalizationProvider

Rename and changes in API for MuiPickersUtilsProvider. It is renamed to LocalizationProvider. In future this provider may be moved to the @material-ui/core

- <MuiPickersUtilsProvider utils={DateFnsUtils} />
+ <LocalizationProvider dateAdapter={DateFnsUtils}  />

Also, libInstance from now renamed to dateLibInstance which is a more meaningful name in case of reusable LocalizationProvider

- <MuiPickersUtilsProvider utils={MomentUtils} libInstance={moment}  />
+ <LocalizationProvider dateAdapter={MomentUtils} dateLibInstance={moment} />

Forward refs

From now all refs passed directly to any picker component will be automatically forwarded down to input

Props API changes

We did a bunch of props API changes. Hopefully, we will provide a codemod scripts closer to the stable release.

New props

  • toolbarFormat - easily customize date string displaying in toolbar (#1345)
  • disableHighlightToday - disable highlighting of today date with a circle
  • showDaysOutsideCurrentMonth - show days outside of current month in calendar
  • disableMargin - (only Day prop) disable margin between days, useful for range displaying when days are linked together with background color

Remove props

  • labelFunc - completely unusable function with current keyboard input design
  • invalidLabel - pretty same, unusable with keyboard input, use error and helperText instead

Renames

  • format => inputFormat
  • emptyLabel => emptyInputText
  • initialFocusedDate => defaultHighlight
  • title => toolbarTitle (+ make it accept value from label as default)

Change signatures

  • renderDay
(date: DateIOType, selectedDate: DateIOType, dayInCurrentMonth: boolean, defaultDay: React.ReactNode) => React.ReactNode 
(date: DateIOType, selectedDate: DateIOType,  DayComponentProps:  DayProps) => React.ReactNode

Better customization of the day displaying, by allowing to spread down and override any props you need, before it was possible only by React.cloneElement, but it was not so powerful like spreading props down. This also better from performance perspective when overriding days, because we are not rendering day by ourselves if needs to render something different.

  renderDay={(day, selectedDate, DayComponentProps) => {
     return (
        <Badge overlap="circle" badgeContent={isSelected ? '🌚' : undefined}>
          <Day {...DayComponentProps} isToday disableMargin aria-label="Something"  />
        </Badge>
     );
  }}

Features

🕐 Time validation

From now it is possible to validate TimePicker or DateTimePicker with a help of corresponding props:

  • maxTime: TDate (date part by default, will be ignored)
  • minTime: TDate (date part by default, will be ignored)
  • maxDateTime: TDate - Maximal selectable moment of time with binding to date
  • minDateTime: TDate - Minimal selectable moment of time with binding to date
  • shouldDisableTime: (timeValue: number, clockType: "hours" | "minutes" | "seconds") => boolean - Dynamically disable a clock value

image

dateAdapter prop

There is a new prop dateAdapter in each component which allows passing configured date adapter object without context

const memoizedDateAdapter = React.useMemo(() => {
   return new DateFnsAdapter({ locale });
}, [locale]);

<DatePicker
  value={selectedDate}
  onChange={date => handleDateChange(date)}
  dateAdapter={memoizedDateAdapter}
/>;

Better global format customization

Also, new LocalizationProvider now accepts special dateFormats prop that allows globally override formats used for displaying dates

const formats = {
  normalDate: 'd MMM yyy',
  keyboardDate: 'd MMM yyy',
};

<LocalizationProvider
  dateAdapter={DateFnsAdapter}
  locale={frLocale}
  dateFormats={formats}
/>

🐛 Bugfixes and improvements

  • Make set today button works properly with autoOk (#1555)
  • Remove @material-ui/styles dependency
  • Better material-ui core components import strategy (#1590)

Wow you read all these changelog release notes! It's impressive :)
The next release will be smaller, I promise 😈

Assets 2
Loading