1.3.0 • Published 2 years ago
@illa-design/time-picker v1.3.0
Timepicker
When the user needs to input a time, he can click the pop-up time panel to select.
Installation
yarn add @illa-design/timepickerImport component
import { Timepicker, RangePicker } from "@illa-design/timepicker"API
Picker Basic Properties
| Props | Desc | Type | Defaul |
|---|---|---|---|
| disabled | Whether is disabled | boolean | - |
| error | Whether is error status | boolean | - |
| allowClear | Whether to allow clear | boolean | true |
| disableConfirm | Whether to confirm the disable status | boolean | - |
| position | The position of the picker | "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "bl" |
| getPopupContainer | Get popup container | (node: HTMLElement) => Element | - |
| placeholder | The placeholder | string | string[] | - |
| format | Format of the time | string | "HH:mm:ss" |
| use12Hours | Whether to use 12 hour time | boolean | - |
| onClear | Callback when click clear button | () => void | - |
| popupVisible | Whether to show the popup | boolean | - |
| triggerProps | Trigger properties | <TriggerProps> | - |
| step | Set time steps | { hour?: number; minute?: number; second?: number } | - |
| disabledHours | Disable custom hours | () => number[] | - |
timePicker Basic Properties
| Props | Desc | Type | Default |
|---|---|---|---|
| onSelect | Callback when component value changes | (valueString: string, value: Dayjs) => void | - |
| onChange | Callback when time is selected | (valueString: string, value: Dayjs) => void | - |
| defaultValue | Default value | CalendarValue | - |
| value | Value | CalendarValue | - |
| showNowBtn | Whether to show a button to select the current time | boolean | true |
rangePicker Basic Properties
| Props | Desc | Type | Default |
|---|---|---|---|
| onChange | Callback when the value of the calendar component changes | (valueString: string[], value: Dayjs[]) => void | - |
| onSelect | Callback when date is selected | (valueString: string[], value: Dayjs[]) => void | - |
| defaultValue | Default value | CalendarValue[] | - |
| value | Value | CalendarValue[] | - |
| placeholder | Placeholder | string[] | - |
| order | Whether the start and end times are automatically sorted | boolean | true |
Examples
Basic usage
<TimePicker placeholder={"test"} />Set disable status
<TimePicker placeholder={"disabled"} disabled />Set size as large
<TimePicker placeholder="large" size="large" />1.2.0
2 years ago
1.3.0
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.1.0
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.20
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.11
2 years ago
1.0.10
3 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.15
3 years ago
0.0.9
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.8
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago