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
Prop | Type | Default | Description |
---|---|---|---|
value | Date | - | Selected date |
time | string | "12:00" | Selected time (HH:MM format) |
onChange | (date: Date | undefined, time: string) => void | - | Callback when values change |
datePlaceholder | string | "Pick a date" | Date picker placeholder |
timePlaceholder | string | "Pick a time" | Time input placeholder |
dateFormat | string | "PPP" | Date display format |
className | string | - | Additional CSS classes |
inputClassName | string | - | 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