import React from 'react'; import { type IsoDate } from './iso-date.js'; import { type IsoDateTime } from './iso-date-time.js'; export type DateTimePickerSize = 'sm' | 'md' | 'lg'; export type DateTimePickerGranularity = 'minute' | 'second'; export interface DateTimePickerLabels { /** The button that opens the calendar. Default "Open calendar". */ calendar?: string; /** The time field under the calendar. Default "Time". */ time?: string; } export interface DateTimePickerProps { /** Field label. Required for a usable control — see `a11y.requires`. */ label?: React.ReactNode; /** Names the field when there is no visible `label`. */ 'aria-label'?: string; /** * Helper text below the field. Say which timezone the time is in whenever * the reader could be in another — "Workspace time, UTC." */ description?: React.ReactNode; /** Replaces the helper text while the field is invalid — `isInvalid`, or its own bounds check. */ errorMessage?: React.ReactNode; isInvalid?: boolean; isDisabled?: boolean; isReadOnly?: boolean; isRequired?: boolean; /** Matches Input's `Size` variant: Small, Medium, Large. */ size?: DateTimePickerSize; /** * The date and time as `YYYY-MM-DDTHH:MM` (`:SS` at second granularity): * a wall-clock reading, with no timezone and no offset. `null` means none * is chosen. A malformed value throws rather than rendering an empty field. */ value?: IsoDateTime | null; /** The initial date and time, for an uncontrolled picker. */ defaultValue?: IsoDateTime; /** Fires with `YYYY-MM-DDTHH:MM`, or `null` when the field is cleared. */ onChange?: (value: IsoDateTime | null) => void; /** * The earliest allowed moment, `YYYY-MM-DDTHH:MM` — "not before now" is * the current reading. It bounds the date and the time together: on its * day, an earlier time is out of range; on a later day, any time is in. */ minValue?: IsoDateTime; /** The latest allowed moment, `YYYY-MM-DDTHH:MM`. */ maxValue?: IsoDateTime; /** Days the calendar refuses, whatever the time — weekends, holidays. Receives `YYYY-MM-DD`. */ isDateUnavailable?: (date: IsoDate) => boolean; /** Defaults to `minute`. `second` adds a seconds segment, and `:SS` to the value. */ granularity?: DateTimePickerGranularity; /** * 12 or 24-hour display. Leave it out: the reader's locale already knows. * The value is 24-hour either way. */ hourCycle?: 12 | 24; /** Posts the value under this name, for an uncontrolled form. */ name?: string; /** The calendar button's name and the time field's label. */ labels?: DateTimePickerLabels; className?: string; wrapperClassName?: string; id?: string; } /** * DateTimePicker — a date and a time of day as one value: when a run * starts, when a maintenance window opens, when a message is sent. * * ONE FIELD, NOT A DATEPICKER BESIDE A TIMEFIELD * * Two fields hold two values, and the rules that span them are the caller's: * "not before now" means TimeField's minimum moves whenever the date is * today, and back when it is not. Here `minValue` is one moment, and the * field checks the date and the time against it together. One label names * it, one error describes it, one `name` posts it. * * HOW IT IS BUILT * * - React Aria's `useDatePicker` at minute (or second) granularity, over * the same segmented field as DatePicker: day, month, year, hour, minute * and — in a 12-hour locale — AM/PM, each typed or stepped with the * arrow keys, in the reader's own order. * - The calendar button opens the calendar with a TimeField under it. A * day picked keeps the time already set, and the popover stays open so * the time can follow; Escape or a click outside closes it, and a day * picked with no time yet takes midnight, shown in the field to change. * - The value is a wall-clock string, never a `Date`. See `iso-date-time.ts`. */ export declare function DateTimePicker({ label, 'aria-label': ariaLabel, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, granularity, hourCycle, name, labels, className, wrapperClassName, id, }: DateTimePickerProps): React.JSX.Element; export declare namespace DateTimePicker { var displayName: string; } //# sourceMappingURL=DateTimePicker.d.ts.map