or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

adapters-localization.mdcalendar-clock-components.mddate-pickers.mddatetime-pickers.mdfield-components.mdindex.mdtime-pickers.mdvalidation-utilities.md
tile.json

tessl/npm-mui--x-date-pickers

The community edition of the MUI X Date and Time Picker components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/x-date-pickers@8.11.x

To install, run

npx @tessl/cli install tessl/npm-mui--x-date-pickers@8.11.0

index.mddocs/

MUI X Date Pickers

MUI X Date Pickers provides comprehensive React date and time picker components that integrate seamlessly with Material-UI design system. The library offers DatePicker, TimePicker, and DateTimePicker components with support for multiple date libraries including date-fns, Day.js, Luxon, and Moment.js, featuring advanced functionality such as localization support, keyboard navigation, accessibility compliance, and mobile-responsive design.

Package Information

  • Package Name: @mui/x-date-pickers
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mui/x-date-pickers @mui/material @emotion/react @emotion/styled

Core Imports

ESM imports:

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { PickerDay2 } from '@mui/x-date-pickers/PickerDay2';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';

Barrel imports:

import {
  LocalizationProvider,
  DatePicker,
  TimePicker, 
  DateTimePicker,
  AdapterDayjs,
  PickerDay2,
  DayCalendarSkeleton
} from '@mui/x-date-pickers';

Basic Usage

import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs, { Dayjs } from 'dayjs';

function App() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker 
        label="Basic date picker"
        value={value}
        onChange={(newValue) => setValue(newValue)}
      />
    </LocalizationProvider>
  );
}

Architecture

MUI X Date Pickers is built around several key architectural patterns:

  • Adapter System: Pluggable date library adapters (date-fns, dayjs, luxon, moment) for flexible date manipulation
  • Localization Provider: Centralized localization and date adapter configuration
  • Responsive Design: Automatic desktop/mobile optimizations with separate component variants
  • Field Components: Standalone input fields that can be used independently of pickers
  • Slot Architecture: Extensible component customization through MUI's slot system
  • Validation System: Comprehensive date/time validation with custom rule support
  • View System: Modular view components (calendar, clock) that can be composed into different picker types

Capabilities

Date Pickers

Core date selection components with calendar interface, available in responsive variants for desktop, mobile, and always-visible static modes.

function DatePicker<TDate>(props: DatePickerProps<TDate>): JSX.Element;
function DesktopDatePicker<TDate>(props: DesktopDatePickerProps<TDate>): JSX.Element;
function MobileDatePicker<TDate>(props: MobileDatePickerProps<TDate>): JSX.Element;
function StaticDatePicker<TDate>(props: StaticDatePickerProps<TDate>): JSX.Element;

interface DatePickerProps<TDate> {
  value?: TDate | null;
  onChange?: (value: TDate | null, context: PickerChangeContext) => void;
  label?: React.ReactNode;
  disabled?: boolean;
  readOnly?: boolean;
  disableFuture?: boolean;
  disablePast?: boolean;
  minDate?: TDate;
  maxDate?: TDate;
  shouldDisableDate?: (day: TDate) => boolean;
  views?: readonly DateView[];
  openTo?: DateView;
  format?: string;
  slotProps?: DatePickerSlotProps<TDate>;
  slots?: DatePickerSlots<TDate>;
}

type DateView = 'year' | 'month' | 'day';

Date Pickers

Time Pickers

Time selection components with analog clock and digital time interfaces, supporting hours, minutes, and seconds selection with customizable time steps.

function TimePicker<TDate>(props: TimePickerProps<TDate>): JSX.Element;
function DesktopTimePicker<TDate>(props: DesktopTimePickerProps<TDate>): JSX.Element;
function MobileTimePicker<TDate>(props: MobileTimePickerProps<TDate>): JSX.Element;
function StaticTimePicker<TDate>(props: StaticTimePickerProps<TDate>): JSX.Element;

interface TimePickerProps<TDate> {
  value?: TDate | null;
  onChange?: (value: TDate | null, context: PickerChangeContext) => void;
  label?: React.ReactNode;
  disabled?: boolean;
  readOnly?: boolean;
  minTime?: TDate;
  maxTime?: TDate;
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  views?: readonly TimeView[];
  openTo?: TimeView;
  format?: string;
  timeSteps?: TimeStepOptions;
  slotProps?: TimePickerSlotProps<TDate>;
  slots?: TimePickerSlots<TDate>;
}

type TimeView = 'hours' | 'minutes' | 'seconds';

interface TimeStepOptions {
  hours?: number;
  minutes?: number;
  seconds?: number;
}

Time Pickers

Date-Time Pickers

Combined date and time selection with tabbed interface for switching between date and time views, providing comprehensive date-time input functionality.

function DateTimePicker<TDate>(props: DateTimePickerProps<TDate>): JSX.Element;
function DesktopDateTimePicker<TDate>(props: DesktopDateTimePickerProps<TDate>): JSX.Element;
function MobileDateTimePicker<TDate>(props: MobileDateTimePickerProps<TDate>): JSX.Element;
function StaticDateTimePicker<TDate>(props: StaticDateTimePickerProps<TDate>): JSX.Element;

interface DateTimePickerProps<TDate> {
  value?: TDate | null;
  onChange?: (value: TDate | null, context: PickerChangeContext) => void;
  label?: React.ReactNode;
  disabled?: boolean;
  readOnly?: boolean;
  disableFuture?: boolean;
  disablePast?: boolean;
  minDateTime?: TDate;
  maxDateTime?: TDate;
  shouldDisableDate?: (day: TDate) => boolean;
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  views?: readonly DateOrTimeView[];
  openTo?: DateOrTimeView;
  format?: string;
  timeSteps?: TimeStepOptions;
  slotProps?: DateTimePickerSlotProps<TDate>;
  slots?: DateTimePickerSlots<TDate>;
}

type DateOrTimeView = DateView | TimeView;

Date-Time Pickers

Field Components

Standalone input field components for date, time, and date-time values with sectioned editing, keyboard navigation, and validation support.

function DateField<TDate>(props: DateFieldProps<TDate>): JSX.Element;
function TimeField<TDate>(props: TimeFieldProps<TDate>): JSX.Element;
function DateTimeField<TDate>(props: DateTimeFieldProps<TDate>): JSX.Element;

interface DateFieldProps<TDate> {
  value?: TDate | null;
  onChange?: (value: TDate | null, context: FieldChangeContext<TDate>) => void;
  format?: string;
  disabled?: boolean;
  readOnly?: boolean;
  shouldRespectLeadingZeros?: boolean;
  ref?: React.Ref<FieldRef<TDate>>;
}

interface FieldRef<TDate> {
  getSections(): FieldSection[];
  getActiveSectionIndex(): number | null;
  setSelectedSections(selectedSections: FieldSelectedSections): void;
  focusField(newSelectedSection?: number | FieldSectionType): void;
  isFieldFocused(): boolean;
}

Field Components

Calendar and Clock Components

Standalone calendar and clock view components for building custom date/time selection interfaces.

function DateCalendar<TDate>(props: DateCalendarProps<TDate>): JSX.Element;
function MonthCalendar<TDate>(props: MonthCalendarProps<TDate>): JSX.Element;
function YearCalendar<TDate>(props: YearCalendarProps<TDate>): JSX.Element;
function TimeClock<TDate>(props: TimeClockProps<TDate>): JSX.Element;
function DigitalClock<TDate>(props: DigitalClockProps<TDate>): JSX.Element;
function MultiSectionDigitalClock<TDate>(props: MultiSectionDigitalClockProps<TDate>): JSX.Element;

Calendar and Clock Components

Adapters and Localization

Date library adapters and localization provider for configuring date manipulation and internationalization across all picker components.

function LocalizationProvider<TDate>(props: LocalizationProviderProps<TDate>): JSX.Element;

interface LocalizationProviderProps<TDate> {
  dateAdapter: MuiPickersAdapter<TDate>;
  adapterLocale?: any;
  children: React.ReactNode;
  localeText?: Partial<PickersLocaleText<TDate>>;
}

// Date Library Adapters
class AdapterDateFns implements MuiPickersAdapter<Date>;
class AdapterDayjs implements MuiPickersAdapter<dayjs.Dayjs>;
class AdapterLuxon implements MuiPickersAdapter<luxon.DateTime>;
class AdapterMoment implements MuiPickersAdapter<moment.Moment>;

Adapters and Localization

Validation and Utilities

Validation functions, utility hooks, and helper components for enhanced picker functionality and custom implementations.

function validateDate<TDate>(props: ValidateDateProps<TDate>): string | null;
function validateTime<TDate>(props: ValidateTimeProps<TDate>): string | null;
function validateDateTime<TDate>(props: ValidateDateTimeProps<TDate>): string | null;

function usePickerTranslations(): PickersTranslations;
function usePickerAdapter<TDate>(): MuiPickersAdapter<TDate>;
function useIsValidValue(props: UseIsValidValueProps): boolean;

Validation and Utilities

Types

Core Picker Types

interface PickerChangeContext {
  validationError: string | null;
}

interface FieldChangeContext<TDate> {
  validationError: string | null;
}

type PickerValueType = 'date' | 'time' | 'date-time';

interface PickerOwnerState {
  open: boolean;
  disabled: boolean;
  readOnly: boolean;
}

Field Section Types

type FieldSectionType = 'year' | 'month' | 'day' | 'weekDay' | 'hours' | 'minutes' | 'seconds' | 'meridiem' | 'empty';
type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
type FieldSelectedSections = number | FieldSectionType | null | 'all';

interface FieldSection {
  value: string;
  format: string;
  maxLength: number | null;
  placeholder: string;
  type: FieldSectionType;
  contentType: FieldSectionContentType;
  hasLeadingZerosInFormat: boolean;
  hasLeadingZerosInInput: boolean;
  modified: boolean;
  startSeparator: string;
  endSeparator: string;
  isEndFormatSeparator?: boolean;
}

Validation Types

interface ValidateDateProps<TDate> {
  value: TDate | null;
  minDate?: TDate;
  maxDate?: TDate;
  disableFuture?: boolean;
  disablePast?: boolean;
  shouldDisableDate?: (day: TDate) => boolean;
  adapter: MuiPickersAdapter<TDate>;
  timezone: PickersTimezone;
}

interface ValidateTimeProps<TDate> {
  value: TDate | null;
  minTime?: TDate;
  maxTime?: TDate;
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  adapter: MuiPickersAdapter<TDate>;
  timezone: PickersTimezone;
}

interface ValidateDateTimeProps<TDate> extends ValidateDateProps<TDate>, ValidateTimeProps<TDate> {
  minDateTime?: TDate;
  maxDateTime?: TDate;
}

Constants

const DEFAULT_DESKTOP_MODE_MEDIA_QUERY: string;