A datetime picker built on top of shadcn-ui and no additional library needed.
1"use client";
2import { Button, buttonVariants } from "@/components/ui/button";
3import type { CalendarProps } from "@/components/ui/calendar";
4import { Input } from "@/components/ui/input";
5import {
6 Popover,
7 PopoverContent,
8 PopoverTrigger,
9} from "@/components/ui/popover";
10import { cn } from "@/lib/utils";
11import { add, format } from "date-fns";
12import { type Locale, enUS } from "date-fns/locale";
13import {
14 Calendar as CalendarIcon,
15 ChevronLeft,
16 ChevronRight,
17 Clock,
18} from "lucide-react";
19import * as React from "react";
20import { useImperativeHandle, useRef } from "react";
21
22import {
23 Select,
24 SelectContent,
25 SelectItem,
26 SelectTrigger,
27 SelectValue,
28} from "@/components/ui/select";
29import { DayPicker } from "react-day-picker";
30
31// ---------- utils start ----------
32/**
33 * regular expression to check for valid hour format (01-23)
34 */
35function isValidHour(value: string) {
36 return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
37}
38
39/**
40 * regular expression to check for valid 12 hour format (01-12)
41 */
42function isValid12Hour(value: string) {
43 return /^(0[1-9]|1[0-2])$/.test(value);
44}
45
46/**
47 * regular expression to check for valid minute format (00-59)
48 */
49function isValidMinuteOrSecond(value: string) {
50 return /^[0-5][0-9]$/.test(value);
51}
52
53type GetValidNumberConfig = { max: number; min?: number; loop?: boolean };
54
55function getValidNumber(
56 value: string,
57 { max, min = 0, loop = false }: GetValidNumberConfig
58) {
59 let numericValue = Number.parseInt(value, 10);
60
61 if (!Number.isNaN(numericValue)) {
62 if (!loop) {
63 if (numericValue > max) numericValue = max;
64 if (numericValue < min) numericValue = min;
65 } else {
66 if (numericValue > max) numericValue = min;
67 if (numericValue < min) numericValue = max;
68 }
69 return numericValue.toString().padStart(2, "0");
70 }
71
72 return "00";
73}
74
75function getValidHour(value: string) {
76 if (isValidHour(value)) return value;
77 return getValidNumber(value, { max: 23 });
78}
79
80function getValid12Hour(value: string) {
81 if (isValid12Hour(value)) return value;
82 return getValidNumber(value, { min: 1, max: 12 });
83}
84
85function getValidMinuteOrSecond(value: string) {
86 if (isValidMinuteOrSecond(value)) return value;
87 return getValidNumber(value, { max: 59 });
88}
89
90type GetValidArrowNumberConfig = {
91 min: number;
92 max: number;
93 step: number;
94};
95
96function getValidArrowNumber(
97 value: string,
98 { min, max, step }: GetValidArrowNumberConfig
99) {
100 let numericValue = Number.parseInt(value, 10);
101 if (!Number.isNaN(numericValue)) {
102 numericValue += step;
103 return getValidNumber(String(numericValue), { min, max, loop: true });
104 }
105 return "00";
106}
107
108function getValidArrowHour(value: string, step: number) {
109 return getValidArrowNumber(value, { min: 0, max: 23, step });
110}
111
112function getValidArrow12Hour(value: string, step: number) {
113 return getValidArrowNumber(value, { min: 1, max: 12, step });
114}
115
116function getValidArrowMinuteOrSecond(value: string, step: number) {
117 return getValidArrowNumber(value, { min: 0, max: 59, step });
118}
119
120function setMinutes(date: Date, value: string) {
121 const minutes = getValidMinuteOrSecond(value);
122 date.setMinutes(Number.parseInt(minutes, 10));
123 return date;
124}
125
126function setSeconds(date: Date, value: string) {
127 const seconds = getValidMinuteOrSecond(value);
128 date.setSeconds(Number.parseInt(seconds, 10));
129 return date;
130}
131
132function setHours(date: Date, value: string) {
133 const hours = getValidHour(value);
134 date.setHours(Number.parseInt(hours, 10));
135 return date;
136}
137
138function set12Hours(date: Date, value: string, period: Period) {
139 const hours = Number.parseInt(getValid12Hour(value), 10);
140 const convertedHours = convert12HourTo24Hour(hours, period);
141 date.setHours(convertedHours);
142 return date;
143}
144
145type TimePickerType = "minutes" | "seconds" | "hours" | "12hours";
146type Period = "AM" | "PM";
147
148function setDateByType(
149 date: Date,
150 value: string,
151 type: TimePickerType,
152 period?: Period
153) {
154 switch (type) {
155 case "minutes":
156 return setMinutes(date, value);
157 case "seconds":
158 return setSeconds(date, value);
159 case "hours":
160 return setHours(date, value);
161 case "12hours": {
162 if (!period) return date;
163 return set12Hours(date, value, period);
164 }
165 default:
166 return date;
167 }
168}
169
170function getDateByType(date: Date | null, type: TimePickerType) {
171 if (!date) return "00";
172 switch (type) {
173 case "minutes":
174 return getValidMinuteOrSecond(String(date.getMinutes()));
175 case "seconds":
176 return getValidMinuteOrSecond(String(date.getSeconds()));
177 case "hours":
178 return getValidHour(String(date.getHours()));
179 case "12hours":
180 return getValid12Hour(String(display12HourValue(date.getHours())));
181 default:
182 return "00";
183 }
184}
185
186function getArrowByType(value: string, step: number, type: TimePickerType) {
187 switch (type) {
188 case "minutes":
189 return getValidArrowMinuteOrSecond(value, step);
190 case "seconds":
191 return getValidArrowMinuteOrSecond(value, step);
192 case "hours":
193 return getValidArrowHour(value, step);
194 case "12hours":
195 return getValidArrow12Hour(value, step);
196 default:
197 return "00";
198 }
199}
200
201/**
202 * handles value change of 12-hour input
203 * 12:00 PM is 12:00
204 * 12:00 AM is 00:00
205 */
206function convert12HourTo24Hour(hour: number, period: Period) {
207 if (period === "PM") {
208 if (hour <= 11) {
209 return hour + 12;
210 }
211 return hour;
212 }
213
214 if (period === "AM") {
215 if (hour === 12) return 0;
216 return hour;
217 }
218 return hour;
219}
220
221/**
222 * time is stored in the 24-hour form,
223 * but needs to be displayed to the user
224 * in its 12-hour representation
225 */
226function display12HourValue(hours: number) {
227 if (hours === 0 || hours === 12) return "12";
228 if (hours >= 22) return `${hours - 12}`;
229 if (hours % 12 > 9) return `${hours}`;
230 return `0${hours % 12}`;
231}
232
233function genMonths(
234 locale: Pick<Locale, "options" | "localize" | "formatLong">
235) {
236 return Array.from({ length: 12 }, (_, i) => ({
237 value: i,
238 label: format(new Date(2021, i), "MMMM", { locale }),
239 }));
240}
241
242function genYears(yearRange = 50) {
243 const today = new Date();
244 return Array.from({ length: yearRange * 2 + 1 }, (_, i) => ({
245 value: today.getFullYear() - yearRange + i,
246 label: (today.getFullYear() - yearRange + i).toString(),
247 }));
248}
249
250// ---------- utils end ----------
251
252function Calendar({
253 className,
254 classNames,
255 showOutsideDays = true,
256 yearRange = 50,
257 ...props
258}: CalendarProps & { yearRange?: number }) {
259 const MONTHS = React.useMemo(() => {
260 let locale: Pick<Locale, "options" | "localize" | "formatLong"> = enUS;
261 const { options, localize, formatLong } = props.locale || {};
262 if (options && localize && formatLong) {
263 locale = {
264 options,
265 localize,
266 formatLong,
267 };
268 }
269 return genMonths(locale);
270 }, []);
271
272 const YEARS = React.useMemo(() => genYears(yearRange), []);
273
274 return (
275 <DayPicker
276 showOutsideDays={showOutsideDays}
277 className={cn("p-3", className)}
278 classNames={{
279 months:
280 "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center",
281 month: "flex flex-col items-center space-y-4",
282 month_caption: "flex justify-center pt-1 relative items-center",
283 caption_label: "text-sm font-medium",
284 nav: "space-x-1 flex items-center ",
285 button_previous: cn(
286 buttonVariants({ variant: "outline" }),
287 "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5"
288 ),
289 button_next: cn(
290 buttonVariants({ variant: "outline" }),
291 "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5"
292 ),
293 month_grid: "w-full border-collapse space-y-1",
294 weekdays: cn("flex", props.showWeekNumber && "justify-end"),
295 weekday:
296 "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
297 week: "flex w-full mt-2",
298 day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1",
299 day_button: cn(
300 buttonVariants({ variant: "ghost" }),
301 "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"
302 ),
303 range_end: "day-range-end",
304 selected:
305 "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
306 today: "bg-accent text-accent-foreground",
307 outside:
308 "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
309 disabled: "text-muted-foreground opacity-50",
310 range_middle:
311 "aria-selected:bg-accent aria-selected:text-accent-foreground",
312 hidden: "invisible",
313 ...classNames,
314 }}
315 components={{
316 Chevron: ({ ...props }) =>
317 props.orientation === "left" ? (
318 <ChevronLeft className="h-4 w-4" />
319 ) : (
320 <ChevronRight className="h-4 w-4" />
321 ),
322 MonthCaption: ({ calendarMonth }) => {
323 return (
324 <div className="inline-flex gap-2">
325 <Select
326 defaultValue={calendarMonth.date.getMonth().toString()}
327 onValueChange={(value) => {
328 const newDate = new Date(calendarMonth.date);
329 newDate.setMonth(Number.parseInt(value, 10));
330 props.onMonthChange?.(newDate);
331 }}
332 >
333 <SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
334 <SelectValue />
335 </SelectTrigger>
336 <SelectContent>
337 {MONTHS.map((month) => (
338 <SelectItem
339 key={month.value}
340 value={month.value.toString()}
341 >
342 {month.label}
343 </SelectItem>
344 ))}
345 </SelectContent>
346 </Select>
347 <Select
348 defaultValue={calendarMonth.date.getFullYear().toString()}
349 onValueChange={(value) => {
350 const newDate = new Date(calendarMonth.date);
351 newDate.setFullYear(Number.parseInt(value, 10));
352 props.onMonthChange?.(newDate);
353 }}
354 >
355 <SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
356 <SelectValue />
357 </SelectTrigger>
358 <SelectContent>
359 {YEARS.map((year) => (
360 <SelectItem key={year.value} value={year.value.toString()}>
361 {year.label}
362 </SelectItem>
363 ))}
364 </SelectContent>
365 </Select>
366 </div>
367 );
368 },
369 }}
370 {...props}
371 />
372 );
373}
374Calendar.displayName = "Calendar";
375
376interface PeriodSelectorProps {
377 period: Period;
378 setPeriod?: (m: Period) => void;
379 date?: Date | null;
380 onDateChange?: (date: Date | undefined) => void;
381 onRightFocus?: () => void;
382 onLeftFocus?: () => void;
383}
384
385const TimePeriodSelect = React.forwardRef<
386 HTMLButtonElement,
387 PeriodSelectorProps
388>(
389 (
390 { period, setPeriod, date, onDateChange, onLeftFocus, onRightFocus },
391 ref
392 ) => {
393 const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
394 if (e.key === "ArrowRight") onRightFocus?.();
395 if (e.key === "ArrowLeft") onLeftFocus?.();
396 };
397
398 const handleValueChange = (value: Period) => {
399 setPeriod?.(value);
400
401 /**
402 * trigger an update whenever the user switches between AM and PM;
403 * otherwise user must manually change the hour each time
404 */
405 if (date) {
406 const tempDate = new Date(date);
407 const hours = display12HourValue(date.getHours());
408 onDateChange?.(
409 setDateByType(
410 tempDate,
411 hours.toString(),
412 "12hours",
413 period === "AM" ? "PM" : "AM"
414 )
415 );
416 }
417 };
418
419 return (
420 <div className="flex h-10 items-center">
421 <Select
422 defaultValue={period}
423 onValueChange={(value: Period) => handleValueChange(value)}
424 >
425 <SelectTrigger
426 ref={ref}
427 className="w-[65px] focus:bg-accent focus:text-accent-foreground"
428 onKeyDown={handleKeyDown}
429 >
430 <SelectValue />
431 </SelectTrigger>
432 <SelectContent>
433 <SelectItem value="AM">AM</SelectItem>
434 <SelectItem value="PM">PM</SelectItem>
435 </SelectContent>
436 </Select>
437 </div>
438 );
439 }
440);
441
442TimePeriodSelect.displayName = "TimePeriodSelect";
443
444interface TimePickerInputProps
445 extends React.InputHTMLAttributes<HTMLInputElement> {
446 picker: TimePickerType;
447 date?: Date | null;
448 onDateChange?: (date: Date | undefined) => void;
449 period?: Period;
450 onRightFocus?: () => void;
451 onLeftFocus?: () => void;
452}
453
454const TimePickerInput = React.forwardRef<
455 HTMLInputElement,
456 TimePickerInputProps
457>(
458 (
459 {
460 className,
461 type = "tel",
462 value,
463 id,
464 name,
465 date = new Date(new Date().setHours(0, 0, 0, 0)),
466 onDateChange,
467 onChange,
468 onKeyDown,
469 picker,
470 period,
471 onLeftFocus,
472 onRightFocus,
473 ...props
474 },
475 ref
476 ) => {
477 const [flag, setFlag] = React.useState<boolean>(false);
478 const [prevIntKey, setPrevIntKey] = React.useState<string>("0");
479
480 /**
481 * allow the user to enter the second digit within 2 seconds
482 * otherwise start again with entering first digit
483 */
484 React.useEffect(() => {
485 if (flag) {
486 const timer = setTimeout(() => {
487 setFlag(false);
488 }, 2000);
489
490 return () => clearTimeout(timer);
491 }
492 }, [flag]);
493
494 const calculatedValue = React.useMemo(() => {
495 return getDateByType(date, picker);
496 }, [date, picker]);
497
498 const calculateNewValue = (key: string) => {
499 /*
500 * If picker is '12hours' and the first digit is 0, then the second digit is automatically set to 1.
501 * The second entered digit will break the condition and the value will be set to 10-12.
502 */
503 if (picker === "12hours") {
504 if (flag && calculatedValue.slice(1, 2) === "1" && prevIntKey === "0")
505 return `0${key}`;
506 }
507
508 return !flag ? `0${key}` : calculatedValue.slice(1, 2) + key;
509 };
510
511 const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
512 if (e.key === "Tab") return;
513 e.preventDefault();
514 if (e.key === "ArrowRight") onRightFocus?.();
515 if (e.key === "ArrowLeft") onLeftFocus?.();
516 if (["ArrowUp", "ArrowDown"].includes(e.key)) {
517 const step = e.key === "ArrowUp" ? 1 : -1;
518 const newValue = getArrowByType(calculatedValue, step, picker);
519 if (flag) setFlag(false);
520 const tempDate = date ? new Date(date) : new Date();
521 onDateChange?.(setDateByType(tempDate, newValue, picker, period));
522 }
523 if (e.key >= "0" && e.key <= "9") {
524 if (picker === "12hours") setPrevIntKey(e.key);
525
526 const newValue = calculateNewValue(e.key);
527 if (flag) onRightFocus?.();
528 setFlag((prev) => !prev);
529 const tempDate = date ? new Date(date) : new Date();
530 onDateChange?.(setDateByType(tempDate, newValue, picker, period));
531 }
532 };
533
534 return (
535 <Input
536 ref={ref}
537 id={id || picker}
538 name={name || picker}
539 className={cn(
540 "w-[48px] text-center font-mono text-base tabular-nums caret-transparent focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none",
541 className
542 )}
543 value={value || calculatedValue}
544 onChange={(e) => {
545 e.preventDefault();
546 onChange?.(e);
547 }}
548 type={type}
549 inputMode="decimal"
550 onKeyDown={(e) => {
551 onKeyDown?.(e);
552 handleKeyDown(e);
553 }}
554 {...props}
555 />
556 );
557 }
558);
559
560TimePickerInput.displayName = "TimePickerInput";
561
562interface TimePickerProps {
563 date?: Date | null;
564 onChange?: (date: Date | undefined) => void;
565 hourCycle?: 12 | 24;
566 /**
567 * Determines the smallest unit that is displayed in the datetime picker.
568 * Default is 'second'.
569 * */
570 granularity?: Granularity;
571}
572
573interface TimePickerRef {
574 minuteRef: HTMLInputElement | null;
575 hourRef: HTMLInputElement | null;
576 secondRef: HTMLInputElement | null;
577}
578
579const TimePicker = React.forwardRef<TimePickerRef, TimePickerProps>(
580 ({ date, onChange, hourCycle = 24, granularity = "second" }, ref) => {
581 const minuteRef = React.useRef<HTMLInputElement>(null);
582 const hourRef = React.useRef<HTMLInputElement>(null);
583 const secondRef = React.useRef<HTMLInputElement>(null);
584 const periodRef = React.useRef<HTMLButtonElement>(null);
585 const [period, setPeriod] = React.useState<Period>(
586 date && date.getHours() >= 12 ? "PM" : "AM"
587 );
588
589 useImperativeHandle(
590 ref,
591 () => ({
592 minuteRef: minuteRef.current,
593 hourRef: hourRef.current,
594 secondRef: secondRef.current,
595 periodRef: periodRef.current,
596 }),
597 [minuteRef, hourRef, secondRef]
598 );
599
600 return (
601 <div className="flex items-center justify-center gap-2">
602 <label htmlFor="datetime-picker-hour-input" className="cursor-pointer">
603 <Clock className="mr-2 h-4 w-4" />
604 </label>
605 <TimePickerInput
606 picker={hourCycle === 24 ? "hours" : "12hours"}
607 date={date}
608 id="datetime-picker-hour-input"
609 onDateChange={onChange}
610 ref={hourRef}
611 period={period}
612 onRightFocus={() => minuteRef?.current?.focus()}
613 />
614 {(granularity === "minute" || granularity === "second") && (
615 <>
616 :
617 <TimePickerInput
618 picker="minutes"
619 date={date}
620 onDateChange={onChange}
621 ref={minuteRef}
622 onLeftFocus={() => hourRef?.current?.focus()}
623 onRightFocus={() => secondRef?.current?.focus()}
624 />
625 </>
626 )}
627 {granularity === "second" && (
628 <>
629 :
630 <TimePickerInput
631 picker="seconds"
632 date={date}
633 onDateChange={onChange}
634 ref={secondRef}
635 onLeftFocus={() => minuteRef?.current?.focus()}
636 onRightFocus={() => periodRef?.current?.focus()}
637 />
638 </>
639 )}
640 {hourCycle === 12 && (
641 <div className="grid gap-1 text-center">
642 <TimePeriodSelect
643 period={period}
644 setPeriod={setPeriod}
645 date={date}
646 onDateChange={(date) => {
647 onChange?.(date);
648 if (date && date?.getHours() >= 12) {
649 setPeriod("PM");
650 } else {
651 setPeriod("AM");
652 }
653 }}
654 ref={periodRef}
655 onLeftFocus={() => secondRef?.current?.focus()}
656 />
657 </div>
658 )}
659 </div>
660 );
661 }
662);
663TimePicker.displayName = "TimePicker";
664
665type Granularity = "day" | "hour" | "minute" | "second";
666
667type DateTimePickerProps = {
668 value?: Date;
669 onChange?: (date: Date | undefined) => void;
670 disabled?: boolean;
671 /** showing `AM/PM` or not. */
672 hourCycle?: 12 | 24;
673 placeholder?: string;
674 /**
675 * The year range will be: `This year + yearRange` and `this year - yearRange`.
676 * Default is 50.
677 * For example:
678 * This year is 2024, The year dropdown will be 1974 to 2024 which is generated by `2024 - 50 = 1974` and `2024 + 50 = 2074`.
679 * */
680 yearRange?: number;
681 /**
682 * The format is derived from the `date-fns` documentation.
683 * @reference https://date-fns.org/v3.6.0/docs/format
684 **/
685 displayFormat?: { hour24?: string; hour12?: string };
686 /**
687 * The granularity prop allows you to control the smallest unit that is displayed by DateTimePicker.
688 * By default, the value is `second` which shows all time inputs.
689 **/
690 granularity?: Granularity;
691 className?: string;
692} & Pick<
693 CalendarProps,
694 "locale" | "weekStartsOn" | "showWeekNumber" | "showOutsideDays"
695>;
696
697type DateTimePickerRef = {
698 value?: Date;
699} & Omit<HTMLButtonElement, "value">;
700
701const DateTimePicker = React.forwardRef<
702 Partial<DateTimePickerRef>,
703 DateTimePickerProps
704>(
705 (
706 {
707 locale = enUS,
708 value,
709 onChange,
710 hourCycle = 24,
711 yearRange = 50,
712 disabled = false,
713 displayFormat,
714 granularity = "second",
715 placeholder = "Pick a date",
716 className,
717 ...props
718 },
719 ref
720 ) => {
721 const [month, setMonth] = React.useState<Date>(value ?? new Date());
722 const buttonRef = useRef<HTMLButtonElement>(null);
723 /**
724 * carry over the current time when a user clicks a new day
725 * instead of resetting to 00:00
726 */
727 const handleSelect = (newDay: Date | undefined) => {
728 if (!newDay) return;
729 if (!value) {
730 onChange?.(newDay);
731 setMonth(newDay);
732 return;
733 }
734 const diff = newDay.getTime() - value.getTime();
735 const diffInDays = diff / (1000 * 60 * 60 * 24);
736 const newDateFull = add(value, { days: Math.ceil(diffInDays) });
737 onChange?.(newDateFull);
738 setMonth(newDateFull);
739 };
740
741 useImperativeHandle(
742 ref,
743 () => ({
744 ...buttonRef.current,
745 value,
746 }),
747 [value]
748 );
749
750 const initHourFormat = {
751 hour24:
752 displayFormat?.hour24 ??
753 `PPP HH:mm${!granularity || granularity === "second" ? ":ss" : ""}`,
754 hour12:
755 displayFormat?.hour12 ??
756 `PP hh:mm${!granularity || granularity === "second" ? ":ss" : ""} b`,
757 };
758
759 let loc = enUS;
760 const { options, localize, formatLong } = locale;
761 if (options && localize && formatLong) {
762 loc = {
763 ...enUS,
764 options,
765 localize,
766 formatLong,
767 };
768 }
769
770 return (
771 <Popover>
772 <PopoverTrigger asChild disabled={disabled}>
773 <Button
774 variant="outline"
775 className={cn(
776 "w-full justify-start text-left font-normal",
777 !value && "text-muted-foreground",
778 className
779 )}
780 ref={buttonRef}
781 >
782 <CalendarIcon className="mr-2 h-4 w-4" />
783 {value ? (
784 format(
785 value,
786 hourCycle === 24
787 ? initHourFormat.hour24
788 : initHourFormat.hour12,
789 {
790 locale: loc,
791 }
792 )
793 ) : (
794 <span>{placeholder}</span>
795 )}
796 </Button>
797 </PopoverTrigger>
798 <PopoverContent className="w-auto p-0">
799 <Calendar
800 mode="single"
801 selected={value}
802 month={month}
803 onSelect={(d) => handleSelect(d)}
804 onMonthChange={handleSelect}
805 yearRange={yearRange}
806 locale={locale}
807 {...props}
808 />
809 {granularity !== "day" && (
810 <div className="border-t border-border p-3">
811 <TimePicker
812 onChange={onChange}
813 date={value}
814 hourCycle={hourCycle}
815 granularity={granularity}
816 />
817 </div>
818 )}
819 </PopoverContent>
820 </Popover>
821 );
822 }
823);
824
825DateTimePicker.displayName = "DateTimePicker";
826
827export { DateTimePicker, TimePicker, TimePickerInput };
828export type { DateTimePickerProps, DateTimePickerRef, TimePickerType };
829