DatePicker

    Select dates, weeks, months, quarters, or years from a calendar popup.

    When to Use

    • For selecting a single date or date range
    • When you need date input with calendar UI
    • For filtering or scheduling by date

    Import

    import { DatePicker } from "orizon";

    Examples

    Basic

    Select date
    <DatePicker onChange={(date) => console.log(date)} />

    Date Range

    Start date~End date
    <DatePicker.RangePicker onChange={(dates) => console.log(dates)} />

    Month & Year Picker

    Select date
    Select date
    <DatePicker picker="month" />
<DatePicker picker="year" />

    With Time

    Select date
    <DatePicker showTime onChange={(dateTime) => console.log(dateTime)} />

    Disabled

    Select date
    <DatePicker disabled />

    API

    DatePickerProps

    • value — Date — Selected date (controlled)
    • defaultValue — Date — Default date
    • onChange — (date: Date, dateString: string) => void — Change handler
    • picker — "date" | "week" | "month" | "quarter" | "year" — Picker type (default: "date")
    • format — string — Display format (default: "YYYY-MM-DD")
    • showTime — boolean | TimePickerProps — Include time selection
    • disabled — boolean — Disable the picker
    • disabledDate — (date: Date) => boolean — Disable specific dates
    • presets — { label: string; value: Date }[] — Preset date options
    • placeholder — string — Placeholder text
    • size — "small" | "middle" | "large" — Picker size
    • status — "error" | "warning" — Validation status
    • allowClear — boolean — Show clear button (default: true)

    DatePicker.RangePicker Props

    Same as DatePickerProps with range-specific additions:

    • value — [Date, Date] — Selected range
    • onChange — (dates, dateStrings) => void — Range change handler