"use client"; import * as React from "react"; type SegmentType = "month" | "day" | "year" | "hour" | "minute" | "second" | "era"; type DatePart = { month: number; day: number; year: number; hour?: number; minute?: number; second?: number; era?: string; timeZone?: string; }; type DateRangeValue = { start: DatePart; end: DatePart } | null; type DateRangePickerProps = { label?: React.ReactNode; value?: DateRangeValue; defaultValue?: DateRangeValue; description?: string; disabled?: boolean; invalid?: boolean; required?: boolean; showTime?: boolean; international?: boolean; customIndicator?: React.ReactNode; minWidth?: string; onChange?: (value: DateRangeValue) => void; }; const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; 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]; function pad(value: number, length = 2) { return String(value).padStart(length, "0"); } function iso(part: DatePart) { return `${pad(part.year, 4)}-${pad(part.month)}-${pad(part.day)}`; } function makeDate(month: number, day: number, year = 2026, hour?: number, minute?: number, second?: number): DatePart { return { month, day, year, hour, minute, second }; } export function parseDate(value: string): DatePart { const [year, month, day] = value.split("-").map((part) => Number.parseInt(part, 10)); return makeDate(month || 1, day || 1, year || 2026); } export function parseZonedDateTime(value: string): DatePart { const match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?(?:\[(.+)\])?$/); if (!match) return parseDate(value); return { year: Number(match[1]), month: Number(match[2]), day: Number(match[3]), hour: Number(match[4]), minute: Number(match[5]), second: Number(match[6] ?? 0), timeZone: match[7], }; } export function getLocalTimeZone() { return Intl.DateTimeFormat().resolvedOptions().timeZone; } export function today(_timeZone?: string) { const now = new Date(); return makeDate(now.getMonth() + 1, now.getDate(), now.getFullYear()); } function CalendarIcon() { return ( ); } function ChevronDownIcon() { return ( ); } function normalizeRange(value: DateRangeValue | undefined): DateRangeValue { if (value === undefined) return null; return value; } function clampByType(type: SegmentType, value: number) { if (type === "month") return Math.max(1, Math.min(12, value)); if (type === "day") return Math.max(1, Math.min(31, value)); if (type === "hour") return Math.max(1, Math.min(12, value)); if (type === "minute" || type === "second") return Math.max(0, Math.min(59, value)); return Math.max(1, Math.min(9999, value)); } function segmentLabel(type: SegmentType) { if (type === "month") return "month, "; if (type === "day") return "day, "; if (type === "year") return "year, "; if (type === "hour") return "hour, "; if (type === "minute") return "minute, "; if (type === "second") return "second, "; return "era, "; } function segmentText(part: DatePart | null | undefined, type: SegmentType, international?: boolean, showTime?: boolean) { if (!part) { if (type === "month") return "mm"; if (type === "day") return "dd"; if (type === "year") return "yyyy"; if (type === "hour") return "hh"; if (type === "minute" || type === "second") return "00"; return ""; } if (type === "month") return String(international ? part.day : part.month); if (type === "day") return String(international ? part.month : part.day); if (type === "year") return String(part.year); if (type === "hour") return String(part.hour ?? (showTime ? 8 : "")); if (type === "minute") return pad(part.minute ?? 45); if (type === "second") return pad(part.second ?? 0); return part.era || "शक"; } function partWith(part: DatePart | null | undefined, type: SegmentType, raw: number, international?: boolean): DatePart { const base = part || makeDate(6, 1, 2026); const value = clampByType(type, raw); if (type === "month") return international ? { ...base, day: value } : { ...base, month: value }; if (type === "day") return international ? { ...base, month: value } : { ...base, day: value }; if (type === "year") return { ...base, year: value }; if (type === "hour") return { ...base, hour: value }; if (type === "minute") return { ...base, minute: value }; if (type === "second") return { ...base, second: value }; return base; } export function DateRangePicker({ label = "Trip dates", value, defaultValue = null, description, disabled = false, invalid = false, required = false, showTime = false, international = false, customIndicator, minWidth = "w-80", onChange, }: DateRangePickerProps) { const controlled = value !== undefined; const [innerValue, setInnerValue] = React.useState(defaultValue); const [open, setOpen] = React.useState(false); const [focusKey, setFocusKey] = React.useState(null); const [entryBuffer, setEntryBuffer] = React.useState(""); const segmentRefs = React.useRef>([]); const current = controlled ? normalizeRange(value) : innerValue; const setRange = React.useCallback((next: DateRangeValue) => { if (!controlled) setInnerValue(next); onChange?.(next); }, [controlled, onChange]); const updateSegment = (side: "start" | "end", type: SegmentType, raw: number) => { const next = current || { start: makeDate(6, 1, 2026), end: makeDate(6, 6, 2026) }; setRange({ ...next, [side]: partWith(next[side], type, raw, international) }); }; const clearSegment = (side: "start" | "end", type: SegmentType) => { const next = current || { start: makeDate(6, 1, 2026), end: makeDate(6, 6, 2026) }; const part = { ...next[side] }; if (type === "month") part.month = 1; if (type === "day") part.day = 1; if (type === "year") part.year = 2026; if (type === "hour") part.hour = 8; if (type === "minute") part.minute = 0; if (type === "second") part.second = 0; setRange({ ...next, [side]: part }); }; const selectDay = (day: number) => { if (!current || (current.start && current.end)) { setRange({ start: makeDate(6, day, 2026), end: makeDate(6, day, 2026) }); return; } const startDay = current.start.day; const end = makeDate(6, day, 2026); setRange(day < startDay ? { start: end, end: current.start } : { start: current.start, end }); }; const moveSegmentFocus = (index: number, direction: number) => { const next = segmentRefs.current[index + direction]; next?.focus(); }; const segmentSpec = React.useMemo(() => { const base: Array<{ side: "start" | "end"; type: SegmentType }> = [ { side: "start", type: "month" }, { side: "start", type: "day" }, { side: "start", type: "year" }, { side: "end", type: "month" }, { side: "end", type: "day" }, { side: "end", type: "year" }, ]; if (!showTime) return base; return [ { side: "start" as const, type: "month" as const }, { side: "start" as const, type: "day" as const }, { side: "start" as const, type: "year" as const }, { side: "start" as const, type: "hour" as const }, { side: "start" as const, type: "minute" as const }, { side: "end" as const, type: "month" as const }, { side: "end" as const, type: "day" as const }, { side: "end" as const, type: "year" as const }, { side: "end" as const, type: "hour" as const }, { side: "end" as const, type: "minute" as const }, ]; }, [showTime]); const renderSegment = (side: "start" | "end", type: SegmentType, index: number) => { const part = current?.[side] ?? null; const key = `${side}-${type}`; const isPlaceholder = !part; return ( { segmentRefs.current[index] = node; }} key={key} data-slot="date-input-group-segment" className="date-input-group__segment" data-placeholder={isPlaceholder || undefined} data-focused={focusKey === key || undefined} role="spinbutton" aria-label={segmentLabel(type)} tabIndex={disabled ? undefined : 0} onFocus={() => { setFocusKey(key); setEntryBuffer(""); }} onBlur={() => setFocusKey(null)} onKeyDown={(event) => { if (disabled) return; if (/^\d$/.test(event.key)) { event.preventDefault(); const maxLen = type === "year" ? 4 : 2; const nextBuffer = (entryBuffer + event.key).slice(-maxLen); setEntryBuffer(nextBuffer); updateSegment(side, type, Number(nextBuffer)); if (nextBuffer.length >= maxLen) moveSegmentFocus(index, 1); return; } if (event.key === "Backspace" || event.key === "Delete") { event.preventDefault(); setEntryBuffer(""); clearSegment(side, type); return; } if (event.key === "ArrowRight") { event.preventDefault(); moveSegmentFocus(index, 1); return; } if (event.key === "ArrowLeft") { event.preventDefault(); moveSegmentFocus(index, -1); return; } if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); setEntryBuffer(""); const currentText = Number(segmentText(part, type, international, showTime).replace(/\D/g, "")) || 1; updateSegment(side, type, currentText + (event.key === "ArrowUp" ? 1 : -1)); } }} > {segmentText(part, type, international, showTime)} ); }; const renderInput = (side: "start" | "end", startIndex: number) => { const part = current?.[side] ?? null; if (showTime) { return ( <> {renderSegment(side, "month", startIndex)} / {renderSegment(side, "day", startIndex + 1)} / {renderSegment(side, "year", startIndex + 2)} , ⁦ {renderSegment(side, "hour", startIndex + 3)} : {renderSegment(side, "minute", startIndex + 4)} ⁩ {side === "start" ? "AM" : "PM"} GMT+4 ); } if (international) { return ( <> {renderSegment(side, "month", startIndex)} / {renderSegment(side, "day", startIndex + 1)} / {renderSegment(side, "year", startIndex + 2)} {part?.era || "शक"} ); } return ( <> {renderSegment(side, "month", startIndex)} / {renderSegment(side, "day", startIndex + 1)} / {renderSegment(side, "year", startIndex + 2)} ); }; return (

{label}

{renderInput("start", 0)} - {renderInput("end", showTime ? 5 : 3)}

{description ? {description} : null} {invalid ? Please enter a valid date range. : null} {open ? ( ) : null}

); } function RangeCalendar({ selected, onSelect }: { selected: DateRangeValue; onSelect: (day: number) => void }) { const [yearMode, setYearMode] = React.useState(false); const start = selected?.start.day ?? 0; const end = selected?.end.day ?? 0; 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 selectedCell = !outside && (day === start || day === end); const inRange = !outside && start && end && day > Math.min(start, end) && day < Math.max(start, end); 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

DateRangePicker

Created by

Installation

How to use

Website