DatePicker
Seletor de data em popover baseado no Calendar. Suporta data única e intervalo de datas.
Demonstração
Single Date
Date Range
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | Date | undefined | — | Data selecionada |
onChange | (date: Date | undefined) => void | — | Callback quando a data muda |
placeholder | string | 'Pick a date' | Texto de placeholder quando nenhuma data está selecionada |
dateFormat | string | 'PPP' | Formato date-fns (padrão: PPP) |
disabled | boolean | false | Desabilita o seletor |
disabledDates | Matcher | — | Datas desabilitadas passadas ao Calendar |
fromDate | Date | — | Data mínima selecionável |
toDate | Date | — | Data máxima selecionável |
Uso
import { DatePicker, DateRangePicker } from '@ghiberti85/ui'
// Single date
const [date, setDate] = useState<Date | undefined>()
<DatePicker
value={date}
onChange={setDate}
placeholder="Pick a date"
dateFormat="dd/MM/yyyy"
/>
// Date range
const [range, setRange] = useState<{ from?: Date; to?: Date }>()
<DateRangePicker
value={range}
onChange={setRange}
placeholder="Pick a date range"
/>
// With constraints
<DatePicker
value={date}
onChange={setDate}
fromDate={new Date()}
disabledDates={{ dayOfWeek: [0, 6] }}
/>