Placeholders
The TimePicker enables you to render a text hint for its input field and to provide descriptions for the format sections.
Text Hints
When the value of the TimePicker is null
, or there is no partial selection, you can specify a text hint for the input field by setting the placeholder
option of the component.
Floating Labels
You can specify a floating label for the input field by setting the label
property of the DateInput
. Also, to disable the default date mask of the TimePicker when no value is present, set its placeholder
value to an empty string.
Format Sections Description
The formatPlaceholder
option enables you to set the way the format sections of the input field are rendered. For example, whether the month input is prompted as month
or MM
.
The formatPlaceholder
provides the following available options which you can set:
'wide'
—Displays the full description of the format section. For example, turnsMM
intomonth
. Retrieved from CLDR.'narrow'
—Displays the narrow description of the format section. For example, turnsMM
intomo.
. Retrieved from CLDR.'short'
—Displays the short description of the format section. For example, turnsMM
intomo.
. Retrieved from CLDR.'formatPattern'
—Directly displays the format section. For example, turnsMM
intoMM
.CustomFormatPlaceholder
—An object that defines the description of the format sections. For example,{ day: 'd.', month: 'M.', year: 'y', hour: 'h.' }
.