@tidbcloud/uikit 2.7.7 → 2.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/biz/DateTimePicker/helpers.cjs +7 -0
- package/dist/biz/DateTimePicker/helpers.d.cts +2 -3
- package/dist/biz/DateTimePicker/helpers.d.mts +2 -3
- package/dist/biz/DateTimePicker/helpers.mjs +7 -0
- package/dist/biz/DateTimePicker/index.cjs +57 -5
- package/dist/biz/DateTimePicker/index.d.cts +1 -1
- package/dist/biz/DateTimePicker/index.d.mts +1 -1
- package/dist/biz/DateTimePicker/index.mjs +57 -5
- package/dist/biz/DateTimePicker/types.d.cts +12 -0
- package/dist/biz/DateTimePicker/types.d.mts +12 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.8.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(uikit): improve DateTimePicker dark mode contrast ([#648](https://github.com/tidbcloud/tidbcloud-uikit/pull/648))
|
|
8
|
+
|
|
9
|
+
## 2.8.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- fix(uikit): make DateTimePicker future mode opt-in ([#647](https://github.com/tidbcloud/tidbcloud-uikit/pull/647))
|
|
14
|
+
- feat(uikit): update DateTimePicker date states ([#645](https://github.com/tidbcloud/tidbcloud-uikit/pull/645))
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- fix(uikit): make DateTimePicker future mode opt-in ([#647](https://github.com/tidbcloud/tidbcloud-uikit/pull/647))
|
|
19
|
+
- feat(uikit): update DateTimePicker date states ([#645](https://github.com/tidbcloud/tidbcloud-uikit/pull/645))
|
|
20
|
+
|
|
3
21
|
## 2.7.7
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -6,6 +6,8 @@ const dayjs = require("../../utils/dayjs.cjs");
|
|
|
6
6
|
const useDateTimePicker = ({
|
|
7
7
|
value,
|
|
8
8
|
onChange,
|
|
9
|
+
today = /* @__PURE__ */ new Date(),
|
|
10
|
+
futureOnly = false,
|
|
9
11
|
startDate = dayjs.dayjs().subtract(10, "year").toDate(),
|
|
10
12
|
endDate = dayjs.dayjs().add(10, "year").toDate(),
|
|
11
13
|
utcOffset = dayjs.dayjs().utcOffset(),
|
|
@@ -28,6 +30,9 @@ const useDateTimePicker = ({
|
|
|
28
30
|
const displayStartDate = React.useMemo(() => {
|
|
29
31
|
return convertToLocal(startDate);
|
|
30
32
|
}, [startDate, convertToLocal]);
|
|
33
|
+
const displayToday = React.useMemo(() => {
|
|
34
|
+
return convertToLocal(today);
|
|
35
|
+
}, [today, convertToLocal]);
|
|
31
36
|
const displayEndDate = React.useMemo(() => {
|
|
32
37
|
return convertToLocal(endDate);
|
|
33
38
|
}, [endDate, convertToLocal]);
|
|
@@ -38,6 +43,8 @@ const useDateTimePicker = ({
|
|
|
38
43
|
return {
|
|
39
44
|
value: displayValue,
|
|
40
45
|
onChange: handleChange,
|
|
46
|
+
today: displayToday,
|
|
47
|
+
futureOnly,
|
|
41
48
|
startDate: displayStartDate,
|
|
42
49
|
endDate: displayEndDate,
|
|
43
50
|
formatter: (val) => {
|
|
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
import { DateTimePickerProps } from './types.cjs';
|
|
32
|
-
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
32
|
+
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
33
33
|
/**
|
|
34
34
|
* the UTC offset in minutes.
|
|
35
35
|
* User selected time will be treated as time in that timezone
|
|
@@ -54,7 +54,6 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
54
54
|
* const dateTimePickerProps = useDateTimePicker({
|
|
55
55
|
* value,
|
|
56
56
|
* onChange: setValue,
|
|
57
|
-
* startDate: dayjs().subtract(1, 'day').toDate(),
|
|
58
57
|
* endDate: dayjs().add(1, 'day').toDate(),
|
|
59
58
|
* utcOffset
|
|
60
59
|
* })
|
|
@@ -64,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
64
63
|
* }
|
|
65
64
|
* ```
|
|
66
65
|
*/
|
|
67
|
-
export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;
|
|
66
|
+
export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
|
|
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
import { DateTimePickerProps } from './types.mjs';
|
|
32
|
-
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
32
|
+
export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
|
|
33
33
|
/**
|
|
34
34
|
* the UTC offset in minutes.
|
|
35
35
|
* User selected time will be treated as time in that timezone
|
|
@@ -54,7 +54,6 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
54
54
|
* const dateTimePickerProps = useDateTimePicker({
|
|
55
55
|
* value,
|
|
56
56
|
* onChange: setValue,
|
|
57
|
-
* startDate: dayjs().subtract(1, 'day').toDate(),
|
|
58
57
|
* endDate: dayjs().add(1, 'day').toDate(),
|
|
59
58
|
* utcOffset
|
|
60
59
|
* })
|
|
@@ -64,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
|
|
|
64
63
|
* }
|
|
65
64
|
* ```
|
|
66
65
|
*/
|
|
67
|
-
export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;
|
|
66
|
+
export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
|
|
@@ -4,6 +4,8 @@ import { dayjs } from "../../utils/dayjs.mjs";
|
|
|
4
4
|
const useDateTimePicker = ({
|
|
5
5
|
value,
|
|
6
6
|
onChange,
|
|
7
|
+
today = /* @__PURE__ */ new Date(),
|
|
8
|
+
futureOnly = false,
|
|
7
9
|
startDate = dayjs().subtract(10, "year").toDate(),
|
|
8
10
|
endDate = dayjs().add(10, "year").toDate(),
|
|
9
11
|
utcOffset = dayjs().utcOffset(),
|
|
@@ -26,6 +28,9 @@ const useDateTimePicker = ({
|
|
|
26
28
|
const displayStartDate = useMemo(() => {
|
|
27
29
|
return convertToLocal(startDate);
|
|
28
30
|
}, [startDate, convertToLocal]);
|
|
31
|
+
const displayToday = useMemo(() => {
|
|
32
|
+
return convertToLocal(today);
|
|
33
|
+
}, [today, convertToLocal]);
|
|
29
34
|
const displayEndDate = useMemo(() => {
|
|
30
35
|
return convertToLocal(endDate);
|
|
31
36
|
}, [endDate, convertToLocal]);
|
|
@@ -36,6 +41,8 @@ const useDateTimePicker = ({
|
|
|
36
41
|
return {
|
|
37
42
|
value: displayValue,
|
|
38
43
|
onChange: handleChange,
|
|
44
|
+
today: displayToday,
|
|
45
|
+
futureOnly,
|
|
39
46
|
startDate: displayStartDate,
|
|
40
47
|
endDate: displayEndDate,
|
|
41
48
|
formatter: (val) => {
|
|
@@ -24,12 +24,15 @@ const DatePicker = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
|
|
|
24
24
|
const Divider = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
|
|
25
25
|
const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
|
|
26
26
|
const Flex = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
|
|
27
|
+
const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
|
|
27
28
|
const DateTimePicker = ({
|
|
28
29
|
placeholder = "Select time",
|
|
29
30
|
format = helpers$1.DEFAULT_TIME_FORMAT,
|
|
30
31
|
formatter,
|
|
31
32
|
defaultValue,
|
|
32
33
|
value,
|
|
34
|
+
today = /* @__PURE__ */ new Date(),
|
|
35
|
+
futureOnly = false,
|
|
33
36
|
startDate = dayjs.dayjs().subtract(10, "year").toDate(),
|
|
34
37
|
endDate = dayjs.dayjs().add(10, "year").toDate(),
|
|
35
38
|
onChange,
|
|
@@ -41,6 +44,10 @@ const DateTimePicker = ({
|
|
|
41
44
|
footer
|
|
42
45
|
}) => {
|
|
43
46
|
const [opened, { close, open }] = useDisclosure.useDisclosure(false);
|
|
47
|
+
const currentDay = dayjs.dayjs(today).startOf("day");
|
|
48
|
+
const minimumDate = futureOnly ? dayjs.dayjs.max(dayjs.dayjs(startDate), dayjs.dayjs(today)) : dayjs.dayjs(startDate);
|
|
49
|
+
const initialCalendarDate = getInitialCalendarDate(currentDay);
|
|
50
|
+
const [calendarDate, setCalendarDate] = React.useState(initialCalendarDate.toDate());
|
|
44
51
|
const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
|
|
45
52
|
value: value ? dayjs.dayjs(value) : void 0,
|
|
46
53
|
defaultValue: defaultValue ? dayjs.dayjs(defaultValue) : dayjs.dayjs(),
|
|
@@ -57,8 +64,8 @@ const DateTimePicker = ({
|
|
|
57
64
|
if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
|
|
58
65
|
return;
|
|
59
66
|
}
|
|
60
|
-
if (
|
|
61
|
-
next =
|
|
67
|
+
if (next.isBefore(minimumDate)) {
|
|
68
|
+
next = minimumDate;
|
|
62
69
|
} else if (endDate && next.isAfter(endDate)) {
|
|
63
70
|
next = dayjs.dayjs(endDate);
|
|
64
71
|
}
|
|
@@ -78,6 +85,9 @@ const DateTimePicker = ({
|
|
|
78
85
|
const calendarChange = ahooks.useMemoizedFn((v) => {
|
|
79
86
|
let next = currentValue;
|
|
80
87
|
next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
|
|
88
|
+
if (futureOnly) {
|
|
89
|
+
setCalendarDate(v);
|
|
90
|
+
}
|
|
81
91
|
updateCurrentValue(next, "calendar");
|
|
82
92
|
});
|
|
83
93
|
const timeInputChange = ahooks.useMemoizedFn((e) => {
|
|
@@ -103,6 +113,9 @@ const DateTimePicker = ({
|
|
|
103
113
|
closeOnClickOutside: true,
|
|
104
114
|
onChange: (opened2) => {
|
|
105
115
|
if (opened2) {
|
|
116
|
+
if (futureOnly) {
|
|
117
|
+
setCalendarDate(getInitialCalendarDate(currentDay).toDate());
|
|
118
|
+
}
|
|
106
119
|
open();
|
|
107
120
|
} else {
|
|
108
121
|
close();
|
|
@@ -127,12 +140,51 @@ const DateTimePicker = ({
|
|
|
127
140
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
128
141
|
DatePicker.DatePicker,
|
|
129
142
|
{
|
|
130
|
-
|
|
143
|
+
date: futureOnly ? calendarDate : void 0,
|
|
144
|
+
onDateChange: futureOnly ? setCalendarDate : void 0,
|
|
145
|
+
minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
|
|
131
146
|
maxDate: endDate,
|
|
147
|
+
getDayProps: futureOnly ? (date) => {
|
|
148
|
+
const day = dayjs.dayjs(date);
|
|
149
|
+
const isCurrentDay = day.isSame(currentDay, "day");
|
|
150
|
+
const isSelected = day.isSame(currentValue, "day");
|
|
151
|
+
return {
|
|
152
|
+
style: isCurrentDay && !isSelected ? {
|
|
153
|
+
border: "1px solid var(--mantine-color-carbon-8)",
|
|
154
|
+
color: "var(--mantine-color-carbon-8)",
|
|
155
|
+
opacity: 1
|
|
156
|
+
} : void 0
|
|
157
|
+
};
|
|
158
|
+
} : void 0,
|
|
132
159
|
value: currentValue.toDate(),
|
|
133
160
|
onChange: calendarChange,
|
|
134
161
|
withCellSpacing: false,
|
|
135
|
-
size: "sm"
|
|
162
|
+
size: "sm",
|
|
163
|
+
styles: futureOnly ? (theme) => ({
|
|
164
|
+
day: {
|
|
165
|
+
"&[data-disabled]": {
|
|
166
|
+
color: `${theme.colors.carbon[4]} !important`,
|
|
167
|
+
opacity: 1,
|
|
168
|
+
'[data-mantine-color-scheme="dark"] &': {
|
|
169
|
+
color: `${theme.colors.carbon[5]} !important`
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
"&[data-outside]": {
|
|
173
|
+
color: theme.colors.carbon[6],
|
|
174
|
+
opacity: 1,
|
|
175
|
+
'[data-mantine-color-scheme="dark"] &': {
|
|
176
|
+
color: theme.colors.carbon[7]
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
"&[data-today]:not([data-selected])": {
|
|
180
|
+
border: 0
|
|
181
|
+
},
|
|
182
|
+
"&[data-selected]": {
|
|
183
|
+
backgroundColor: theme.colors.carbon[8],
|
|
184
|
+
color: theme.white
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}) : void 0
|
|
136
188
|
}
|
|
137
189
|
),
|
|
138
190
|
/* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
|
|
@@ -212,7 +264,7 @@ const DateTimePicker = ({
|
|
|
212
264
|
currentValue,
|
|
213
265
|
currentValueChangedBy,
|
|
214
266
|
onChange: timeScrollPickerChange,
|
|
215
|
-
start:
|
|
267
|
+
start: minimumDate.toDate(),
|
|
216
268
|
end: endDate
|
|
217
269
|
}
|
|
218
270
|
)
|
|
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
|
|
|
32
32
|
import { DateTimePickerProps } from './types.cjs';
|
|
33
33
|
export type { DateTimePickerProps } from './types.cjs';
|
|
34
34
|
export { useDateTimePicker } from './helpers.cjs';
|
|
35
|
-
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
35
|
+
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
36
36
|
export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
|
|
37
37
|
defaultValue?: string;
|
|
38
38
|
/**
|
|
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
|
|
|
32
32
|
import { DateTimePickerProps } from './types.mjs';
|
|
33
33
|
export type { DateTimePickerProps } from './types.mjs';
|
|
34
34
|
export { useDateTimePicker } from './helpers.mjs';
|
|
35
|
-
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
35
|
+
export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
36
36
|
export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
|
|
37
37
|
defaultValue?: string;
|
|
38
38
|
/**
|
|
@@ -22,12 +22,15 @@ import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
|
|
|
22
22
|
import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
|
|
23
23
|
import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
|
|
24
24
|
import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
|
|
25
|
+
const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
|
|
25
26
|
const DateTimePicker = ({
|
|
26
27
|
placeholder = "Select time",
|
|
27
28
|
format = DEFAULT_TIME_FORMAT,
|
|
28
29
|
formatter,
|
|
29
30
|
defaultValue,
|
|
30
31
|
value,
|
|
32
|
+
today = /* @__PURE__ */ new Date(),
|
|
33
|
+
futureOnly = false,
|
|
31
34
|
startDate = dayjs().subtract(10, "year").toDate(),
|
|
32
35
|
endDate = dayjs().add(10, "year").toDate(),
|
|
33
36
|
onChange,
|
|
@@ -39,6 +42,10 @@ const DateTimePicker = ({
|
|
|
39
42
|
footer
|
|
40
43
|
}) => {
|
|
41
44
|
const [opened, { close, open }] = useDisclosure(false);
|
|
45
|
+
const currentDay = dayjs(today).startOf("day");
|
|
46
|
+
const minimumDate = futureOnly ? dayjs.max(dayjs(startDate), dayjs(today)) : dayjs(startDate);
|
|
47
|
+
const initialCalendarDate = getInitialCalendarDate(currentDay);
|
|
48
|
+
const [calendarDate, setCalendarDate] = useState(initialCalendarDate.toDate());
|
|
42
49
|
const [currentValue, setCurrentValue] = useUncontrolled({
|
|
43
50
|
value: value ? dayjs(value) : void 0,
|
|
44
51
|
defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
|
|
@@ -55,8 +62,8 @@ const DateTimePicker = ({
|
|
|
55
62
|
if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
|
|
56
63
|
return;
|
|
57
64
|
}
|
|
58
|
-
if (
|
|
59
|
-
next =
|
|
65
|
+
if (next.isBefore(minimumDate)) {
|
|
66
|
+
next = minimumDate;
|
|
60
67
|
} else if (endDate && next.isAfter(endDate)) {
|
|
61
68
|
next = dayjs(endDate);
|
|
62
69
|
}
|
|
@@ -76,6 +83,9 @@ const DateTimePicker = ({
|
|
|
76
83
|
const calendarChange = useMemoizedFn((v) => {
|
|
77
84
|
let next = currentValue;
|
|
78
85
|
next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
|
|
86
|
+
if (futureOnly) {
|
|
87
|
+
setCalendarDate(v);
|
|
88
|
+
}
|
|
79
89
|
updateCurrentValue(next, "calendar");
|
|
80
90
|
});
|
|
81
91
|
const timeInputChange = useMemoizedFn((e) => {
|
|
@@ -101,6 +111,9 @@ const DateTimePicker = ({
|
|
|
101
111
|
closeOnClickOutside: true,
|
|
102
112
|
onChange: (opened2) => {
|
|
103
113
|
if (opened2) {
|
|
114
|
+
if (futureOnly) {
|
|
115
|
+
setCalendarDate(getInitialCalendarDate(currentDay).toDate());
|
|
116
|
+
}
|
|
104
117
|
open();
|
|
105
118
|
} else {
|
|
106
119
|
close();
|
|
@@ -125,12 +138,51 @@ const DateTimePicker = ({
|
|
|
125
138
|
/* @__PURE__ */ jsx(
|
|
126
139
|
DatePicker,
|
|
127
140
|
{
|
|
128
|
-
|
|
141
|
+
date: futureOnly ? calendarDate : void 0,
|
|
142
|
+
onDateChange: futureOnly ? setCalendarDate : void 0,
|
|
143
|
+
minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
|
|
129
144
|
maxDate: endDate,
|
|
145
|
+
getDayProps: futureOnly ? (date) => {
|
|
146
|
+
const day = dayjs(date);
|
|
147
|
+
const isCurrentDay = day.isSame(currentDay, "day");
|
|
148
|
+
const isSelected = day.isSame(currentValue, "day");
|
|
149
|
+
return {
|
|
150
|
+
style: isCurrentDay && !isSelected ? {
|
|
151
|
+
border: "1px solid var(--mantine-color-carbon-8)",
|
|
152
|
+
color: "var(--mantine-color-carbon-8)",
|
|
153
|
+
opacity: 1
|
|
154
|
+
} : void 0
|
|
155
|
+
};
|
|
156
|
+
} : void 0,
|
|
130
157
|
value: currentValue.toDate(),
|
|
131
158
|
onChange: calendarChange,
|
|
132
159
|
withCellSpacing: false,
|
|
133
|
-
size: "sm"
|
|
160
|
+
size: "sm",
|
|
161
|
+
styles: futureOnly ? (theme) => ({
|
|
162
|
+
day: {
|
|
163
|
+
"&[data-disabled]": {
|
|
164
|
+
color: `${theme.colors.carbon[4]} !important`,
|
|
165
|
+
opacity: 1,
|
|
166
|
+
'[data-mantine-color-scheme="dark"] &': {
|
|
167
|
+
color: `${theme.colors.carbon[5]} !important`
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"&[data-outside]": {
|
|
171
|
+
color: theme.colors.carbon[6],
|
|
172
|
+
opacity: 1,
|
|
173
|
+
'[data-mantine-color-scheme="dark"] &': {
|
|
174
|
+
color: theme.colors.carbon[7]
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
"&[data-today]:not([data-selected])": {
|
|
178
|
+
border: 0
|
|
179
|
+
},
|
|
180
|
+
"&[data-selected]": {
|
|
181
|
+
backgroundColor: theme.colors.carbon[8],
|
|
182
|
+
color: theme.white
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}) : void 0
|
|
134
186
|
}
|
|
135
187
|
),
|
|
136
188
|
/* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
|
|
@@ -210,7 +262,7 @@ const DateTimePicker = ({
|
|
|
210
262
|
currentValue,
|
|
211
263
|
currentValueChangedBy,
|
|
212
264
|
onChange: timeScrollPickerChange,
|
|
213
|
-
start:
|
|
265
|
+
start: minimumDate.toDate(),
|
|
214
266
|
end: endDate
|
|
215
267
|
}
|
|
216
268
|
)
|
|
@@ -52,6 +52,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
|
|
|
52
52
|
utcOffset?: number;
|
|
53
53
|
defaultValue?: Date;
|
|
54
54
|
value?: Date;
|
|
55
|
+
/**
|
|
56
|
+
* The current date and time used by `futureOnly` mode.
|
|
57
|
+
* Pass the organization time when the picker is displayed in an organization timezone.
|
|
58
|
+
* @default new Date()
|
|
59
|
+
*/
|
|
60
|
+
today?: Date;
|
|
61
|
+
/**
|
|
62
|
+
* Enables future-date selection behavior without changing existing DateTimePicker usages.
|
|
63
|
+
* Past values are disabled and the calendar opens from today (or next month on month-end).
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
futureOnly?: boolean;
|
|
55
67
|
startDate?: Date;
|
|
56
68
|
endDate?: Date;
|
|
57
69
|
onChange?: (val: Date) => void;
|
|
@@ -52,6 +52,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
|
|
|
52
52
|
utcOffset?: number;
|
|
53
53
|
defaultValue?: Date;
|
|
54
54
|
value?: Date;
|
|
55
|
+
/**
|
|
56
|
+
* The current date and time used by `futureOnly` mode.
|
|
57
|
+
* Pass the organization time when the picker is displayed in an organization timezone.
|
|
58
|
+
* @default new Date()
|
|
59
|
+
*/
|
|
60
|
+
today?: Date;
|
|
61
|
+
/**
|
|
62
|
+
* Enables future-date selection behavior without changing existing DateTimePicker usages.
|
|
63
|
+
* Past values are disabled and the calendar opens from today (or next month on month-end).
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
66
|
+
futureOnly?: boolean;
|
|
55
67
|
startDate?: Date;
|
|
56
68
|
endDate?: Date;
|
|
57
69
|
onChange?: (val: Date) => void;
|