0
# Time Pickers
1

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

4
## Capabilities
5

6
### TimePicker
7

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

10
```typescript { .api }
11
/**
12
 * Main responsive time picker component
13
 * @param props - TimePicker configuration properties
14
 * @returns JSX element for time picker
15
 */
16
function TimePicker<TDate>(props: TimePickerProps<TDate>): JSX.Element;
17

18
interface TimePickerProps<TDate> {
19
  /** Current time value */
20
  value?: TDate | null;
21
  /** Callback fired when time changes */
22
  onChange?: (value: TDate | null, context: PickerChangeContext) => void;
23
  /** Input label text */
24
  label?: React.ReactNode;
25
  /** If true, the picker is disabled */
26
  disabled?: boolean;
27
  /** If true, the picker is read-only */
28
  readOnly?: boolean;
29
  /** Minimum selectable time */
30
  minTime?: TDate;
31
  /** Maximum selectable time */
32
  maxTime?: TDate;
33
  /** Function to disable specific times */
34
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
35
  /** Available views for the picker */
36
  views?: readonly TimeView[];
37
  /** View to show when picker opens */
38
  openTo?: TimeView;
39
  /** Format string for time display */
40
  format?: string;
41
  /** Time step options for different views */
42
  timeSteps?: TimeStepOptions;
43
  /** If true, use 12-hour format with AM/PM */
44
  ampm?: boolean;
45
  /** Props passed to picker slots */
46
  slotProps?: TimePickerSlotProps<TDate>;
47
  /** Component slots for customization */
48
  slots?: TimePickerSlots<TDate>;
49
}
50

51
interface TimePickerSlots<TDate> {
52
  field?: React.ElementType;
53
  textField?: React.ElementType;
54
  openPickerIcon?: React.ElementType;
55
  switchViewButton?: React.ElementType;
56
  switchViewIcon?: React.ElementType;
57
  toolbar?: React.ElementType;
58
  actionBar?: React.ElementType;
59
  shortcuts?: React.ElementType;
60
  layout?: React.ElementType;
61
}
62

63
interface TimePickerSlotProps<TDate> {
64
  field?: PickerFieldSlotProps<TDate>;
65
  textField?: BuiltInFieldTextFieldProps;
66
  openPickerIcon?: IconButtonProps;
67
  switchViewButton?: IconButtonProps;
68
  switchViewIcon?: SvgIconProps;
69
  toolbar?: TimePickerToolbarProps<TDate>;
70
  actionBar?: PickersActionBarProps;
71
  shortcuts?: PickersShortcutsProps<TDate>;
72
  layout?: PickersLayoutSlotProps<TDate>;
73
}
74

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

77
interface TimeStepOptions {
78
  /** Step for hours selection */
79
  hours?: number;
80
  /** Step for minutes selection */
81
  minutes?: number;
82
  /** Step for seconds selection */
83
  seconds?: number;
84
}
85
```
86

87
**Usage Examples:**
88

89
```typescript
90
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
91
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
92
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
93
import dayjs, { Dayjs } from 'dayjs';
94

95
// Basic time picker
96
function BasicTimePicker() {
97
  const [value, setValue] = React.useState<Dayjs | null>(null);
98
  
99
  return (
100
    <LocalizationProvider dateAdapter={AdapterDayjs}>
101
      <TimePicker
102
        label="Select time"
103
        value={value}
104
        onChange={(newValue) => setValue(newValue)}
105
      />
106
    </LocalizationProvider>
107
  );
108
}
109

110
// Time picker with constraints
111
function BusinessHoursTimePicker() {
112
  const [value, setValue] = React.useState<Dayjs | null>(null);
113
  
114
  return (
115
    <LocalizationProvider dateAdapter={AdapterDayjs}>
116
      <TimePicker
117
        label="Business hours"
118
        value={value}
119
        onChange={(newValue) => setValue(newValue)}
120
        minTime={dayjs().hour(9).minute(0)}
121
        maxTime={dayjs().hour(17).minute(0)}
122
        timeSteps={{ hours: 1, minutes: 15 }}
123
        views={['hours', 'minutes']}
124
        ampm={false}
125
      />
126
    </LocalizationProvider>
127
  );
128
}
129
```
130

131
### DesktopTimePicker
132

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

135
```typescript { .api }
136
/**
137
 * Desktop-optimized time picker with popover interface
138
 * @param props - DesktopTimePicker configuration properties
139
 * @returns JSX element for desktop time picker
140
 */
141
function DesktopTimePicker<TDate>(props: DesktopTimePickerProps<TDate>): JSX.Element;
142

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

150
interface DesktopTimePickerSlots<TDate> extends TimePickerSlots<TDate> {
151
  desktopPaper?: React.ElementType;
152
  popper?: React.ElementType;
153
}
154

155
interface DesktopTimePickerSlotProps<TDate> extends TimePickerSlotProps<TDate> {
156
  desktopPaper?: PaperProps;
157
  popper?: PopperProps;
158
}
159
```
160

161
### MobileTimePicker
162

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

165
```typescript { .api }
166
/**
167
 * Mobile-optimized time picker with modal interface
168
 * @param props - MobileTimePicker configuration properties
169
 * @returns JSX element for mobile time picker
170
 */
171
function MobileTimePicker<TDate>(props: MobileTimePickerProps<TDate>): JSX.Element;
172

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

180
interface MobileTimePickerSlots<TDate> extends TimePickerSlots<TDate> {
181
  mobilePaper?: React.ElementType;
182
  dialog?: React.ElementType;
183
}
184

185
interface MobileTimePickerSlotProps<TDate> extends TimePickerSlotProps<TDate> {
186
  mobilePaper?: PaperProps;
187
  dialog?: DialogProps;
188
}
189
```
190

191
### StaticTimePicker
192

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

195
```typescript { .api }
196
/**
197
 * Always-visible time picker without input field
198
 * @param props - StaticTimePicker configuration properties
199
 * @returns JSX element for static time picker
200
 */
201
function StaticTimePicker<TDate>(props: StaticTimePickerProps<TDate>): JSX.Element;
202

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

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

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

221
**Usage Examples:**
222

223
```typescript
224
// Static time picker for appointments
225
function AppointmentTimePicker() {
226
  const [value, setValue] = React.useState<Dayjs | null>(dayjs().hour(14).minute(0));
227
  
228
  return (
229
    <LocalizationProvider dateAdapter={AdapterDayjs}>
230
      <StaticTimePicker
231
        value={value}
232
        onChange={(newValue) => setValue(newValue)}
233
        views={['hours', 'minutes']}
234
        timeSteps={{ minutes: 15 }}
235
      />
236
    </LocalizationProvider>
237
  );
238
}
239
```
240

241
### TimePickerToolbar
242

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

245
```typescript { .api }
246
/**
247
 * Toolbar component for time pickers
248
 * @param props - TimePickerToolbar configuration properties
249
 * @returns JSX element for time picker toolbar
250
 */
251
function TimePickerToolbar<TDate>(props: TimePickerToolbarProps<TDate>): JSX.Element;
252

253
interface TimePickerToolbarProps<TDate> {
254
  /** Current time value */
255
  value?: TDate | null;
256
  /** Currently active view */
257
  view: TimeView;
258
  /** Available views */
259
  views: readonly TimeView[];
260
  /** Callback when view changes */
261
  onViewChange: (view: TimeView) => void;
262
  /** Date adapter instance */
263
  adapter: MuiPickersAdapter<TDate>;
264
  /** Timezone for time operations */
265
  timezone: PickersTimezone;
266
  /** If true, use 12-hour format */
267
  ampm?: boolean;
268
  /** If true, toolbar is hidden */
269
  hidden?: boolean;
270
  /** Additional CSS classes */
271
  className?: string;
272
  /** Inline styles */
273
  sx?: SxProps<Theme>;
274
}
275
```
276

277
## CSS Classes
278

279
### TimePickerToolbar Classes
280

281
```typescript { .api }
282
const timePickerToolbarClasses: {
283
  root: string;
284
  separator: string;
285
  hourMinuteLabel: string;
286
  hourMinuteLabelLandscape: string;
287
  hourMinuteLabelReverse: string;
288
  ampmSelection: string;
289
  ampmLandscape: string;
290
  ampmLabel: string;
291
};
292

293
type TimePickerToolbarClassKey = keyof typeof timePickerToolbarClasses;
294
interface TimePickerToolbarClasses extends Record<TimePickerToolbarClassKey, string> {}
295
```
296

297
## Shared Types
298

299
```typescript { .api }
300
interface TimePickerFieldProps<TDate> {
301
  value?: TDate | null;
302
  onChange?: (value: TDate | null, context: FieldChangeContext<TDate>) => void;
303
  format?: string;
304
  disabled?: boolean;
305
  readOnly?: boolean;
306
  ampm?: boolean;
307
}
308
```