16.1.2
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}

    />

  );

};

DateRangePicker

Props

PropTypeDefaultDescription
isDateRangebooleanIf true, enables date range picker functionality.
calendarsnumber1Number of calendars to display in the date range picker.
readOnlyDateRangebooleanIf true, makes the date range picker read-only, preventing user interaction.
startDateParsableDateStart date for date range picker.
endDateParsableDateEnd date for date range picker.
onStartDateChange(date: DateIOType) => voidCallback fired when start date changes.
onEndDateChange(date: DateIOType) => voidCallback fired when end date changes.
disableDateRangebooleanIf true, disables the date range picker functionality.
minDateParsableDateMinimum selectable date for date range picker.
maxDateParsableDateMaximum selectable date for date range picker.
() => {

  const [startDate, onStartDateChange] = React.useState();

  const [endDate, onEndDateChange] = React.useState();

  return (

    <DatePicker

      isDateRange

      dateAdapter={MomentAdapter}

      startDate={startDate}

      endDate={endDate}

      onStartDateChange={onStartDateChange}

      onEndDateChange={onEndDateChange}

    />

  );

};

Select Date range in between min and max dates

() => {

  const [startDate, onStartDateChange] = React.useState();

  const [endDate, onEndDateChange] = React.useState();

  return (

    <DatePicker

      isDateRange

      dateAdapter={MomentAdapter}

      startDate={startDate}

      endDate={endDate}

      onStartDateChange={onStartDateChange}

      onEndDateChange={onEndDateChange}

      minDate={DateTime.now().toJSDate()}

      maxDate={DateTime.now().plus({ days: 20 }).toJSDate()}

    />

  );

};

Disabled DateRangePicker

() => {

  const [startDate, onStartDateChange] = React.useState(DateTime.now());

  const [endDate, onEndDateChange] = React.useState(DateTime.now());

  return (

    <DatePicker

      isDateRange

      disableDateRange

      dateAdapter={MomentAdapter}

      startDate={startDate}

      endDate={endDate}

      onStartDateChange={onStartDateChange}

      onEndDateChange={onEndDateChange}

    />

  );

};

Read only DateRangePicker

() => {

  const [startDate, onStartDateChange] = React.useState(DateTime.now());

  const [endDate, onEndDateChange] = React.useState(DateTime.now());

  return (

    <DatePicker

      isDateRange

      readOnlyDateRange

      dateAdapter={MomentAdapter}

      startDate={startDate}

      endDate={endDate}

      onStartDateChange={onStartDateChange}

      onEndDateChange={onEndDateChange}

    />

  );

};