Command Palette

Search for a command to run...

Docs
Date Time Input

Date Time Input

A combined date and time picker with calendar popover and time input field

Loading...

Installation

Usage

import { DateTimeInput } from "@/components/ruixen/date-time-input";
import { useState } from "react";
 
export default function App() {
  const [dateTime, setDateTime] = useState<{ date?: Date; time: string }>({
    time: "12:00",
  });
 
  return (
    <DateTimeInput
      value={dateTime.date}
      time={dateTime.time}
      dateFormat="PPP"
      datePlaceholder="Select a date"
      timePlaceholder="Select a time"
      onChange={(date, time) => setDateTime({ date, time })}
      className="max-w-md"
    />
  );
}

Props

PropTypeDefaultDescription
valueDate-Selected date
timestring"12:00"Selected time (HH:MM format)
onChange(date: Date | undefined, time: string) => void-Callback when values change
datePlaceholderstring"Pick a date"Date picker placeholder
timePlaceholderstring"Pick a time"Time input placeholder
dateFormatstring"PPP"Date display format
classNamestring-Additional CSS classes
inputClassNamestring-Input field CSS classes

Features

  • Combined Input: Date and time in one component
  • Calendar Popover: Clean date selection interface
  • Time Input: Native HTML5 time picker
  • Live Preview: Shows selected date and time
  • Custom Formatting: Configurable date display format
  • Icon Indicators: Visual cues for date and time fields