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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Date Pickers

Name: tessl/npm-mui--x-date-pickers
Author: tessl

Date picker components provide calendar-based date selection with multiple responsive variants and extensive customization options.

Capabilities

DatePicker

Main responsive date picker component that automatically adapts between desktop and mobile interfaces based on screen size.

/**
 * Main responsive date picker component
 * @param props - DatePicker configuration properties
 * @returns JSX element for date picker
 */
function DatePicker<TDate>(props: DatePickerProps<TDate>): JSX.Element;

interface DatePickerProps<TDate> {
  /** Current date value */
  value?: TDate | null;
  /** Callback fired when date changes */
  onChange?: (value: TDate | null, context: PickerChangeContext) => void;
  /** Input label text */
  label?: React.ReactNode;
  /** If true, the picker is disabled */
  disabled?: boolean;
  /** If true, the picker is read-only */
  readOnly?: boolean;
  /** 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;
  /** Available views for the picker */
  views?: readonly DateView[];
  /** View to show when picker opens */
  openTo?: DateView;
  /** Format string for date display */
  format?: string;
  /** Props passed to picker slots */
  slotProps?: DatePickerSlotProps<TDate>;
  /** Component slots for customization */
  slots?: DatePickerSlots<TDate>;
  /** 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;
}

interface DatePickerSlots<TDate> {
  field?: React.ElementType;
  textField?: React.ElementType;
  openPickerIcon?: React.ElementType;
  switchViewButton?: React.ElementType;
  switchViewIcon?: React.ElementType;
  previousIconButton?: React.ElementType;
  nextIconButton?: React.ElementType;
  leftArrowIcon?: React.ElementType;
  rightArrowIcon?: React.ElementType;
  calendarHeader?: React.ElementType;
  day?: React.ElementType;
  toolbar?: React.ElementType;
  actionBar?: React.ElementType;
  shortcuts?: React.ElementType;
  layout?: React.ElementType;
}

interface DatePickerSlotProps<TDate> {
  field?: PickerFieldSlotProps<TDate>;
  textField?: BuiltInFieldTextFieldProps;
  openPickerIcon?: IconButtonProps;
  switchViewButton?: IconButtonProps;
  switchViewIcon?: SvgIconProps;
  previousIconButton?: IconButtonProps;
  nextIconButton?: IconButtonProps;
  leftArrowIcon?: SvgIconProps;
  rightArrowIcon?: SvgIconProps;
  calendarHeader?: PickersCalendarHeaderSlotProps<TDate>;
  day?: PickersDayProps<TDate>;
  toolbar?: DatePickerToolbarProps<TDate>;
  actionBar?: PickersActionBarProps;
  shortcuts?: PickersShortcutsProps<TDate>;
  layout?: PickersLayoutSlotProps<TDate>;
}

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

Usage Examples:

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

// Basic date picker
function BasicDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Select date"
        value={value}
        onChange={(newValue) => setValue(newValue)}
      />
    </LocalizationProvider>
  );
}

// Date picker with validation
function ValidatedDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Future dates only"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        disablePast
        minDate={dayjs()}
        maxDate={dayjs().add(1, 'year')}
        shouldDisableDate={(date) => date.day() === 0} // Disable Sundays
      />
    </LocalizationProvider>
  );
}

DesktopDatePicker

Desktop-optimized date picker that always shows the desktop UI regardless of screen size.

/**
 * Desktop-optimized date picker with popover interface
 * @param props - DesktopDatePicker configuration properties
 * @returns JSX element for desktop date picker
 */
function DesktopDatePicker<TDate>(props: DesktopDatePickerProps<TDate>): JSX.Element;

interface DesktopDatePickerProps<TDate> extends Omit<DatePickerProps<TDate>, 'slots' | 'slotProps'> {
  /** Component slots for desktop customization */
  slots?: DesktopDatePickerSlots<TDate>;
  /** Props passed to desktop-specific slots */
  slotProps?: DesktopDatePickerSlotProps<TDate>;
}

interface DesktopDatePickerSlots<TDate> extends DatePickerSlots<TDate> {
  desktopPaper?: React.ElementType;
  popper?: React.ElementType;
}

interface DesktopDatePickerSlotProps<TDate> extends DatePickerSlotProps<TDate> {
  desktopPaper?: PaperProps;
  popper?: PopperProps;
}

MobileDatePicker

Mobile-optimized date picker that always shows the mobile UI with modal interface.

/**
 * Mobile-optimized date picker with modal interface
 * @param props - MobileDatePicker configuration properties
 * @returns JSX element for mobile date picker
 */
function MobileDatePicker<TDate>(props: MobileDatePickerProps<TDate>): JSX.Element;

interface MobileDatePickerProps<TDate> extends Omit<DatePickerProps<TDate>, 'slots' | 'slotProps'> {
  /** Component slots for mobile customization */
  slots?: MobileDatePickerSlots<TDate>;
  /** Props passed to mobile-specific slots */
  slotProps?: MobileDatePickerSlotProps<TDate>;
}

interface MobileDatePickerSlots<TDate> extends DatePickerSlots<TDate> {
  mobilePaper?: React.ElementType;
  dialog?: React.ElementType;
}

interface MobileDatePickerSlotProps<TDate> extends DatePickerSlotProps<TDate> {
  mobilePaper?: PaperProps;
  dialog?: DialogProps;
}

StaticDatePicker

Always-visible date picker without input field, suitable for embedding in forms or dashboards.

/**
 * Always-visible date picker without input field
 * @param props - StaticDatePicker configuration properties  
 * @returns JSX element for static date picker
 */
function StaticDatePicker<TDate>(props: StaticDatePickerProps<TDate>): JSX.Element;

interface StaticDatePickerProps<TDate> extends Omit<DatePickerProps<TDate>, 'open' | 'onClose' | 'slots' | 'slotProps'> {
  /** Component slots for static customization */
  slots?: StaticDatePickerSlots<TDate>;
  /** Props passed to static-specific slots */
  slotProps?: StaticDatePickerSlotProps<TDate>;
  /** Display orientation */
  orientation?: 'landscape' | 'portrait';
}

interface StaticDatePickerSlots<TDate> extends Omit<DatePickerSlots<TDate>, 'field' | 'textField' | 'openPickerIcon'> {
  staticWrapperInner?: React.ElementType;
}

interface StaticDatePickerSlotProps<TDate> extends Omit<DatePickerSlotProps<TDate>, 'field' | 'textField' | 'openPickerIcon'> {
  staticWrapperInner?: React.HTMLAttributes<HTMLDivElement>;
}

Usage Examples:

// Static date picker in a dashboard
function DashboardDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs());
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        value={value}
        onChange={(newValue) => setValue(newValue)}
        orientation="landscape"
      />
    </LocalizationProvider>
  );
}

DatePickerToolbar

Toolbar component displayed in date pickers showing selected date and view controls.

/**
 * Toolbar component for date pickers
 * @param props - DatePickerToolbar configuration properties
 * @returns JSX element for date picker toolbar
 */
function DatePickerToolbar<TDate>(props: DatePickerToolbarProps<TDate>): JSX.Element;

interface DatePickerToolbarProps<TDate> {
  /** Current date value */
  value?: TDate | null;
  /** Currently active view */
  view: DateView;
  /** Available views */
  views: readonly DateView[];
  /** Callback when view changes */
  onViewChange: (view: DateView) => void;
  /** Date adapter instance */
  adapter: MuiPickersAdapter<TDate>;
  /** Timezone for date operations */
  timezone: PickersTimezone;
  /** If true, toolbar is hidden */
  hidden?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Inline styles */
  sx?: SxProps<Theme>;
}

CSS Classes

DatePickerToolbar Classes

const datePickerToolbarClasses: {
  root: string;
  title: string;
};

type DatePickerToolbarClassKey = keyof typeof datePickerToolbarClasses;
interface DatePickerToolbarClasses extends Record<DatePickerToolbarClassKey, string> {}

Shared Types

interface PickerChangeContext {
  validationError: string | null;
}

interface DatePickerFieldProps<TDate> {
  value?: TDate | null;
  onChange?: (value: TDate | null, context: FieldChangeContext<TDate>) => void;
  format?: string;
  disabled?: boolean;
  readOnly?: boolean;
}