@initbase/react-datetime-picker 1.0.0
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/dist/datetime-picker.css +369 -0
- package/dist/index.d.mts +94 -0
- package/dist/index.d.ts +94 -0
- package/dist/index.js +1226 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1194 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +38 -0
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
.rdp-wrapper {
|
|
2
|
+
--rdp-font-family: system-ui, -apple-system, sans-serif;
|
|
3
|
+
--rdp-font-size: 14px;
|
|
4
|
+
--rdp-primary: #2563eb;
|
|
5
|
+
--rdp-primary-hover: #1d4ed8;
|
|
6
|
+
--rdp-primary-light: #dbeafe;
|
|
7
|
+
--rdp-bg: #ffffff;
|
|
8
|
+
--rdp-border: #d1d5db;
|
|
9
|
+
--rdp-border-radius: 8px;
|
|
10
|
+
--rdp-text: #111827;
|
|
11
|
+
--rdp-text-muted: #6b7280;
|
|
12
|
+
--rdp-text-disabled: #d1d5db;
|
|
13
|
+
--rdp-cell-size: 36px;
|
|
14
|
+
--rdp-day-hover-bg: #f3f4f6;
|
|
15
|
+
--rdp-range-bg: #dbeafe;
|
|
16
|
+
--rdp-today-border: #2563eb;
|
|
17
|
+
--rdp-outside-month: #9ca3af;
|
|
18
|
+
--rdp-popover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
19
|
+
--rdp-popover-z-index: 1000;
|
|
20
|
+
--rdp-time-column-height: 200px;
|
|
21
|
+
--rdp-time-item-height: 32px;
|
|
22
|
+
--rdp-transition: 150ms ease;
|
|
23
|
+
|
|
24
|
+
position: relative;
|
|
25
|
+
display: inline-block;
|
|
26
|
+
font-family: var(--rdp-font-family);
|
|
27
|
+
font-size: var(--rdp-font-size);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.rdp-trigger {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
gap: 6px;
|
|
34
|
+
width: 100%;
|
|
35
|
+
padding: 6px 10px;
|
|
36
|
+
font-size: var(--rdp-font-size);
|
|
37
|
+
font-family: var(--rdp-font-family);
|
|
38
|
+
color: var(--rdp-text);
|
|
39
|
+
background: var(--rdp-bg);
|
|
40
|
+
border: 1px solid var(--rdp-border);
|
|
41
|
+
border-radius: var(--rdp-border-radius);
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
outline: none;
|
|
44
|
+
transition: border-color var(--rdp-transition), box-shadow var(--rdp-transition);
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.rdp-trigger:focus {
|
|
49
|
+
border-color: var(--rdp-primary);
|
|
50
|
+
box-shadow: 0 0 0 2px var(--rdp-primary-light);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.rdp-trigger::placeholder {
|
|
54
|
+
color: var(--rdp-text-muted);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.rdp-trigger-icon {
|
|
58
|
+
width: 16px;
|
|
59
|
+
height: 16px;
|
|
60
|
+
color: var(--rdp-text-muted);
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.rdp-trigger--range {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 8px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.rdp-trigger--range input {
|
|
71
|
+
flex: 1;
|
|
72
|
+
min-width: 0;
|
|
73
|
+
border: none;
|
|
74
|
+
outline: none;
|
|
75
|
+
background: transparent;
|
|
76
|
+
font-family: inherit;
|
|
77
|
+
font-size: inherit;
|
|
78
|
+
color: inherit;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
padding: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.rdp-trigger--range input::placeholder {
|
|
84
|
+
color: var(--rdp-text-muted);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.rdp-trigger-range-separator {
|
|
88
|
+
color: var(--rdp-text-muted);
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.rdp-popover {
|
|
93
|
+
position: absolute;
|
|
94
|
+
z-index: var(--rdp-popover-z-index);
|
|
95
|
+
background: var(--rdp-bg);
|
|
96
|
+
border: 1px solid var(--rdp-border);
|
|
97
|
+
border-radius: var(--rdp-border-radius);
|
|
98
|
+
box-shadow: var(--rdp-popover-shadow);
|
|
99
|
+
padding: 12px;
|
|
100
|
+
box-sizing: border-box;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.rdp-popover--bottom {
|
|
104
|
+
top: calc(100% + 4px);
|
|
105
|
+
left: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.rdp-popover--top {
|
|
109
|
+
bottom: calc(100% + 4px);
|
|
110
|
+
left: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.rdp-popover--left {
|
|
114
|
+
top: 0;
|
|
115
|
+
right: calc(100% + 4px);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.rdp-popover--right {
|
|
119
|
+
top: 0;
|
|
120
|
+
left: calc(100% + 4px);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.rdp-calendar {
|
|
124
|
+
user-select: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.rdp-calendar-header {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: space-between;
|
|
131
|
+
margin-bottom: 8px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.rdp-calendar-month-year {
|
|
135
|
+
font-weight: 600;
|
|
136
|
+
font-size: var(--rdp-font-size);
|
|
137
|
+
color: var(--rdp-text);
|
|
138
|
+
text-align: center;
|
|
139
|
+
flex: 1;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.rdp-calendar-nav-btn {
|
|
143
|
+
display: inline-flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
width: 28px;
|
|
147
|
+
height: 28px;
|
|
148
|
+
border: none;
|
|
149
|
+
border-radius: 6px;
|
|
150
|
+
background: transparent;
|
|
151
|
+
color: var(--rdp-text-muted);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
transition: background var(--rdp-transition), color var(--rdp-transition);
|
|
154
|
+
padding: 0;
|
|
155
|
+
font-size: 16px;
|
|
156
|
+
line-height: 1;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.rdp-calendar-nav-btn:hover {
|
|
160
|
+
background: var(--rdp-day-hover-bg);
|
|
161
|
+
color: var(--rdp-text);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.rdp-calendar-nav-btn:disabled {
|
|
165
|
+
color: var(--rdp-text-disabled);
|
|
166
|
+
cursor: default;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.rdp-calendar-nav-btn svg {
|
|
170
|
+
width: 16px;
|
|
171
|
+
height: 16px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.rdp-calendar-grid {
|
|
175
|
+
display: grid;
|
|
176
|
+
grid-template-columns: repeat(7, var(--rdp-cell-size));
|
|
177
|
+
gap: 2px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.rdp-calendar-weekday {
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
height: var(--rdp-cell-size);
|
|
185
|
+
font-size: 12px;
|
|
186
|
+
font-weight: 500;
|
|
187
|
+
color: var(--rdp-text-muted);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.rdp-calendar-day {
|
|
191
|
+
display: flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
justify-content: center;
|
|
194
|
+
width: var(--rdp-cell-size);
|
|
195
|
+
height: var(--rdp-cell-size);
|
|
196
|
+
border: none;
|
|
197
|
+
border-radius: 50%;
|
|
198
|
+
background: transparent;
|
|
199
|
+
color: var(--rdp-text);
|
|
200
|
+
font-size: 13px;
|
|
201
|
+
font-family: var(--rdp-font-family);
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
transition: background var(--rdp-transition), color var(--rdp-transition);
|
|
204
|
+
position: relative;
|
|
205
|
+
padding: 0;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.rdp-calendar-day:hover:not(:disabled):not(.rdp-calendar-day--selected):not(.rdp-calendar-day--range-start):not(.rdp-calendar-day--range-end) {
|
|
209
|
+
background: var(--rdp-day-hover-bg);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.rdp-calendar-day--outside {
|
|
213
|
+
color: var(--rdp-outside-month);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.rdp-calendar-day--today:not(.rdp-calendar-day--selected):not(.rdp-calendar-day--range-start):not(.rdp-calendar-day--range-end) {
|
|
217
|
+
color: var(--rdp-primary);
|
|
218
|
+
font-weight: 600;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.rdp-calendar-day--selected,
|
|
222
|
+
.rdp-calendar-day--range-start,
|
|
223
|
+
.rdp-calendar-day--range-end {
|
|
224
|
+
background: var(--rdp-primary);
|
|
225
|
+
color: #ffffff;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.rdp-calendar-day--selected:hover,
|
|
229
|
+
.rdp-calendar-day--range-start:hover,
|
|
230
|
+
.rdp-calendar-day--range-end:hover {
|
|
231
|
+
background: var(--rdp-primary-hover);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.rdp-calendar-day--in-range {
|
|
235
|
+
background: var(--rdp-range-bg);
|
|
236
|
+
border-radius: 0;
|
|
237
|
+
color: var(--rdp-primary);
|
|
238
|
+
font-weight: 500;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.rdp-calendar-day--range-start {
|
|
242
|
+
border-radius: 50% 0 0 50%;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.rdp-calendar-day--range-end {
|
|
246
|
+
border-radius: 0 50% 50% 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.rdp-calendar-day--range-start.rdp-calendar-day--range-end {
|
|
250
|
+
border-radius: 50%;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.rdp-calendar-day:disabled {
|
|
254
|
+
color: var(--rdp-text-disabled);
|
|
255
|
+
cursor: default;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.rdp-calendar-day:disabled:hover {
|
|
259
|
+
background: transparent;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.rdp-time-picker {
|
|
263
|
+
display: flex;
|
|
264
|
+
gap: 4px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.rdp-time-column {
|
|
268
|
+
display: flex;
|
|
269
|
+
flex-direction: column;
|
|
270
|
+
overflow-y: auto;
|
|
271
|
+
max-height: var(--rdp-time-column-height);
|
|
272
|
+
border: 1px solid var(--rdp-border);
|
|
273
|
+
border-radius: 6px;
|
|
274
|
+
scrollbar-width: thin;
|
|
275
|
+
scrollbar-color: var(--rdp-border) transparent;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.rdp-time-column::-webkit-scrollbar {
|
|
279
|
+
width: 4px;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.rdp-time-column::-webkit-scrollbar-track {
|
|
283
|
+
background: transparent;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.rdp-time-column::-webkit-scrollbar-thumb {
|
|
287
|
+
background: var(--rdp-border);
|
|
288
|
+
border-radius: 2px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.rdp-time-item {
|
|
292
|
+
display: flex;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
height: var(--rdp-time-item-height);
|
|
296
|
+
padding: 0 12px;
|
|
297
|
+
font-size: 13px;
|
|
298
|
+
font-family: var(--rdp-font-family);
|
|
299
|
+
color: var(--rdp-text);
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
border: none;
|
|
302
|
+
background: transparent;
|
|
303
|
+
transition: background var(--rdp-transition);
|
|
304
|
+
min-width: 44px;
|
|
305
|
+
flex-shrink: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.rdp-time-item:hover {
|
|
309
|
+
background: var(--rdp-day-hover-bg);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.rdp-time-item--selected {
|
|
313
|
+
background: var(--rdp-primary-light);
|
|
314
|
+
color: var(--rdp-primary);
|
|
315
|
+
font-weight: 600;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.rdp-time-item--selected:hover {
|
|
319
|
+
background: var(--rdp-primary-light);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.rdp-time-item:disabled {
|
|
323
|
+
color: var(--rdp-text-disabled);
|
|
324
|
+
cursor: default;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.rdp-time-item:disabled:hover {
|
|
328
|
+
background: transparent;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.rdp-time-label {
|
|
332
|
+
font-size: 11px;
|
|
333
|
+
color: var(--rdp-text-muted);
|
|
334
|
+
text-align: center;
|
|
335
|
+
padding: 2px 0;
|
|
336
|
+
font-weight: 500;
|
|
337
|
+
text-transform: uppercase;
|
|
338
|
+
letter-spacing: 0.5px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.rdp-datetime-layout {
|
|
342
|
+
display: flex;
|
|
343
|
+
gap: 16px;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.rdp-datetime-layout .rdp-calendar {
|
|
347
|
+
flex-shrink: 0;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.rdp-datetime-range-panel {
|
|
351
|
+
display: flex;
|
|
352
|
+
flex-direction: column;
|
|
353
|
+
gap: 8px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.rdp-datetime-range-label {
|
|
357
|
+
font-size: 12px;
|
|
358
|
+
font-weight: 600;
|
|
359
|
+
color: var(--rdp-text-muted);
|
|
360
|
+
text-transform: uppercase;
|
|
361
|
+
letter-spacing: 0.5px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
@media (max-width: 600px) {
|
|
365
|
+
.rdp-datetime-layout {
|
|
366
|
+
flex-direction: column;
|
|
367
|
+
gap: 8px;
|
|
368
|
+
}
|
|
369
|
+
}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
type DateValue = Date | null;
|
|
5
|
+
type DateRangeValue = [Date, Date] | [Date, null] | [null, Date] | [null, null];
|
|
6
|
+
type PopoverPosition = "top" | "bottom" | "left" | "right" | "flexible";
|
|
7
|
+
interface SingleTriggerProps {
|
|
8
|
+
value: DateValue;
|
|
9
|
+
displayValue: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
onClick: () => void;
|
|
12
|
+
open: boolean;
|
|
13
|
+
onClose: () => void;
|
|
14
|
+
}
|
|
15
|
+
interface RangeTriggerProps {
|
|
16
|
+
value: DateRangeValue;
|
|
17
|
+
displayValues: [string, string];
|
|
18
|
+
placeholder?: [string, string];
|
|
19
|
+
onClick: () => void;
|
|
20
|
+
open: boolean;
|
|
21
|
+
onClose: () => void;
|
|
22
|
+
}
|
|
23
|
+
interface BasePickerProps {
|
|
24
|
+
value?: DateValue;
|
|
25
|
+
onChange?: (value: DateValue) => void;
|
|
26
|
+
defaultValue?: DateValue;
|
|
27
|
+
locale?: string;
|
|
28
|
+
className?: string;
|
|
29
|
+
style?: React.CSSProperties;
|
|
30
|
+
placeholder?: string;
|
|
31
|
+
position?: PopoverPosition;
|
|
32
|
+
renderTrigger?: (props: SingleTriggerProps) => React.ReactNode;
|
|
33
|
+
}
|
|
34
|
+
interface BaseRangePickerProps {
|
|
35
|
+
value?: DateRangeValue;
|
|
36
|
+
onChange?: (value: DateRangeValue) => void;
|
|
37
|
+
defaultValue?: DateRangeValue;
|
|
38
|
+
locale?: string;
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: React.CSSProperties;
|
|
41
|
+
placeholder?: [string, string];
|
|
42
|
+
position?: PopoverPosition;
|
|
43
|
+
renderTrigger?: (props: RangeTriggerProps) => React.ReactNode;
|
|
44
|
+
}
|
|
45
|
+
interface DatePickerProps extends BasePickerProps {
|
|
46
|
+
min?: Date;
|
|
47
|
+
max?: Date;
|
|
48
|
+
}
|
|
49
|
+
interface TimePickerProps extends BasePickerProps {
|
|
50
|
+
step?: number;
|
|
51
|
+
showSeconds?: boolean;
|
|
52
|
+
timeFormat?: "12h" | "24h";
|
|
53
|
+
min?: Date;
|
|
54
|
+
max?: Date;
|
|
55
|
+
}
|
|
56
|
+
interface DateTimePickerProps extends BasePickerProps {
|
|
57
|
+
step?: number;
|
|
58
|
+
showSeconds?: boolean;
|
|
59
|
+
timeFormat?: "12h" | "24h";
|
|
60
|
+
min?: Date;
|
|
61
|
+
max?: Date;
|
|
62
|
+
}
|
|
63
|
+
interface DateRangePickerProps extends BaseRangePickerProps {
|
|
64
|
+
min?: Date;
|
|
65
|
+
max?: Date;
|
|
66
|
+
}
|
|
67
|
+
interface TimeRangePickerProps extends BaseRangePickerProps {
|
|
68
|
+
step?: number;
|
|
69
|
+
showSeconds?: boolean;
|
|
70
|
+
timeFormat?: "12h" | "24h";
|
|
71
|
+
min?: Date;
|
|
72
|
+
max?: Date;
|
|
73
|
+
}
|
|
74
|
+
interface DateTimeRangePickerProps extends BaseRangePickerProps {
|
|
75
|
+
step?: number;
|
|
76
|
+
showSeconds?: boolean;
|
|
77
|
+
timeFormat?: "12h" | "24h";
|
|
78
|
+
min?: Date;
|
|
79
|
+
max?: Date;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
declare function DatePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, min, max, renderTrigger, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
83
|
+
|
|
84
|
+
declare function TimePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
85
|
+
|
|
86
|
+
declare function DateTimePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
|
|
87
|
+
|
|
88
|
+
declare function DateRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, min, max, renderTrigger, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
89
|
+
|
|
90
|
+
declare function TimeRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: TimeRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
declare function DateTimeRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: DateTimeRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
94
|
+
export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, DateTimePicker, type DateTimePickerProps, DateTimeRangePicker, type DateTimeRangePickerProps, type DateValue, type PopoverPosition, type RangeTriggerProps, type SingleTriggerProps, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
type DateValue = Date | null;
|
|
5
|
+
type DateRangeValue = [Date, Date] | [Date, null] | [null, Date] | [null, null];
|
|
6
|
+
type PopoverPosition = "top" | "bottom" | "left" | "right" | "flexible";
|
|
7
|
+
interface SingleTriggerProps {
|
|
8
|
+
value: DateValue;
|
|
9
|
+
displayValue: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
onClick: () => void;
|
|
12
|
+
open: boolean;
|
|
13
|
+
onClose: () => void;
|
|
14
|
+
}
|
|
15
|
+
interface RangeTriggerProps {
|
|
16
|
+
value: DateRangeValue;
|
|
17
|
+
displayValues: [string, string];
|
|
18
|
+
placeholder?: [string, string];
|
|
19
|
+
onClick: () => void;
|
|
20
|
+
open: boolean;
|
|
21
|
+
onClose: () => void;
|
|
22
|
+
}
|
|
23
|
+
interface BasePickerProps {
|
|
24
|
+
value?: DateValue;
|
|
25
|
+
onChange?: (value: DateValue) => void;
|
|
26
|
+
defaultValue?: DateValue;
|
|
27
|
+
locale?: string;
|
|
28
|
+
className?: string;
|
|
29
|
+
style?: React.CSSProperties;
|
|
30
|
+
placeholder?: string;
|
|
31
|
+
position?: PopoverPosition;
|
|
32
|
+
renderTrigger?: (props: SingleTriggerProps) => React.ReactNode;
|
|
33
|
+
}
|
|
34
|
+
interface BaseRangePickerProps {
|
|
35
|
+
value?: DateRangeValue;
|
|
36
|
+
onChange?: (value: DateRangeValue) => void;
|
|
37
|
+
defaultValue?: DateRangeValue;
|
|
38
|
+
locale?: string;
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: React.CSSProperties;
|
|
41
|
+
placeholder?: [string, string];
|
|
42
|
+
position?: PopoverPosition;
|
|
43
|
+
renderTrigger?: (props: RangeTriggerProps) => React.ReactNode;
|
|
44
|
+
}
|
|
45
|
+
interface DatePickerProps extends BasePickerProps {
|
|
46
|
+
min?: Date;
|
|
47
|
+
max?: Date;
|
|
48
|
+
}
|
|
49
|
+
interface TimePickerProps extends BasePickerProps {
|
|
50
|
+
step?: number;
|
|
51
|
+
showSeconds?: boolean;
|
|
52
|
+
timeFormat?: "12h" | "24h";
|
|
53
|
+
min?: Date;
|
|
54
|
+
max?: Date;
|
|
55
|
+
}
|
|
56
|
+
interface DateTimePickerProps extends BasePickerProps {
|
|
57
|
+
step?: number;
|
|
58
|
+
showSeconds?: boolean;
|
|
59
|
+
timeFormat?: "12h" | "24h";
|
|
60
|
+
min?: Date;
|
|
61
|
+
max?: Date;
|
|
62
|
+
}
|
|
63
|
+
interface DateRangePickerProps extends BaseRangePickerProps {
|
|
64
|
+
min?: Date;
|
|
65
|
+
max?: Date;
|
|
66
|
+
}
|
|
67
|
+
interface TimeRangePickerProps extends BaseRangePickerProps {
|
|
68
|
+
step?: number;
|
|
69
|
+
showSeconds?: boolean;
|
|
70
|
+
timeFormat?: "12h" | "24h";
|
|
71
|
+
min?: Date;
|
|
72
|
+
max?: Date;
|
|
73
|
+
}
|
|
74
|
+
interface DateTimeRangePickerProps extends BaseRangePickerProps {
|
|
75
|
+
step?: number;
|
|
76
|
+
showSeconds?: boolean;
|
|
77
|
+
timeFormat?: "12h" | "24h";
|
|
78
|
+
min?: Date;
|
|
79
|
+
max?: Date;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
declare function DatePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, min, max, renderTrigger, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
83
|
+
|
|
84
|
+
declare function TimePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
85
|
+
|
|
86
|
+
declare function DateTimePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
|
|
87
|
+
|
|
88
|
+
declare function DateRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, min, max, renderTrigger, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
89
|
+
|
|
90
|
+
declare function TimeRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: TimeRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
declare function DateTimeRangePicker({ value: controlledValue, onChange, defaultValue, locale, className, style, placeholder, position, step, showSeconds, timeFormat, min, max, renderTrigger, }: DateTimeRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
94
|
+
export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, DateTimePicker, type DateTimePickerProps, DateTimeRangePicker, type DateTimeRangePickerProps, type DateValue, type PopoverPosition, type RangeTriggerProps, type SingleTriggerProps, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps };
|