Glass Date Picker

1'use client'
2 
3import * as React from 'react'
4import { CalendarIcon } from 'lucide-react'
5 
6import { cn } from '@/lib/utils'
7import { GlassButton } from './glass-button'
8import { GlassPopover, GlassPopoverContent, GlassPopoverTrigger } from './glass-popover'
9import { GlassCalendar } from './glass-calendar'
10 
11export interface GlassDatePickerProps {
12  value?: Date
13  onValueChange?: (date: Date | undefined) => void
14  placeholder?: string
15  className?: string
16  /** Custom date formatter. Defaults to Intl.DateTimeFormat with long month. */
17  formatDate?: (date: Date) => string
18}
19 
20const defaultFormatDate = (date: Date) =>
21  new Intl.DateTimeFormat(undefined, {
22    year: 'numeric',
23    month: 'long',
24    day: 'numeric',
25  }).format(date)
26 
27function GlassDatePicker({
28  value,
29  onValueChange,
30  placeholder = 'Pick a date',
31  className,
32  formatDate = defaultFormatDate,
33}: GlassDatePickerProps) {
34  const [open, setOpen] = React.useState(false)
35  const [mounted, setMounted] = React.useState(false)
36 
37  React.useEffect(() => {
38    setMounted(true)
39  }, [])
40 
41  let displayText: string | undefined
42  if (value) {
43    // Before mount, render a deterministic ISO-like fallback so server/client
44    // HTML is identical. After mount, swap to the locale-aware formatter.
45    displayText = mounted ? formatDate(value) : value.toISOString().slice(0, 10)
46  }
47 
48  return (
49    <GlassPopover open={open} onOpenChange={setOpen}>
50      <GlassPopoverTrigger asChild>
51        <GlassButton
52          variant="secondary"
53          className={cn(
54            'w-full justify-start rounded-xl font-normal',
55            !value && 'text-muted-foreground',
56            className,
57          )}
58        >
59          <CalendarIcon className="mr-2 size-4 text-muted-foreground" />
60          {displayText ?? placeholder}
61        </GlassButton>
62      </GlassPopoverTrigger>
63      <GlassPopoverContent className="w-auto p-0">
64        <GlassCalendar
65          mode="single"
66          selected={value}
67          onSelect={(date) => {
68            onValueChange?.(date)
69            setOpen(false)
70          }}
71          autoFocus
72        />
73      </GlassPopoverContent>
74    </GlassPopover>
75  )
76}
77GlassDatePicker.displayName = 'GlassDatePicker'
78 
79export { GlassDatePicker }