0
# Date-Time Pickers
1

2
Date-time picker components provide combined date and time selection with tabbed interface for switching between date and time views.
3

4
## Capabilities
5

6
### DateTimePicker
7

8
Main responsive date-time picker component that combines date and time selection with automatic interface adaptation.
9

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

18
interface DateTimePickerProps<TDate> {
19
  /** Current date-time value */
20
  value?: TDate | null;
21
  /** Callback fired when date-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
  /** If true, disable dates after today */
30
  disableFuture?: boolean;
31
  /** If true, disable dates before today */
32
  disablePast?: boolean;
33
  /** Minimum selectable date */
34
  minDate?: TDate;
35
  /** Maximum selectable date */
36
  maxDate?: TDate;
37
  /** Minimum selectable time */
38
  minTime?: TDate;
39
  /** Maximum selectable time */
40
  maxTime?: TDate;
41
  /** Minimum selectable date-time */
42
  minDateTime?: TDate;
43
  /** Maximum selectable date-time */
44
  maxDateTime?: TDate;
45
  /** Function to disable specific dates */
46
  shouldDisableDate?: (day: TDate) => boolean;
47
  /** Function to disable specific times */
48
  shouldDisableTime?: (value: TDate, view: TimeView) => boolean;
49
  /** Available views for the picker */
50
  views?: readonly DateOrTimeView[];
51
  /** View to show when picker opens */
52
  openTo?: DateOrTimeView;
53
  /** Format string for date-time display */
54
  format?: string;
55
  /** Time step options for time views */
56
  timeSteps?: TimeStepOptions;
57
  /** If true, use 12-hour format with AM/PM */
58
  ampm?: boolean;
59
  /** Props passed to picker slots */
60
  slotProps?: DateTimePickerSlotProps<TDate>;
61
  /** Component slots for customization */
62
  slots?: DateTimePickerSlots<TDate>;
63
  /** Default calendar month when no value is set */
64
  defaultCalendarMonth?: TDate;
65
  /** Custom day rendering function */
66
  renderDay?: (day: TDate, selectedDays: TDate[], pickersDayProps: PickersDayProps<TDate>) => JSX.Element;
67
}
68

69
interface DateTimePickerSlots<TDate> {
70
  field?: React.ElementType;
71
  textField?: React.ElementType;
72
  openPickerIcon?: React.ElementType;
73
  switchViewButton?: React.ElementType;
74
  switchViewIcon?: React.ElementType;
75
  previousIconButton?: React.ElementType;
76
  nextIconButton?: React.ElementType;
77
  leftArrowIcon?: React.ElementType;
78
  rightArrowIcon?: React.ElementType;
79
  calendarHeader?: React.ElementType;
80
  day?: React.ElementType;
81
  toolbar?: React.ElementType;
82
  tabs?: React.ElementType;
83
  actionBar?: React.ElementType;
84
  shortcuts?: React.ElementType;
85
  layout?: React.ElementType;
86
}
87

88
interface DateTimePickerSlotProps<TDate> {
89
  field?: PickerFieldSlotProps<TDate>;
90
  textField?: BuiltInFieldTextFieldProps;
91
  openPickerIcon?: IconButtonProps;
92
  switchViewButton?: IconButtonProps;
93
  switchViewIcon?: SvgIconProps;
94
  previousIconButton?: IconButtonProps;
95
  nextIconButton?: IconButtonProps;
96
  leftArrowIcon?: SvgIconProps;
97
  rightArrowIcon?: SvgIconProps;
98
  calendarHeader?: PickersCalendarHeaderSlotProps<TDate>;
99
  day?: PickersDayProps<TDate>;
100
  toolbar?: DateTimePickerToolbarProps<TDate>;
101
  tabs?: DateTimePickerTabsProps;
102
  actionBar?: PickersActionBarProps;
103
  shortcuts?: PickersShortcutsProps<TDate>;
104
  layout?: PickersLayoutSlotProps<TDate>;
105
}
106

107
type DateOrTimeView = DateView | TimeView;
108
type DateView = 'year' | 'month' | 'day';
109
type TimeView = 'hours' | 'minutes' | 'seconds';
110
```
111

112
**Usage Examples:**
113

114
```typescript
115
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
116
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
117
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
118
import dayjs, { Dayjs } from 'dayjs';
119

120
// Basic date-time picker
121
function BasicDateTimePicker() {
122
  const [value, setValue] = React.useState<Dayjs | null>(null);
123
  
124
  return (
125
    <LocalizationProvider dateAdapter={AdapterDayjs}>
126
      <DateTimePicker
127
        label="Select date and time"
128
        value={value}
129
        onChange={(newValue) => setValue(newValue)}
130
      />
131
    </LocalizationProvider>
132
  );
133
}
134

135
// Date-time picker with validation
136
function AppointmentDateTimePicker() {
137
  const [value, setValue] = React.useState<Dayjs | null>(null);
138
  
139
  return (
140
    <LocalizationProvider dateAdapter={AdapterDayjs}>
141
      <DateTimePicker
142
        label="Appointment date & time"
143
        value={value}
144
        onChange={(newValue) => setValue(newValue)}
145
        disablePast
146
        minDateTime={dayjs()}
147
        maxDateTime={dayjs().add(3, 'month')}
148
        shouldDisableTime={(time, view) => {
149
          // Disable times outside business hours
150
          if (view === 'hours') {
151
            return time.hour() < 9 || time.hour() > 17;
152
          }
153
          return false;
154
        }}
155
        views={['year', 'month', 'day', 'hours', 'minutes']}
156
        timeSteps={{ minutes: 30 }}
157
        ampm={false}
158
      />
159
    </LocalizationProvider>
160
  );
161
}
162
```
163

164
### DesktopDateTimePicker
165

166
Desktop-optimized date-time picker with popover interface and tabbed date/time selection.
167

168
```typescript { .api }
169
/**
170
 * Desktop-optimized date-time picker with popover interface
171
 * @param props - DesktopDateTimePicker configuration properties
172
 * @returns JSX element for desktop date-time picker
173
 */
174
function DesktopDateTimePicker<TDate>(props: DesktopDateTimePickerProps<TDate>): JSX.Element;
175

176
interface DesktopDateTimePickerProps<TDate> extends Omit<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
177
  /** Component slots for desktop customization */
178
  slots?: DesktopDateTimePickerSlots<TDate>;
179
  /** Props passed to desktop-specific slots */
180
  slotProps?: DesktopDateTimePickerSlotProps<TDate>;
181
}
182

183
interface DesktopDateTimePickerSlots<TDate> extends DateTimePickerSlots<TDate> {
184
  desktopPaper?: React.ElementType;
185
  popper?: React.ElementType;
186
}
187

188
interface DesktopDateTimePickerSlotProps<TDate> extends DateTimePickerSlotProps<TDate> {
189
  desktopPaper?: PaperProps;
190
  popper?: PopperProps;
191
}
192
```
193

194
### MobileDateTimePicker
195

196
Mobile-optimized date-time picker with modal interface and touch-friendly navigation.
197

198
```typescript { .api }
199
/**
200
 * Mobile-optimized date-time picker with modal interface
201
 * @param props - MobileDateTimePicker configuration properties
202
 * @returns JSX element for mobile date-time picker
203
 */
204
function MobileDateTimePicker<TDate>(props: MobileDateTimePickerProps<TDate>): JSX.Element;
205

206
interface MobileDateTimePickerProps<TDate> extends Omit<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
207
  /** Component slots for mobile customization */
208
  slots?: MobileDateTimePickerSlots<TDate>;
209
  /** Props passed to mobile-specific slots */
210
  slotProps?: MobileDateTimePickerSlotProps<TDate>;
211
}
212

213
interface MobileDateTimePickerSlots<TDate> extends DateTimePickerSlots<TDate> {
214
  mobilePaper?: React.ElementType;
215
  dialog?: React.ElementType;
216
}
217

218
interface MobileDateTimePickerSlotProps<TDate> extends DateTimePickerSlotProps<TDate> {
219
  mobilePaper?: PaperProps;
220
  dialog?: DialogProps;
221
}
222
```
223

224
### StaticDateTimePicker
225

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

228
```typescript { .api }
229
/**
230
 * Always-visible date-time picker without input field
231
 * @param props - StaticDateTimePicker configuration properties
232
 * @returns JSX element for static date-time picker
233
 */
234
function StaticDateTimePicker<TDate>(props: StaticDateTimePickerProps<TDate>): JSX.Element;
235

236
interface StaticDateTimePickerProps<TDate> extends Omit<DateTimePickerProps<TDate>, 'open' | 'onClose' | 'slots' | 'slotProps'> {
237
  /** Component slots for static customization */
238
  slots?: StaticDateTimePickerSlots<TDate>;
239
  /** Props passed to static-specific slots */
240
  slotProps?: StaticDateTimePickerSlotProps<TDate>;
241
  /** Display orientation */
242
  orientation?: 'landscape' | 'portrait';
243
}
244

245
interface StaticDateTimePickerSlots<TDate> extends Omit<DateTimePickerSlots<TDate>, 'field' | 'textField' | 'openPickerIcon'> {
246
  staticWrapperInner?: React.ElementType;
247
}
248

249
interface StaticDateTimePickerSlotProps<TDate> extends Omit<DateTimePickerSlotProps<TDate>, 'field' | 'textField' | 'openPickerIcon'> {
250
  staticWrapperInner?: React.HTMLAttributes<HTMLDivElement>;
251
}
252
```
253

254
### DateTimePickerTabs
255

256
Tab component for switching between date and time views in date-time pickers.
257

258
```typescript { .api }
259
/**
260
 * Tab component for date-time picker view switching
261
 * @param props - DateTimePickerTabs configuration properties
262
 * @returns JSX element for date-time picker tabs
263
 */
264
function DateTimePickerTabs(props: DateTimePickerTabsProps): JSX.Element;
265

266
interface DateTimePickerTabsProps {
267
  /** Currently active view */
268
  view: DateOrTimeView;
269
  /** Callback when view changes */
270
  onViewChange: (view: DateOrTimeView) => void;
271
  /** If true, date tab is hidden */
272
  hideDateTab?: boolean;
273
  /** If true, time tab is hidden */
274
  hideTimeTab?: boolean;
275
  /** Icon for date tab */
276
  dateIcon?: React.ReactNode;
277
  /** Icon for time tab */
278
  timeIcon?: React.ReactNode;
279
  /** Additional CSS classes */
280
  className?: string;
281
  /** Inline styles */
282
  sx?: SxProps<Theme>;
283
}
284
```
285

286
### DateTimePickerToolbar
287

288
Toolbar component displayed in date-time pickers showing selected date-time and view controls.
289

290
```typescript { .api }
291
/**
292
 * Toolbar component for date-time pickers
293
 * @param props - DateTimePickerToolbar configuration properties
294
 * @returns JSX element for date-time picker toolbar
295
 */
296
function DateTimePickerToolbar<TDate>(props: DateTimePickerToolbarProps<TDate>): JSX.Element;
297

298
interface DateTimePickerToolbarProps<TDate> {
299
  /** Current date-time value */
300
  value?: TDate | null;
301
  /** Currently active view */
302
  view: DateOrTimeView;
303
  /** Available views */
304
  views: readonly DateOrTimeView[];
305
  /** Callback when view changes */
306
  onViewChange: (view: DateOrTimeView) => void;
307
  /** Date adapter instance */
308
  adapter: MuiPickersAdapter<TDate>;
309
  /** Timezone for date-time operations */
310
  timezone: PickersTimezone;
311
  /** If true, use 12-hour format */
312
  ampm?: boolean;
313
  /** If true, toolbar is hidden */
314
  hidden?: boolean;
315
  /** Additional CSS classes */
316
  className?: string;
317
  /** Inline styles */
318
  sx?: SxProps<Theme>;
319
}
320
```
321

322
## CSS Classes
323

324
### DateTimePickerTabs Classes
325

326
```typescript { .api }
327
const dateTimePickerTabsClasses: {
328
  root: string;
329
};
330

331
type DateTimePickerTabsClassKey = keyof typeof dateTimePickerTabsClasses;
332
interface DateTimePickerTabsClasses extends Record<DateTimePickerTabsClassKey, string> {}
333
```
334

335
### DateTimePickerToolbar Classes
336

337
```typescript { .api }
338
const dateTimePickerToolbarClasses: {
339
  root: string;
340
  dateContainer: string;
341
  timeContainer: string;
342
  timeDigitsContainer: string;
343
  separator: string;
344
  ampmSelection: string;
345
  ampmLandscape: string;
346
  ampmLabel: string;
347
};
348

349
type DateTimePickerToolbarClassKey = keyof typeof dateTimePickerToolbarClasses;
350
interface DateTimePickerToolbarClasses extends Record<DateTimePickerToolbarClassKey, string> {}
351
```
352

353
## Shared Types
354

355
```typescript { .api }
356
interface DateTimePickerFieldProps<TDate> {
357
  value?: TDate | null;
358
  onChange?: (value: TDate | null, context: FieldChangeContext<TDate>) => void;
359
  format?: string;
360
  disabled?: boolean;
361
  readOnly?: boolean;
362
  ampm?: boolean;
363
}
364
```