Data binding
Show seconds
By adding the property show-seconds.## Data binding
Hide Icon
By adding the property hide-icon you will remove the icon.
Prevent closing.
By adding the attribute no-outside-click you will prevent the popup to close when you click outside the popup.
Disabled
By adding the attribute disabled you will disable the date-picker
Readonly
By adding the attribute readonly it will be in readonly mode.
Hint Text
You can show a hint text at the bottom of the timepicker by the hint="Hint text" property
Validation in HTML template
Validation by adding validator=""
Validation in javascript
Validation by adding validator=""
CSS Variables
| Name | Default | Describtion |
|---|---|---|
| --input-font-color | Theme: --col-txt-1 | The text color. |
| --input-font-color-focus | Theme: --comp-border-color-focus | The text when focus. |
| --input-font-size | 14px | The text font size. |
| --comp-label-color | Theme | The label color. |
| --comp-label-font-size | Theme | The label fontSize. |
| --comp-border-color | Theme | The borderColor. |
| --input-info-font-size | 12px | The fontSize for Hint/counter/error. |
| --input-info-color | Theme: --comp-border-color-focus | The color for Hint/counter. |
| --input-error-color | Theme: --col-err | The color for error. |
| --hhl-date-picker-col-bg | Theme: --col-bg-0 | The background color on popUp. |