"use client"; import * as React from "react"; type DateValue = { month: string; day: string; year: string; era?: string; display?: string; iso?: string; }; type DatePickerProps = { label?: React.ReactNode; value?: DateValue | null; defaultValue?: DateValue | null; description?: string; disabled?: boolean; invalid?: boolean; required?: boolean; minWidth?: string; customIndicator?: React.ReactNode; showTime?: boolean; international?: boolean; onChange?: (value: DateValue | null) => void; }; const MONTH_DAYS = [31, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 1, 2, 3, 4]; const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; function CalendarIcon() { return ( ); } function ChevronDownIcon() { return ( ); } function segmentText(value: DateValue | null | undefined, key: keyof DateValue, fallback: string) { return value?.[key] || fallback; } function formatValue(value: DateValue | null | undefined, showTime?: boolean, international?: boolean) { if (!value) return ["mm", "/", "dd", "/", "yyyy"]; if (value.display) return value.display.split("|"); if (international) return [value.day, "/", value.month, "/", value.year, " ", value.era || "शक"]; if (showTime) return [value.month, "/", value.day, "/", value.year, ", ", "\u20668:45\u2069", " AM GMT+4"]; return [value.month, "/", value.day, "/", value.year]; } export function DatePicker({ label = "Date", value, defaultValue = null, description, disabled = false, invalid = false, required = false, minWidth = "w-64", customIndicator, showTime = false, international = false, onChange, }: DatePickerProps) { const isControlled = value !== undefined; const [innerValue, setInnerValue] = React.useState(defaultValue); const [open, setOpen] = React.useState(false); const [focusedSegment, setFocusedSegment] = React.useState(null); const currentValue = isControlled ? value : innerValue; const segments = formatValue(currentValue, showTime, international); const setDate = React.useCallback( (next: DateValue | null) => { if (!isControlled) setInnerValue(next); onChange?.(next); }, [isControlled, onChange], ); const handleTrigger = () => { if (!disabled) setOpen((next) => !next); }; const handleKeyDown = (event: React.KeyboardEvent) => { if (disabled) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); setOpen((next) => !next); } if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); const base = currentValue || { month: "6", day: "1", year: "2026", iso: "2026-06-01" }; const delta = event.key === "ArrowUp" ? 1 : -1; const day = Math.max(1, Math.min(30, Number(base.day || 1) + delta)); setDate({ ...base, day: String(day), iso: `2026-06-${String(day).padStart(2, "0")}` }); } }; const selectDay = (day: number) => { const next = international ? { month: "3", day: "11", year: "1948", era: "शक", iso: "2026-06-01" } : { month: "6", day: String(day), year: "2026", iso: `2026-06-${String(day).padStart(2, "0")}` }; setDate(next); setOpen(false); }; return (

{label}{required ? : null}

{segments.map((segment, index) => { const isLiteral = ["/", ", ", " ", " AM GMT+4"].includes(segment); return ( setFocusedSegment(`${index}`)} onBlur={() => setFocusedSegment(null)} > {segment} ); })}

{description ? {description} : null} {open ? ( ) : null}

); } function CalendarView({ selectedDay, onSelect }: { selectedDay: number; onSelect: (day: number) => void }) { const [yearMode, setYearMode] = React.useState(false); return (

{WEEK_DAYS.map((day) => )} {[0, 1, 2, 3, 4].map((row) => ( {MONTH_DAYS.slice(row * 7, row * 7 + 7).map((day, index) => { const outside = row === 0 && index === 0 || row === 4 && index > 1; const selected = !outside && selectedDay === day; return ( ); })} ))}

{day}

{yearMode ? ( ) : null}

); } export function Button({ children, onClick, variant = "primary" }: { children: React.ReactNode; onClick?: () => void; variant?: "primary" | "secondary" }) { return ; } export function HeroUIStyles() { return ( ); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

DatePicker

Created by

Installation

How to use

Website