Date & Time pickers, built with ❤️ for @material-ui/core
This is a quick release to make it easier to use the component with the latest version of React. Note that active development has moved to v5 inside the main repository. You can find the new documentation.
It is the last release of @material-ui/pickers
from the https://github.com/mui-org/material-ui-pickers. Starting from this point, we will work on migrating pickers to https://github.com/mui-org/material-ui repo ?
renderDay
and for side components.<CalendarView<Dayjs>
date={dayjs()}
{...props}
/>
unknown
(by making all components generic)null
was passed to the month selection viewBig thanks to the 9 contributors who made this release possible.
@material-ui/[email protected]
inputRef
date picker customization demo (#2028) @Chee7ahautoOk
prop (#2020) @dandv@material-ui/core
We are changed all of our internal components to use:
MuiPickers
from nowroot
which points to the root.Mui-disabled
) to improve the overriding experienceMuiPickersDay: {
&$disabled:{
// provide any disabled styles
}
}
In order to get rid of unexpected falling back to the unmasked input and warnings – we must avoid usage of localized time format (e.g. "p") and use predefined formats. We do have support for it via date-io and simply use hh:mm
for 24h clock and hh:mm
a for 12h.
reduceAnimations
provided (#1994)<Popover />
to <Popper />
for desktop components.We migrated our components to the core Popper + TrapFocus. Related to this all the components will not block scroll from now and also PopoverProps
was removed in favor of PopperProps
.
We got rid of dynamically attaching @date-io/type
module declaration for the adapter's date engine type. From now on pickers will automatically infer the type of value
or onChange
props. But it is also possible to force using pickers with generic JSX components notation.
<DatePicker<Date>
// You can pass any value right here that can be parsed
value={null}
onChange={newValue => newValue?.getDate()}
/>
onChange
when each view is filled (when the next view needs to open). This allows the developer to understand which value is already filled and also improves UX with. Cancel
button – if cancel clicked already filled part will be saved. (closes #1909)autoOk
prop was removed and now picker will automatically close after selection for Desktop mode. It is possible to control this behavior with the new disableCloseOnSelectProp
(closes #1651)shouldDisableDate
on year selection view for each year. (#1954)renderDay
prop (#1953)This release is a part of our ongoing breaking changes list implementation. We are working on making v4
stable before beta. And mostly all of out breaking changes are already done ?. Hopefully the next v4-alpha.9 will be the last alpha
release
Documentation: https://v4-0-0-alpha-8.material-ui-pickers.dev/
value={null}
passed picker will not render any selected date (instead of highlighting today)ok{Label}
to ok{Text}
(okLabel => okText)onMonthChange
promise-based API in favor of loading
prop (#1829)renderInput
spreading experience for custom inputs (#1760)Hotfix for v4.0.0-alpha.6
renderInput
APIOur new API to render the text field input, that solves a lot of problems! Like spreading props down to text field, override them, override classes for the picker – and saves a lot of bundlesize for people who use custom text fields.
renderInput
prop is required for any picker. For the compatibility (no user-facing changes) it will be<DatePicker
+ renderInput={props => <TextField {...props} />}
/>
For DateRangePicker
it includes 2 arguments (startProps
and endProps
respectively)
<DateRangePicker
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} />
</>
)}
/>
onError
callback to return a reason why the error must be displayed. We are not displaying English error messages by default anymore.
If the input is invalid picker will only show red-colored TextField
. So from now form validation with sharing internal pickers logic will look like this (reason
is well-typed string union). More info in this guide
minDateMessage
maxDateMessage
invalidDateMessage
strictCompareDates
emptyText
– it has been adding more confusing than what it's worthmaskChar
– because it is not visible for your users anymore and needs only to generate and parse mask pattern.keyboardIcon
=> openPickerIcon
KeyboardButtonProps
=> OpenPickerButtonProps
onError
prop. Checkout new form integration guideline
DateRangeDelimiter
component that can be used for renderInput
of DateRangePicker
media (pointer: fine)
(#1653)shouldDisableYear
prop in order to dynamically disable years (#1743)We have changed the logic of the input mask to be more accessible and less noisy:
inputFormat
changed @vdyachenkoThis release finally introducing <DateRangePicker />
component.
Check out the live demo at https://next.material-ui-pickers.dev/demo/daterangepicker
<DateRangePicker />
componentchildren
supplied to LocalizationProvider
"<ThemeProvider />
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} />
From now all ref
s passed directly to any picker component will be automatically forwarded down to input
We did a bunch of props API changes. Hopefully, we will provide a codemod scripts closer to the stable release.
toolbarFormat
- easily customize date string displaying in toolbar (#1345)disableHighlightToday
- disable highlighting of today date with a circleshowDaysOutsideCurrentMonth
- show days outside of current month in calendardisableMargin
- (only Day
prop) disable margin between days, useful for range displaying when days are linked together with background colorlabelFunc
- completely unusable function with current keyboard input designinvalidLabel
- pretty same, unusable with keyboard input, use error
and helperText
insteadformat
=> inputFormat
emptyLabel
=> emptyInputText
initialFocusedDate
=> defaultHighlight
title
=> toolbarTitle
(+ make it accept value from label
as default)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>
);
}}
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 dateminDateTime: TDate
- Minimal selectable moment of time with binding to dateshouldDisableTime: (timeValue: number, clockType: "hours" | "minutes" | "seconds") => boolean
- Dynamically disable a clock valueThere 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}
/>;
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}
/>
Wow you read all these changelog release notes! It's impressive :) The next release will be smaller, I promise ?