DateRangePicker

Range variant of DatePicker. The value is a DateRange — a [Date, Date] tuple — or null.

Billing period

Prefilled


import { DateRangePicker } from '@gg-software/ui';
 
<DateRangePicker
    label="Billing period"
    value={range}
    onChange={(range) => setRange(range)}
    placeholder={['From', 'To']}
/>;

Props

Prop	Type	Default
`value`	`DateRange \| null`	—
`defaultValue`	`DateRange \| null`	`null`
`onChange`	`((range: DateRange \| null) => void)`	—
`format`	`((date: Date) => string)`	—
`placeholder`	`[string, string]`	`['Start date', 'End date']`
`minDate`	`Date`	—
`maxDate`	`Date`	—
`disabledDate`	`((date: Date) => boolean)`	—
`clearable`	`boolean`	`false`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`id`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/DateRangePicker/DateRangePicker.tsx

Types


type DateRange = [Date, Date];