"use client"; import React, { forwardRef, useCallback } from "react"; import { useTimescape, type Options } from "timescape/react"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; // @source: https://github.com/dan-lee/timescape?tab=readme-ov-file const timePickerInputBase = "p-1 inline tabular-nums h-fit border-none outline-none select-none content-box caret-transparent rounded-sm min-w-8 text-center focus:bg-foreground/20 focus-visible:ring-0 focus-visible:outline-none"; const timePickerSeparatorBase = "text-xs text-gray-400"; type DateFormat = "days" | "months" | "years"; type TimeFormat = "hours" | "minutes" | "seconds" | "am/pm"; type DateTimeArray = T[]; type DateTimeFormatDefaults = [ DateTimeArray, DateTimeArray, ]; const DEFAULTS = [ ["months", "days", "years"], ["hours", "minutes", "am/pm"], ] as DateTimeFormatDefaults; type TimescapeReturn = ReturnType; type InputPlaceholders = Record; const INPUT_PLACEHOLDERS: InputPlaceholders = { months: "MM", days: "DD", years: "YYYY", hours: "HH", minutes: "MM", seconds: "SS", "am/pm": "AM/PM", }; /** * Date time picker Docs: {@link: https://shadcn-extension.vercel.app/docs/otp-input} */ const DatetimeGrid = forwardRef< HTMLDivElement, { format: DateTimeFormatDefaults; className?: string; timescape: Pick; placeholders: InputPlaceholders; } >( ( { format, className, timescape, placeholders, }: { format: DateTimeFormatDefaults; className?: string; timescape: Pick; placeholders: InputPlaceholders; }, ref, ) => { return (

{!!format?.length ? format.map((group, i) => ( {!!group?.length ? group.map((unit, j) => ( {i === 0 && j < group.length - 1 ? ( // date separator / ) : ( j < group.length - 2 && ( // time separator : ) )} )) : null} {format[1]?.length && !i ? ( // date-time separator - only if both date and time are present | ) : null} )) : null}

); }, ); DatetimeGrid.displayName = "DatetimeGrid"; interface DateTimeInput { value?: Date; format: DateTimeFormatDefaults; placeholders?: InputPlaceholders; onChange?: Options["onChangeDate"]; dtOptions?: Options; className?: string; } const DEFAULT_TS_OPTIONS = { date: new Date(), hour12: true, }; export const DatetimePicker = forwardRef( ( { value, format = DEFAULTS, placeholders, dtOptions = DEFAULT_TS_OPTIONS, onChange, className, }, ref, ) => { const handleDateChange = useCallback( (nextDate: Date | undefined) => { onChange ? onChange(nextDate) : console.log(nextDate); }, [onChange], ); const timescape = useTimescape({ ...dtOptions, ...(value && { date: value }), onChangeDate: handleDateChange, }); return ( ); }, ); DatetimePicker.displayName = "DatetimePicker";

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Design in the 21st century