Date & Time Picker

1'use client'
2 
3import { useState, useEffect, useRef } from 'react'
4import { Button } from '@/components/ui/button'
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger
9} from '@/components/ui/popover'
10import { ArrowLeft, ChevronLeft, ChevronRight, Globe, Search } from 'lucide-react'
11import { cn } from '@/lib/utils'
12import { demoDateTimePickerData } from './demo/form'
13 
14/** Timezone configuration using IANA timezone identifiers for correct DST handling */
15const timezones = [
16  { id: 'pacific', name: 'Pacific Time - US & Canada', iana: 'America/Los_Angeles' },
17  { id: 'mountain', name: 'Mountain Time - US & Canada', iana: 'America/Denver' },
18  { id: 'central', name: 'Central Time - US & Canada', iana: 'America/Chicago' },
19  { id: 'eastern', name: 'Eastern Time - US & Canada', iana: 'America/New_York' },
20  { id: 'alaska', name: 'Alaska Time', iana: 'America/Anchorage' },
21  { id: 'arizona', name: 'Arizona, Yukon Time', iana: 'America/Phoenix' },
22  { id: 'newfoundland', name: 'Newfoundland Time', iana: 'America/St_Johns' },
23  { id: 'atlantic', name: 'Atlantic Time - Canada', iana: 'America/Halifax' },
24  { id: 'london', name: 'London, Dublin, Edinburgh', iana: 'Europe/London' },
25  { id: 'paris', name: 'Paris, Berlin, Amsterdam', iana: 'Europe/Paris' },
26  { id: 'athens', name: 'Athens, Helsinki, Istanbul', iana: 'Europe/Athens' },
27  { id: 'moscow', name: 'Moscow, St. Petersburg', iana: 'Europe/Moscow' },
28  { id: 'dubai', name: 'Dubai, Abu Dhabi', iana: 'Asia/Dubai' },
29  { id: 'karachi', name: 'Karachi, Islamabad', iana: 'Asia/Karachi' },
30  { id: 'dhaka', name: 'Dhaka, Almaty', iana: 'Asia/Dhaka' },
31  { id: 'bangkok', name: 'Bangkok, Hanoi, Jakarta', iana: 'Asia/Bangkok' },
32  { id: 'singapore', name: 'Singapore, Hong Kong, Perth', iana: 'Asia/Singapore' },
33  { id: 'tokyo', name: 'Tokyo, Seoul, Osaka', iana: 'Asia/Tokyo' },
34  { id: 'sydney', name: 'Sydney, Melbourne, Brisbane', iana: 'Australia/Sydney' },
35  { id: 'auckland', name: 'Auckland, Wellington', iana: 'Pacific/Auckland' }
36]
37 
38const getTimeForTimezone = (iana: string) => {
39  try {
40    return new Intl.DateTimeFormat('en-US', {
41      timeZone: iana,
42      hour: 'numeric',
43      minute: '2-digit',
44      hour12: true,
45    }).format(new Date()).toLowerCase()
46  } catch {
47    return ''
48  }
49}
50 
51/**
52// … truncated