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

States

Disabled

Full Width

Schema

interface DatePickerSchema {
  type: 'date-picker';
  value?: string | Date;          // Selected date (ISO string or Date)
  placeholder?: string;           // Placeholder text
  
  // Events
  onDateChange?: string | ActionConfig;
  
  // States
  disabled?: boolean;
  
  // Styling
  className?: string;
}

Examples

In a Form

Form Field

Date Range

Date Range Selector

to

On this page