Date Picker - React

Date Picker

Impor

import { DatePicker } from '@idds/react';

Contoh Penggunaan

Single Date

Date Range

Time Picker

Impor

import { TimePicker } from '@idds/react';

Contoh Penggunaan

Basic Usage

12 Hours Format

With Seconds

Props

Date Picker

Name	Type	Default	Required	Description
`mode?`	`'single' \| 'range' \| 'multiple'`	`'range'`	No	Mode selection: single date, date range, atau multiple dates.
`selected`	`string \| [string, string] \| string[]`	—	Yes	Selected dates - format depends on mode: string untuk single, [string, string] untuk range, string[] untuk multiple.
`onChange`	`((newDate: string) => void) \| ((newRange: [string, string]) => void) \| ((newDates: string[]) => void)`	—	Yes	Callback saat selection berubah - format depends on mode.
`placeholder?`	`string \| ReactNode`	`'Pilih tanggal'`	No	Placeholder text untuk trigger button.
`dateFormat?`	`string`	`'dd/MM/yyyy'`	No	Format untuk parse & emit dates.
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`	No	Size variant.
`disabled?`	`boolean`	`false`	No	Disable seluruh komponen.
`readonly?`	`boolean`	`false`	No	Make komponen readonly.
`label?`	`ReactNode`	—	No	Label text.
`required?`	`boolean`	`false`	No	Whether the field is required.
`disabledBackDate?`	`boolean`	`false`	No	Disable dates sebelum hari ini.
`disabledFutureDate?`	`boolean`	`false`	No	Disable dates setelah hari ini.
`disabledDateBefore?`	`string`	—	No	Disable dates sebelum tanggal tertentu (format: "dd/MM/yyyy").
`disabledDateAfter?`	`string`	—	No	Disable dates setelah tanggal tertentu (format: "dd/MM/yyyy").
`triggerWidth?`	`number \| string`	`'100%'`	No	Lebar trigger button.
`panelClassName?`	`string`	`''`	No	ClassName tambahan untuk panel kalender.
`triggerClassname?`	`string`	`''`	No	ClassName tambahan untuk trigger button.
`panelMaxHeight?`	`number \| string`	—	No	Max height panel (panel akan auto scroll jika melebihi).
`popperPlacement?`	`'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end' \| 'top' \| 'top-start' \| 'top-end'`	`'bottom-start'`	No	Posisi panel kalender.
`className?`	`string`	`''`	No	ClassName tambahan.

Time Picker

Name	Type	Default	Required	Description
`value?`	`string`	—	No	Current value (controlled).
`defaultValue?`	`string`	`''`	No	Default value (uncontrolled).
`onChange?`	`(time: string) => void`	—	No	Callback when time changes.
`format?`	`TimeFormat ('HH:mm' \| 'HH:mm:ss' \| ...)`	`'HH:mm'`	No	Time format.
`use12Hours?`	`boolean`	`false`	No	Use 12-hour format (AM/PM).
`showSecond?`	`boolean`	`false`	No	Show seconds column.
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`	No	Size variant.
`status?`	`'neutral' \| 'error' \| 'warning' \| 'success'`	`'neutral'`	No	Status variant.
`disabled?`	`boolean`	`false`	No	Disable the TimePicker.
`allowClear?`	`boolean`	`true`	No	Show clear button.
`placeholder?`	`string`	`'Select time'`	No	Placeholder text.
`hourStep?`	`number`	`1`	No	Interval for hour options.
`minuteStep?`	`number`	`1`	No	Interval for minute options.
`secondStep?`	`number`	`1`	No	Interval for second options.
`showNowButton?`	`boolean`	`false`	No	Show "Now" button.
`disabledBackTime?`	`boolean`	`false`	No	Disable times before current time.
`label?`	`ReactNode`	—	No	Label text.
`required?`	`boolean`	`false`	No	Whether the field is required.