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

Time Pickers

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

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

Capabilities

TimePicker

Main responsive time picker component that adapts between desktop and mobile interfaces with analog clock and digital time selection.

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

interface TimePickerProps<TDate> {
  /** Current time value */
  value?: TDate | null;
  /** Callback fired when time 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;
  /** Minimum selectable time */
  minTime?: TDate;
  /** Maximum selectable time */
  maxTime?: TDate;
  /** Function to disable specific times */
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
  /** Available views for the picker */
  views?: readonly TimeView[];
  /** View to show when picker opens */
  openTo?: TimeView;
  /** Format string for time display */
  format?: string;
  /** Time step options for different views */
  timeSteps?: TimeStepOptions;
  /** If true, use 12-hour format with AM/PM */
  ampm?: boolean;
  /** Props passed to picker slots */
  slotProps?: TimePickerSlotProps<TDate>;
  /** Component slots for customization */
  slots?: TimePickerSlots<TDate>;
}

interface TimePickerSlots<TDate> {
  field?: React.ElementType;
  textField?: React.ElementType;
  openPickerIcon?: React.ElementType;
  switchViewButton?: React.ElementType;
  switchViewIcon?: React.ElementType;
  toolbar?: React.ElementType;
  actionBar?: React.ElementType;
  shortcuts?: React.ElementType;
  layout?: React.ElementType;
}

interface TimePickerSlotProps<TDate> {
  field?: PickerFieldSlotProps<TDate>;
  textField?: BuiltInFieldTextFieldProps;
  openPickerIcon?: IconButtonProps;
  switchViewButton?: IconButtonProps;
  switchViewIcon?: SvgIconProps;
  toolbar?: TimePickerToolbarProps<TDate>;
  actionBar?: PickersActionBarProps;
  shortcuts?: PickersShortcutsProps<TDate>;
  layout?: PickersLayoutSlotProps<TDate>;
}

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

interface TimeStepOptions {
  /** Step for hours selection */
  hours?: number;
  /** Step for minutes selection */
  minutes?: number;
  /** Step for seconds selection */
  seconds?: number;
}

Usage Examples:

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

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

// Time picker with constraints
function BusinessHoursTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TimePicker
        label="Business hours"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minTime={dayjs().hour(9).minute(0)}
        maxTime={dayjs().hour(17).minute(0)}
        timeSteps={{ hours: 1, minutes: 15 }}
        views={['hours', 'minutes']}
        ampm={false}
      />
    </LocalizationProvider>
  );
}

DesktopTimePicker

Desktop-optimized time picker with popover interface showing analog clock or digital time selection.

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

interface DesktopTimePickerProps<TDate> extends Omit<TimePickerProps<TDate>, 'slots' | 'slotProps'> {
  /** Component slots for desktop customization */
  slots?: DesktopTimePickerSlots<TDate>;
  /** Props passed to desktop-specific slots */
  slotProps?: DesktopTimePickerSlotProps<TDate>;
}

interface DesktopTimePickerSlots<TDate> extends TimePickerSlots<TDate> {
  desktopPaper?: React.ElementType;
  popper?: React.ElementType;
}

interface DesktopTimePickerSlotProps<TDate> extends TimePickerSlotProps<TDate> {
  desktopPaper?: PaperProps;
  popper?: PopperProps;
}

MobileTimePicker

Mobile-optimized time picker with modal interface and touch-friendly controls.

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

interface MobileTimePickerProps<TDate> extends Omit<TimePickerProps<TDate>, 'slots' | 'slotProps'> {
  /** Component slots for mobile customization */
  slots?: MobileTimePickerSlots<TDate>;
  /** Props passed to mobile-specific slots */
  slotProps?: MobileTimePickerSlotProps<TDate>;
}

interface MobileTimePickerSlots<TDate> extends TimePickerSlots<TDate> {
  mobilePaper?: React.ElementType;
  dialog?: React.ElementType;
}

interface MobileTimePickerSlotProps<TDate> extends TimePickerSlotProps<TDate> {
  mobilePaper?: PaperProps;
  dialog?: DialogProps;
}

StaticTimePicker

Always-visible time picker without input field, suitable for embedded time selection.

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

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

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

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

Usage Examples:

// Static time picker for appointments
function AppointmentTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs().hour(14).minute(0));
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticTimePicker
        value={value}
        onChange={(newValue) => setValue(newValue)}
        views={['hours', 'minutes']}
        timeSteps={{ minutes: 15 }}
      />
    </LocalizationProvider>
  );
}

TimePickerToolbar

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

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

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

CSS Classes

TimePickerToolbar Classes

const timePickerToolbarClasses: {
  root: string;
  separator: string;
  hourMinuteLabel: string;
  hourMinuteLabelLandscape: string;
  hourMinuteLabelReverse: string;
  ampmSelection: string;
  ampmLandscape: string;
  ampmLabel: string;
};

type TimePickerToolbarClassKey = keyof typeof timePickerToolbarClasses;
interface TimePickerToolbarClasses extends Record<TimePickerToolbarClassKey, string> {}

Shared Types

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