Date Time Picker
A date and a time in one field, with presets, limits and the time zone shown, for deadlines and expiry times.
At most 24 hours from now.
Usage
import { DateTimePicker } from "@zynactra/ui/date-time-picker"<DateTimePicker id="expires" value={until} onValueChange={setUntil} min={new Date()} />value is a Date or null. min and max disable days outside the range and clamp times to it. presets are { label, value: () => Date }, computed when chosen, so "In 4 hours" means four hours from the click. Choosing a day keeps the time already set (09:00 the first time).
Guidelines
- Use it when the hour matters (an access grant that ends, a scheduled send). For a date alone, use Calendar in a Popover.
- The time zone always shows next to the time. Send the value to the server as an ISO string (
toISOString()), which is in UTC. - Offer presets for the common answers, and say the limit in the
FieldDescription("At most 24 hours from now"). - Check the limit on the server too; the picker only helps people stay inside it.