Date Picker

1'use client';
2 
3import { format, isValid, parse } from 'date-fns';
4import * as React from 'react';
5import type {
6  DateRange,
7  DayEventHandler,
8  OnSelectHandler,
9} from 'react-day-picker';
10 
11import { Button } from '@/components/ui/button';
12import { Calendar } from '@/components/ui/calendar';
13import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
14import { Icon } from '@/components/ui/icon';
15import { IconShell } from '@/components/ui/icon-shell';
16import {
17  InputGroup,
18  InputGroupAddon,
19  InputGroupInput,
20  InputGroupText,
21} from '@/components/ui/input-group';
22import {
23  Popover,
24  PopoverContent,
25  PopoverTrigger,
26} from '@/components/ui/popover';
27import { cn } from '@/lib/utils';
28 
29const dateSegmentFocusClassName = cn(
30  '[&::-webkit-datetime-edit-day-field:focus]:bg-fill-active',
31  '[&::-webkit-datetime-edit-day-field:focus]:text-fg-primary-inverse',
32  '[&::-webkit-datetime-edit-day-field:focus]:rounded-none',
33  '[&::-webkit-datetime-edit-day-field:focus]:outline-none',
34  '[&::-webkit-datetime-edit-month-field:focus]:bg-fill-active',
35  '[&::-webkit-datetime-edit-month-field:focus]:text-fg-primary-inverse',
36  '[&::-webkit-datetime-edit-month-field:focus]:rounded-none',
37  '[&::-webkit-datetime-edit-month-field:focus]:outline-none',
38  '[&::-webkit-datetime-edit-year-field:focus]:bg-fill-active',
39  '[&::-webkit-datetime-edit-year-field:focus]:text-fg-primary-inverse',
40  '[&::-webkit-datetime-edit-year-field:focus]:rounded-none',
41  '[&::-webkit-datetime-edit-year-field:focus]:outline-none',
42);
43 
44export const dateInputClassName = cn(
45  'w-auto min-w-0 cursor-pointer',
46  '[&::-webkit-calendar-picker-indicator]:hidden',
47  '[&::-webkit-calendar-picker-indicator]:appearance-none',
48  'data-[empty=true]:text-fg-tertiary',
49  'data-[empty=true]:focus:text-fg-primary',
50  'data-[empty=false]:text-fg-primary',
51  dateSegmentFocusClassName,
52);
53 
54// ============================================================================
55// Shared Hooks
56// ============================================================================
57 
58function useDatePicker() {
59  const [open, setOpen] = React.useState(false);
60  const [date, setDate] = React.useState<Date | undefined>(undefined);
61  const [dateValue, setDateValue] = React.useState('');
62  const [month, setMonth] = React.useState<Date | undefined>(undefined);
63 
64  React.useEffect(() => {
65    setDateValue(date ? format(date, 'yyyy-MM-dd') : '');
66 
67    if (date) {
68      setMonth(date);
69    }
70  }, [date]);
71 
72// … truncated