CtrlK
BlogDocsLog inGet started
Tessl Logo

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

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

calendar-clock-components.mddocs/

Calendar and Clock Components

Standalone calendar and clock view components for building custom date/time selection interfaces with full customization support.

Capabilities

DateCalendar

Standalone calendar component for date selection with month navigation and day selection.

/**
 * Standalone calendar component for date selection
 * @param props - DateCalendar configuration properties
 * @returns JSX element for date calendar
 */
function DateCalendar<TDate>(props: DateCalendarProps<TDate>): JSX.Element;

interface DateCalendarProps<TDate> {
  /** Current selected date */
  value?: TDate | null;
  /** Default selected date for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when date changes */
  onChange?: (value: TDate | null) => void;
  /** Available views for the calendar */
  views?: readonly DateView[];
  /** Currently displayed view */
  view?: DateView;
  /** Callback when view changes */
  onViewChange?: (view: DateView) => void;
  /** If true, disable dates after today */
  disableFuture?: boolean;
  /** If true, disable dates before today */
  disablePast?: boolean;
  /** Minimum selectable date */
  minDate?: TDate;
  /** Maximum selectable date */
  maxDate?: TDate;
  /** Function to disable specific dates */
  shouldDisableDate?: (day: TDate) => boolean;
  /** Default calendar month when no value is set */
  defaultCalendarMonth?: TDate;
  /** If true, show days outside current month */
  showDaysOutsideCurrentMonth?: boolean;
  /** Loading state indicator */
  loading?: boolean;
  /** Custom render loading component */
  renderLoading?: () => React.ReactNode;
  /** Custom day rendering function */
  renderDay?: (day: TDate, selectedDays: TDate[], pickersDayProps: PickersDayProps<TDate>) => JSX.Element;
  /** Component slots for customization */
  slots?: DateCalendarSlots<TDate>;
  /** Props passed to calendar slots */
  slotProps?: DateCalendarSlotProps<TDate>;
  /** If true, calendar is read-only */
  readOnly?: boolean;
  /** If true, calendar is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface DateCalendarSlots<TDate> {
  switchViewButton?: React.ElementType;
  switchViewIcon?: React.ElementType;
  previousIconButton?: React.ElementType;
  nextIconButton?: React.ElementType;
  leftArrowIcon?: React.ElementType;
  rightArrowIcon?: React.ElementType;
  calendarHeader?: React.ElementType;
  day?: React.ElementType;
}

interface DateCalendarSlotProps<TDate> {
  switchViewButton?: IconButtonProps;
  switchViewIcon?: SvgIconProps;
  previousIconButton?: IconButtonProps;
  nextIconButton?: IconButtonProps;
  leftArrowIcon?: SvgIconProps;
  rightArrowIcon?: SvgIconProps;
  calendarHeader?: PickersCalendarHeaderSlotProps<TDate>;
  day?: PickersDayProps<TDate>;
}

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

MonthCalendar

Calendar component for month selection with year navigation.

/**
 * Calendar component for month selection
 * @param props - MonthCalendar configuration properties
 * @returns JSX element for month calendar
 */
function MonthCalendar<TDate>(props: MonthCalendarProps<TDate>): JSX.Element;

interface MonthCalendarProps<TDate> {
  /** Current selected date */
  value?: TDate | null;
  /** Default selected date for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when month changes */
  onChange?: (value: TDate | null) => void;
  /** If true, disable months after current month */
  disableFuture?: boolean;
  /** If true, disable months before current month */
  disablePast?: boolean;
  /** Minimum selectable date */
  minDate?: TDate;
  /** Maximum selectable date */
  maxDate?: TDate;
  /** Function to disable specific months */
  shouldDisableMonth?: (month: TDate) => boolean;
  /** Component slots for customization */
  slots?: MonthCalendarSlots<TDate>;
  /** Props passed to month calendar slots */
  slotProps?: MonthCalendarSlotProps<TDate>;
  /** If true, calendar is read-only */
  readOnly?: boolean;
  /** If true, calendar is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface MonthCalendarSlots<TDate> {
  monthButton?: React.ElementType;
}

interface MonthCalendarSlotProps<TDate> {
  monthButton?: ButtonProps;
}

YearCalendar

Calendar component for year selection with decade navigation.

/**
 * Calendar component for year selection
 * @param props - YearCalendar configuration properties
 * @returns JSX element for year calendar
 */
function YearCalendar<TDate>(props: YearCalendarProps<TDate>): JSX.Element;

interface YearCalendarProps<TDate> {
  /** Current selected date */
  value?: TDate | null;
  /** Default selected date for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when year changes */
  onChange?: (value: TDate | null) => void;
  /** If true, disable years after current year */
  disableFuture?: boolean;
  /** If true, disable years before current year */
  disablePast?: boolean;
  /** Minimum selectable date */
  minDate?: TDate;
  /** Maximum selectable date */
  maxDate?: TDate;
  /** Function to disable specific years */
  shouldDisableYear?: (year: TDate) => boolean;
  /** Callback when year focus changes */
  onYearFocus?: (year: number) => void;
  /** Component slots for customization */
  slots?: YearCalendarSlots<TDate>;
  /** Props passed to year calendar slots */
  slotProps?: YearCalendarSlotProps<TDate>;
  /** If true, calendar is read-only */
  readOnly?: boolean;
  /** If true, calendar is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface YearCalendarSlots<TDate> {
  yearButton?: React.ElementType;
}

interface YearCalendarSlotProps<TDate> {
  yearButton?: ButtonProps;
}

TimeClock

Analog clock component for time selection with hour and minute hands.

/**
 * Analog clock component for time selection
 * @param props - TimeClock configuration properties
 * @returns JSX element for time clock
 */
function TimeClock<TDate>(props: TimeClockProps<TDate>): JSX.Element;

interface TimeClockProps<TDate> {
  /** Current selected time */
  value?: TDate | null;
  /** Default selected time for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when time changes */
  onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void;
  /** Available views for the clock */
  views?: readonly TimeView[];
  /** Currently displayed view */
  view?: TimeView;
  /** Callback when view changes */
  onViewChange?: (view: TimeView) => void;
  /** Minimum selectable time */
  minTime?: TDate;
  /** Maximum selectable time */
  maxTime?: TDate;
  /** Function to disable specific times */
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  /** If true, use 12-hour format with AM/PM */
  ampm?: boolean;
  /** Time step options for different views */
  timeSteps?: TimeStepOptions;
  /** Component slots for customization */
  slots?: TimeClockSlots<TDate>;
  /** Props passed to clock slots */
  slotProps?: TimeClockSlotProps<TDate>;
  /** If true, clock is read-only */
  readOnly?: boolean;
  /** If true, clock is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface TimeClockSlots<TDate> {
  clockPointer?: React.ElementType;
  clockNumber?: React.ElementType;
}

interface TimeClockSlotProps<TDate> {
  clockPointer?: ClockPointerProps;
  clockNumber?: ClockNumberProps;
}

type TimeView = 'hours' | 'minutes' | 'seconds';
type PickerSelectionState = 'partial' | 'shallow' | 'finish';

DigitalClock

Digital clock component with scrollable time list selection.

/**
 * Digital clock component with scrollable time selection
 * @param props - DigitalClock configuration properties
 * @returns JSX element for digital clock
 */
function DigitalClock<TDate>(props: DigitalClockProps<TDate>): JSX.Element;

interface DigitalClockProps<TDate> {
  /** Current selected time */
  value?: TDate | null;
  /** Default selected time for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when time changes */
  onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void;
  /** Available views for the clock */
  views?: readonly TimeView[];
  /** Minimum selectable time */
  minTime?: TDate;
  /** Maximum selectable time */
  maxTime?: TDate;
  /** Function to disable specific times */
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  /** If true, use 12-hour format with AM/PM */
  ampm?: boolean;
  /** Time step in minutes */
  timeStep?: number;
  /** Component slots for customization */
  slots?: DigitalClockSlots<TDate>;
  /** Props passed to digital clock slots */
  slotProps?: DigitalClockSlotProps<TDate>;
  /** If true, clock is read-only */
  readOnly?: boolean;
  /** If true, clock is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface DigitalClockSlots<TDate> {
  digitalClockItem?: React.ElementType;
}

interface DigitalClockSlotProps<TDate> {
  digitalClockItem?: DigitalClockItemProps;
}

MultiSectionDigitalClock

Multi-section digital clock with separate columns for hours, minutes, and seconds.

/**
 * Multi-section digital clock with separate time columns
 * @param props - MultiSectionDigitalClock configuration properties
 * @returns JSX element for multi-section digital clock
 */
function MultiSectionDigitalClock<TDate>(props: MultiSectionDigitalClockProps<TDate>): JSX.Element;

interface MultiSectionDigitalClockProps<TDate> {
  /** Current selected time */
  value?: TDate | null;
  /** Default selected time for uncontrolled component */
  defaultValue?: TDate | null;
  /** Callback fired when time changes */
  onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void;
  /** Available views for the clock */
  views?: readonly TimeView[];
  /** Minimum selectable time */
  minTime?: TDate;
  /** Maximum selectable time */
  maxTime?: TDate;
  /** Function to disable specific times */
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  /** If true, use 12-hour format with AM/PM */
  ampm?: boolean;
  /** Time step options for different views */
  timeSteps?: TimeStepOptions;
  /** Component slots for customization */
  slots?: MultiSectionDigitalClockSlots<TDate>;
  /** Props passed to multi-section clock slots */
  slotProps?: MultiSectionDigitalClockSlotProps<TDate>;
  /** If true, clock is read-only */
  readOnly?: boolean;
  /** If true, clock is disabled */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

interface MultiSectionDigitalClockSlots<TDate> {
  digitalClockSectionItem?: React.ElementType;
}

interface MultiSectionDigitalClockSlotProps<TDate> {
  digitalClockSectionItem?: MultiSectionDigitalClockSectionProps;
}

DayCalendarSkeleton

Skeleton loading component for calendar views with customizable day structure.

/**
 * Skeleton loading component for calendar views
 * @param props - DayCalendarSkeleton configuration properties
 * @returns JSX element for calendar skeleton
 */
function DayCalendarSkeleton(props: DayCalendarSkeletonProps): JSX.Element;

interface DayCalendarSkeletonProps {
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

Usage Examples:

import {
  DateCalendar,
  MonthCalendar,
  YearCalendar,
  TimeClock,
  DigitalClock,
  MultiSectionDigitalClock
} from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs, { Dayjs } from 'dayjs';

// Custom date selection dashboard
function DateSelectionDashboard() {
  const [selectedDate, setSelectedDate] = React.useState<Dayjs | null>(dayjs());
  const [selectedTime, setSelectedTime] = React.useState<Dayjs | null>(dayjs());
  const [view, setView] = React.useState<DateView>('day');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div style={{ display: 'flex', gap: 16 }}>
        {/* Date Selection */}
        <DateCalendar
          value={selectedDate}
          onChange={(newValue) => setSelectedDate(newValue)}
          view={view}
          onViewChange={(newView) => setView(newView)}
          views={['year', 'month', 'day']}
        />
        
        {/* Time Selection */}
        <TimeClock
          value={selectedTime}
          onChange={(newValue) => setSelectedTime(newValue)}
          views={['hours', 'minutes']}
          ampm={false}
        />
      </div>
    </LocalizationProvider>
  );
}

// Custom appointment scheduler
function AppointmentScheduler() {
  const [appointmentTime, setAppointmentTime] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MultiSectionDigitalClock
        value={appointmentTime}
        onChange={(newValue) => setAppointmentTime(newValue)}
        views={['hours', 'minutes']}
        timeSteps={{ hours: 1, minutes: 15 }}
        minTime={dayjs().hour(9).minute(0)}
        maxTime={dayjs().hour(17).minute(0)}
        ampm={false}
      />
    </LocalizationProvider>
  );
}

PickerDay2

Alternative day component with enhanced visual selection state support.

/**
 * Alternative day component with enhanced selection visual states
 * @param props - PickerDay2 configuration properties
 * @returns JSX element for enhanced day component
 */
function PickerDay2<TDate>(props: PickerDay2Props<TDate>): JSX.Element;

interface PickerDay2Props<TDate> extends Omit<PickersDayProps<TDate>, 'classes'> {
  /** Override or extend the styles applied to the component */
  classes?: Partial<PickerDay2Classes>;
  /** Indicates if the day should be visually selected */
  isVisuallySelected?: boolean;
}

interface PickerDay2OwnerState<TDate> extends PickerDayOwnerState<TDate> {
  /** Whether the day is a filler day (its content is hidden) */
  isDayFillerCell: boolean;
}

DayCalendarSkeleton

Loading skeleton component for day calendar while loading state.

/**
 * Loading skeleton component for day calendar
 * @param props - DayCalendarSkeleton configuration properties
 * @returns JSX element for calendar loading skeleton
 */
function DayCalendarSkeleton(props: DayCalendarSkeletonProps): JSX.Element;

interface DayCalendarSkeletonProps extends React.JSX.IntrinsicElements['div'] {
  /** Override or extend the styles applied to the component */
  classes?: Partial<DayCalendarSkeletonClasses>;
  /** The system prop that allows defining system overrides as well as additional CSS styles */
  sx?: SxProps<Theme>;
  /** Ref to the root element */
  ref?: React.Ref<HTMLDivElement>;
}

CSS Classes

DateCalendar Classes

const dateCalendarClasses: {
  root: string;
  viewTransitionContainer: string;
};

function getDateCalendarUtilityClass(slot: string): string;

type DateCalendarClassKey = keyof typeof dateCalendarClasses;
interface DateCalendarClasses extends Record<DateCalendarClassKey, string> {}

MonthCalendar Classes

const monthCalendarClasses: {
  root: string;
};

type MonthCalendarClassKey = keyof typeof monthCalendarClasses;
interface MonthCalendarClasses extends Record<MonthCalendarClassKey, string> {}

YearCalendar Classes

const yearCalendarClasses: {
  root: string;
};

type YearCalendarClassKey = keyof typeof yearCalendarClasses;
interface YearCalendarClasses extends Record<YearCalendarClassKey, string> {}

TimeClock Classes

const timeClockClasses: {
  root: string;
  clock: string;
  wrapper: string;
  squareMask: string;
  pin: string;
  ampmSwitcher: string;
  meridiemText: string;
};

type TimeClockClassKey = keyof typeof timeClockClasses;
interface TimeClockClasses extends Record<TimeClockClassKey, string> {}

DigitalClock Classes

const digitalClockClasses: {
  root: string;
  list: string;
  item: string;
};

type DigitalClockClassKey = keyof typeof digitalClockClasses;
interface DigitalClockClasses extends Record<DigitalClockClassKey, string> {}

MultiSectionDigitalClock Classes

const multiSectionDigitalClockClasses: {
  root: string;
};

const multiSectionDigitalClockSectionClasses: {
  root: string;
  item: string;
};

type MultiSectionDigitalClockClassKey = keyof typeof multiSectionDigitalClockClasses;
interface MultiSectionDigitalClockClasses extends Record<MultiSectionDigitalClockClassKey, string> {}

type MultiSectionDigitalClockSectionClassKey = keyof typeof multiSectionDigitalClockSectionClasses;
interface MultiSectionDigitalClockSectionClasses extends Record<MultiSectionDigitalClockSectionClassKey, string> {}

PickerDay2 Classes

const pickerDay2Classes: {
  root: string;
  dayWithMargin: string;
  dayOutsideMonth: string;
  hiddenDaySpacingFiller: string;
  today: string;
  selected: string;
  disabled: string;
};

function getPickerDay2UtilityClass(slot: string): string;

type PickerDay2ClassKey = keyof typeof pickerDay2Classes;
interface PickerDay2Classes extends Record<PickerDay2ClassKey, string> {}

DayCalendarSkeleton Classes

const dayCalendarSkeletonClasses: {
  root: string;
  week: string;
  daySkeleton: string;
};

type DayCalendarSkeletonClassKey = keyof typeof dayCalendarSkeletonClasses;
interface DayCalendarSkeletonClasses extends Record<DayCalendarSkeletonClassKey, string> {}

Shared Types

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

interface PickersDayProps<TDate> {
  day: TDate;
  selected?: boolean;
  disabled?: boolean;
  today?: boolean;
  outsideCurrentMonth?: boolean;
  showDaysOutsideCurrentMonth?: boolean;
  onClick?: (day: TDate) => void;
  onFocus?: (day: TDate) => void;
}

docs

adapters-localization.md

calendar-clock-components.md

date-pickers.md

datetime-pickers.md

field-components.md

index.md

time-pickers.md

validation-utilities.md

tile.json