DateTime picker · a day and a time
A single field for a moment in time: the calendar and a column of times side by side, quick picks, limits on both days and times, disabled days, and the time zone spelled out.
The calendar and the times in one panel · quick picks · nothing in the past
Meeting starts
Weekends are off
Deadline · 24-hour, every 30 min
Support call · 9 to 5
Values: null · 2026-09-25T14:00Z · null
Usage
import { signal } from "./index.js";import { DateTimePicker } from "./components/datetimepicker.js"; const when = signal(null); // a Date (or null)DateTimePicker({ value: when, label: "Meeting starts", step: 15, presets: true, // In 1 hour · Tomorrow 9 AM… min: new Date(), disabledDays: (d) => d.getDay() % 6 === 0, clearable: true })DateTimePicker({ value: when, hour12: false, step: 30, defaultTime: "09:00" })// picking a day keeps the time; picking a time keeps the day; the time zone is shown