TimePicker
Picking a time can be tough without context. A BitTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available times.
Usage
Basic
Show code
Explore the basic usage of the BitTimePicker component, including a disabled state and a placeholder option.
:
:
:
Time format
Show code
Use of different time formats in the BitTimePicker, specifically the 12-hour (AM/PM) and 24-hour formats.
:
:
Text input
Show code
The input field will open the BitTimePicker, and clicking the field again will dismiss the BitTimePicker and
allow text input. Please note to use this feature, you must enter the time in the exact
TimeFormat
provided for the BitTimePicker.
:
Icon
Show code
Customize the icon of the BitTimePicker, including placing the icon on either the left or right side.
:
:
Formatting
Show code
Applications can customize how times are formatted and parsed. Formatted times can be ambiguous, so the control will avoid parsing the formatted strings of times selected using the UI when text input is allowed.
In this example, we are formatting and parsing times as hh-mm.ss.
:
Binding
Show code
Bind the selected time value of the BitTimePicker to a variable and display the selected time below the picker.
:
Selected time: 05:12:15
Validation
Show code
Validation will happen when the
Submit
button is clicked.
This example demonstrates how to use the BitTimePicker within a form to validate the selected time.
Responsive
Show code
Enable responsive design for the BitTimePicker, allowing it to adjust its layout and appearance based on the screen size.
:
Templates
Show code
Customize the BitTimePicker using templates, including a custom label template with an action button and a custom icon template.
:
:
Hour/minute step
Show code
Customize the hour and minute steps in the BitTimePicker, allowing users to increment time by a specified interval.
:
:
Standalone
Show code
Use the BitTimePicker as a standalone component, including options for time format and disabled state.
:
:
:
Style & Class
Show code
Explore styling and class customization for BitTimePicker, including component styles, custom classes, and detailed styles.
Component's Style & Class:
:
:
Styles & Classes:
:
:
RTL
Show code
Use BitTimePicker in right-to-left (RTL).
:
:
API
BitTimePicker parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitInputBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitInputBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitTimePickerClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitIconLocation enum
Name |
Value |
Description |
---|---|---|
BitTimePickerEditMode enum
Name |
Value |
Description |
---|---|---|
BitTimeFormat enum
Name |
Value |
Description |
---|---|---|
BitDropDirection enum
Name |
Value |
Description |
---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitDir enum
Name |
Value |
Description |
---|---|---|
- On this page