forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 2
/
DateTimePicker.tsx
103 lines (94 loc) · 3.34 KB
/
DateTimePicker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { useUtils } from '../_shared/hooks/useUtils';
import { DateTimePickerToolbar } from './DateTimePickerToolbar';
import { ExportedClockViewProps } from '../views/Clock/ClockView';
import { ResponsiveWrapper } from '../wrappers/ResponsiveWrapper';
import { pick12hOr24hFormat } from '../_helpers/text-field-helper';
import { ExportedCalendarViewProps } from '../views/Calendar/CalendarView';
import { makePickerWithStateAndWrapper } from '../Picker/makePickerWithState';
import { InlineWrapper, ModalWrapper, StaticWrapper } from '../wrappers/Wrapper';
import { WithViewsProps, AllSharedPickerProps } from '../Picker/SharedPickerProps';
import { dateTimePickerDefaultProps, ParsableDate } from '../constants/prop-types';
export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
export interface DateTimePickerProps
extends WithViewsProps<'year' | 'date' | 'month' | 'hours' | 'minutes'>,
ExportedClockViewProps,
ExportedCalendarViewProps {
/** To show tabs */
hideTabs?: boolean;
/** Date tab icon */
dateRangeIcon?: React.ReactNode;
/** Time tab icon */
timeIcon?: React.ReactNode;
/** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime` */
minDateTime?: ParsableDate;
/** Minimal selectable moment of time with binding to date, to set max time in each day use `maxTime` */
maxDateTime?: ParsableDate;
/** Date format, that is displaying in toolbar */
toolbarFormat?: string;
}
function useDefaultProps({
ampm,
mask,
inputFormat,
maxDateTime,
minDateTime,
orientation = 'portrait',
openTo = 'date',
views = ['year', 'date', 'hours', 'minutes'],
}: DateTimePickerProps & AllSharedPickerProps) {
const utils = useUtils();
const willUseAmPm = ampm ?? utils.is12HourCycleInCurrentLocale();
if (orientation !== 'portrait') {
throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
}
return {
...dateTimePickerDefaultProps,
openTo,
views,
ampm: willUseAmPm,
wider: true,
ampmInClock: true,
orientation,
showToolbar: true,
minDate: minDateTime,
minTime: minDateTime,
maxDate: maxDateTime,
maxTime: maxDateTime,
disableTimeValidationIgnoreDatePart: Boolean(minDateTime || maxDateTime),
acceptRegex: willUseAmPm ? /[\dap]/gi : /\d/gi,
mask: mask || willUseAmPm ? '__/__/____ __:__ _M' : '__/__/____ __:__',
inputFormat: pick12hOr24hFormat(inputFormat, ampm, {
localized: utils.formats.keyboardDateTime,
'12h': utils.formats.keyboardDateTime12h,
'24h': utils.formats.keyboardDateTime24h,
}),
};
}
export const DateTimePicker = makePickerWithStateAndWrapper<DateTimePickerProps>(
ResponsiveWrapper,
{
useDefaultProps,
DefaultToolbarComponent: DateTimePickerToolbar,
}
);
export const DesktopDateTimePicker = makePickerWithStateAndWrapper<DateTimePickerProps>(
InlineWrapper,
{
useDefaultProps,
DefaultToolbarComponent: DateTimePickerToolbar,
}
);
export const MobileDateTimePicker = makePickerWithStateAndWrapper<DateTimePickerProps>(
ModalWrapper,
{
useDefaultProps,
DefaultToolbarComponent: DateTimePickerToolbar,
}
);
export const StaticDateTimePicker = makePickerWithStateAndWrapper<DateTimePickerProps>(
StaticWrapper,
{
useDefaultProps,
DefaultToolbarComponent: DateTimePickerToolbar,
}
);