5.1.4
Powered by Modulz

DatePicker

Material-UI pickers relies on the date management library when the date should be parsed. Any other prop-types that accepts dates (e.g. minDate, maxDate) it can take string, number, Date object and so on.

() => {

  const [selectedDate, setSelectedDate] = React.useState(DateTime.now());

  return (

    <DatePicker

      label="Date"

      dateAdapter={LuxonAdapter}

      value={selectedDate}

      onChange={setSelectedDate}

    />

  );

};

Props

PropTypeDefaultDescription
onChange(date: DateIOType) => voidonChange callback.
valueParsableDatePicker value.
allowKeyboardControlbooleantrueEnables keyboard listener for moving between days in calendar.
animateYearScrollingbooleanfalseTo animate scrolling to current year (using scrollIntoView).
autoOkbooleanfalseAuto accept date on selection.
disableFuturebooleanfalseDisable future dates.
disableFocusRippleboolfalseIf true, the keyboard focus ripple will be disabled.
disablePastbooleanfalseDisable past dates.
disableToolbarbooleanfalseHide toolbar and show only date/time views.
emptyLabelstringMessage displaying in text field, if null passed (doesn't work in keyboard mode).
fullWidthboolfalseIf true, the button will take up the full width of its container.
formatstringFormat string
initialFocusedDateParsableDateDate that will be initially highlighted if null was passed
inputVariant'standard' | 'outlined' | 'filled''Pass material-ui text field variant down, bypass internal variant prop.
invalidDateMessageReactNodeInvalid Date FormatMessage, appearing when date cannot be parsed
invalidLabelstring'unknown'Message displaying in text field if date is invalid (doesn't work in keyboard mode).
labelFunc(date: DateIOType, invalidLabel: string) => stringDynamic formatter of text field value.
leftArrowButtonPropsPartial<IconButtonProps>Props to pass to left arrow button.
leftArrowIconReactNodeLeft arrow icon.
loadingIndicatorElementCustom loading indicator.
localestring | object'en-US'Locale for the date library you are using
maxDateParsableDateDate(2100-01-01)Max selectable date.
maxDateMessageReactNode'Date should not be after maximal date'Error message, shown if date is more then maximal date.
minDateParsableDate'Date(1900-01-01)'Min selectable date.
minDateMessageReactNode'Date should not be before minimal date'Error message, shown if date is less then minimal date.
onAccept(date: DateIOType) => voidCallback fired when date is accepted.
onClose() => voidOn close callback.
onError(error: ReactNode, value: DateIOType) => voidCallback fired when new error should be displayed (!! This is a side effect. Be careful if you want to rerender the component).
onMonthChange(date: DateIOType) => void | Promise<void>Callback firing on month change. Return promise to render spinner till it will not be resolved.
onOpen() => voidOn open callback.
onYearChange(date: DateIOType) => voidCallback firing on year change.
openbooleanControlled picker open state.
openTo'date' | 'year' | 'month'The default visible view. Used when the component view is not controlled. Must be a valid option from `views`. This prop will only work if the `views` prop is also provided, as `openTo` needs to correspond to one of the available views defined in `views`.
orientation'portrait' | 'landscape'portraitForce rendering in particular orientation.
PopoverPropsPartial<PopoverProps>Popover props passed to material-ui Popover (with variant='inline').
readOnlybooleanMake picker read only.
renderDay(day: DateIOType, selectedDate: DateIOType, dayInCurrentMonth: boolean, dayComponent: Element) => ElementCustom renderer for day.
rightArrowButtonPropsPartial<IconButtonProps>Props to pass to right arrow button.
rightArrowIconReactNodeRight arrow icon.
shouldDisableDate(day: DateIOType) => booleanDisable specific date.
strictCompareDatesbooleanfalseCompare dates by the exact timestamp, instead of start/end of date.
TextFieldComponentComponentClass<TextFieldProps, any> | FunctionComponent<TextFieldProps>Override input component.
ToolbarComponentComponentClass<ToolbarComponentProps, any> | FunctionComponent<ToolbarComponentProps>Component that will replace default toolbar renderer.
viewsArray<'year' | 'date' | 'month'>Array of views to show.

Props

PropTypeDefaultDescription
cancelLabelReactNodeCancel'CANCEL' label message.
clearablebooleanShow clear action in picker dialog.
clearLabelReactNode'Clear'"CLEAR" label message.
DialogPropsPartial<MuiDialogProps>Props to be passed directly to material-ui Dialog.
okLabelReactNodeOK'OK' label message
showTodayButtonbooleanfalseIf true today button will be displayed Note* that clear button has higher priority.
todayLabelReactNodeToday'TODAY' label message.

Examples

DatePicker with props (openTo,disableToolbar)

() => {

  const [selectedDate, setSelectedDate] = React.useState(DateTime.now());

  return (

    <DatePicker

      label="Date"

      dateAdapter={LuxonAdapter}

      value={selectedDate}

      onChange={setSelectedDate}

      openTo="year"

      views={['year', 'month', 'day']}

      disableToolbar

    />

  );

};

DatePicker using a different locale

() => {

  const [selectedDate, setSelectedDate] = React.useState(DateTime.now());

  return (

    <DatePicker

      label="Date"

      locale="fr-FR"

      dateAdapter={LuxonAdapter}

      value={selectedDate}

      onChange={setSelectedDate}

    />

  );

};