Date Picker - Vue

Date Picker

Impor

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

Contoh Penggunaan

Time Picker

Impor

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

Contoh Penggunaan

Props

Date Picker

Name	Type	Default	Required	Description
`modelValue?`	`string \| [string, string] \| string[]`	`''`	No	Value yang dikontrol (v-model) - format depends on mode: string untuk single, [string, string] untuk range, string[] untuk multiple.
`mode?`	`'single' \| 'range' \| 'multiple'`	`'single'`	No	Mode selection: single date, date range, atau multiple dates.
`label?`	`string \| Component`	—	No	Label untuk date picker.
`placeholder?`	`string`	—	No	Placeholder text untuk trigger button.
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`	No	Size variant.
`status?`	`'neutral' \| 'success' \| 'error' \| 'warning'`	`'neutral'`	No	Status untuk validasi.
`statusMessage?`	`string`	—	No	Pesan status yang ditampilkan di bawah date picker.
`disabled?`	`boolean`	`false`	No	Disable seluruh komponen.
`readonly?`	`boolean`	`false`	No	Make komponen readonly.
`required?`	`boolean`	`false`	No	Apakah field required.
`dateFormat?`	`string`	`'DD/MM/YYYY'`	No	Format untuk parse & emit dates.
`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").
`showIcon?`	`boolean`	`false`	No	Tampilkan icon kalender.
`showClearButton?`	`boolean`	`false`	No	Tampilkan tombol clear.
`triggerWidth?`	`number \| string`	`''`	No	Lebar trigger button.
`panelMaxHeight?`	`number \| string`	—	No	Max height panel (scrollable).
`panelClassName?`	`string`	`''`	No	ClassName tambahan untuk panel.
`triggerClassname?`	`string`	`''`	No	ClassName tambahan untuk trigger.
`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.
`class?`	`string`	`''`	No	HTML standard attribute `class` untuk container (fallthrough).

Time Picker

Name	Type	Default	Required	Description
`modelValue?`	`string`	—	No	Current value (v-model).
`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?`	`string \| Component`	—	No	Label text.
`required?`	`boolean`	`false`	No	Whether the field is required.