ObjectUIObjectUI

Date Picker

Input for selecting dates with a calendar popup

The Date Picker component allows users to select a date from a calendar interface.

Basic Usage

Basic Date Picker

With Default Date

With Default Value

The calendar popup opens on the month of the selected date, so a date in another month or year is in view when the popup opens. With no date it opens on the current month.

States

Disabled

Full Width

Schema

interface DatePickerSchema {
  type: 'date-picker';
  value?: string | Date;          // Selected date (ISO string or Date)
  placeholder?: string;           // Placeholder text
  
  // Events
  // RUNTIME SLOT (objectui#6124): a React host supplies it; JSON refuses it
  // by name. Author behaviour as a node type, e.g. an action:button node.
  onChange?: (date: Date | undefined) => void;
  
  // States
  disabled?: boolean | string | { dialect?: string; source: string };   // boolean, predicate expression, or CEL envelope
  
  // Styling
  className?: string;
  wrapperClass?: string;
}

wrapperClass is now typed. The renderer has read it all along — it lands on the wrapper element around the date picker and its label — but it went undeclared until objectui#7722, surviving on what was then BaseSchema's index signature (objectui#8347 removed it) and the zod mirror's .passthrough(). Declared as string on both faces, a non-string wrapperClass that used to parse green is now refused by name — on DatePickerSchema and through safeValidateSchema alike. Pass the Tailwind class string; a number or an object gets a parse error where it used to get silence.

Examples

In a Form

Form Field

Date Range

Date Range Selector

to

On this page