Date Time Picker

A versatile date and time picker component that supports both direct input and calendar-based selection with natural language parsing.

Installation

Run the following command:

pnpm dlx shadcn@latest add 'https://ui.gesturs.com/r/date-time-picker.json'

Usage

import { DateTimePicker } from "@/components/ui/date-time-picker";
import { useState } from "react";
export default function Demo() {
  const [date, setDate] = useState<Date>(new Date());
  return <DateTimePicker date={date} setDate={setDate} />;
}

Features

📅 Calendar-based date selection
⌨️ Direct text input with natural language parsing
🎨 Fully customizable styling
♿ Keyboard navigation and screen reader support
🌍 Internationalization support through date-fns
📝 Natural language date parsing (e.g., "next friday at 3pm")

API Reference

Name	Type	Default	Description
date	`Date`	Required	The currently selected date
setDate	`(date: Date) => void`	Required	Callback function to update the selected date
format	`string`	"PPP"	The date format string using date-fns format
className	`string`	—	Optional CSS class name for the root element
popoverContentClassName	`string`	—	Optional CSS class name for the popover content
disabled	`boolean`	`false`	Whether the date picker is disabled
clearable	`boolean`	`false`	Whether to show a clear button
onClear	`() => void`	—	Callback function when the clear button is clicked

Examples

Basic Usage

<DateTimePicker date={date} setDate={setDate} />;

Custom Format

<DateTimePicker date={date} format="PP p" /* Will display date and time*/ setDate={setDate} />;

With Clear Button

<DateTimePicker date={date} setDate={setDate} clearable onClear={() => setDate(new Date())} />;

Disabled State

<DateTimePicker date={date} setDate={setDate} disabled />;

The component uses Tailwind CSS for styling and can be customized using the className and popoverContentClassName props. The default styling follows your application's theme and can be overridden using Tailwind classes.

Accessibility

The date picker is built with accessibility in mind:

Full keyboard navigation support
ARIA labels and roles
Screen reader announcements for selected dates
Focus management