Date Picker
The Date Picker is the component that inputs the date by means of a Date Picker.
Property
| No | Item | Input Value | Default Value | Action Property | Type | Action Default Value | Description |
|---|---|---|---|---|---|---|---|
| 1 | ID | String | Auto-generated | id | string | Auto-generated | The [id] property cannot be set by actions. |
| 2 | Label L | String | Date Picker | label | string | Date Picker | Component label |
| 3 | Width | Number | 222 | width | number | 222 | Component width |
| 4 | Height | Number | 55 | height | number | 55 | Component height |
| 5 | X | Number | x | number | X coordinate position | ||
| 6 | Y | Number | y | number | Y coordinate position | ||
| 7 | Lock | Boolean | OFF | lock | boolean | false | When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0. |
| 8 | Variant | Selection 1.Outlined 2.Filled 3.Standard | Outlined | variant | string | outlined | Component style |
| 9 | Legacy Design | Boolean | OFF | This is only effective when the Variant is set to Standard. When ON, the component is displayed with the legacy design. When OFF, the component is displayed with the new design. Added in v4.1.0 | |||
| 10 | Color | String Color Picker | color | string | Component color | ||
| 11 | Background Color | String Color Picker | backgroundColor | string | Background color | ||
| 12 | Label Color | String Color Picker | labelColor | string | Label text color | ||
| 13 | Input Color | String Color Picker | inputColor | string | Input text color | ||
| 14 | Disabled | Boolean | OFF | disabled | boolean | false | Component disabled/enabled state |
| 15 | Read Only | Boolean | OFF | readOnly | boolean | false | Read-only mode |
| 16 | Required | Boolean | OFF | required | boolean | false | Required input field specification |
| 17 | Visibility | Boolean | ON | visibility | boolean | true | Component show/hide |
| 18 | Format L | Selection 1.yyyy/MM/dd 2.MM/dd/yyyy 3.dd/MM/yyyy | yyyy/MM/dd | format | string | yyyy/MM/dd | Date display format |
| 19 | Placeholder | String | yyyy/MM/dd | placeholder | string | yyyy/MM/dd | Placeholder text |
| 20 | Helper Text | String | helperText | string | Helper text | ||
| 21 | Change Event | Selection 1.None 2.Action 3. Detached Action | None | Event setting for value changes Detached Action became selectable in v4.1.0. | |||
| 22 | Value | value | string | Date value | |||
| 23 | Error | error | boolean | false | Error state | ||
| 24 | Detached Action | Selection 1. [Detached Action ID] | detachedAction | string | Set a detached action Added in v4.1.0. | ||
| 25 | Tab Focus | Selection 1.[Component ID] | tabFocus | string | Specifying the component for the next focus Added in v3.3.0 |
Event
| Event name | Description |
|---|---|
| onchange | Occurs when a value change is made and the cursor is moved out of the way. |