- bit BlazorUI
Home Docs

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

Default BitTimePicker
BitTimePicker with 12 hours (AM/PM)
Disabled BitTimePicker
Disabled BitTimePicker with label
Style & Class
Component's Style & Class:




Styles & Classes:

Required BitTimePicker
Validation will happen when the Submit button is clicked.

BitTimePicker allowing text input
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.
BitTimePicker with custom time formatting
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.
BitTimePicker with a custom label
In this example, the callout of the BitTimePicker would be opened and closed using an icon button which is customely located in the label. This functionality has been implemented using a public API provided in the BitTimePicker.
BitTimePicker with value two-way binding
BitTimePicker with custom left-handed icon
BitTimePicker with custom icon name
Custom Invalid Error Message
The custom invalid error message will show when an invalid time is entered.

Responsive BitTimePicker
Hour/minute step BitTimePicker

Implementation

BitTimePicker parameters
Name
Type
Default value
Description
Label string? null Label for the TimePicker.
LabelTemplate RenderFragment? null Used to customize the label for the TimePicker.
AllowTextInput bool false Whether the TimePicker allows input a time string directly or not.
TabIndex int 0 The tabIndex of the TextField.
Placeholder string? null Placeholder text for the DatePicker.
IconTemplate RenderFragment? null Custom TimePicker icon template.
IconLocation BitIconLocation BitIconLocation.Right TimePicker icon location.
IconName string Clock Optional TimePicker icon.
IsOpen bool false Whether or not this TimePicker is open.
CalloutHtmlAttributes Dictionary<string, object> new Dictionary<String, Object>() Capture and render additional attributes in addition to the main callout's parameters.
CalloutAriaLabel string Clock Aria label for time picker popup for screen reader users.
IsResponsive bool false Enables the responsive mode in small screens.
OnClick EventCallback Callback for when clicking on TimePicker input.
OnFocus EventCallback Callback for when focus moves into the TimePicker input.
OnFocusIn EventCallback Callback for when focus moves into the TimePicker input.
OnFocusOut EventCallback Callback for when clicking on TimePicker input.
IsUnderlined bool false Whether or not the Text field of the TimePicker is underlined.
HasBorder bool true Determines if the TimePicker has a border.
Culture CultureInfo CultureInfo.CurrentUICulture CultureInfo for the TimePicker.
TimeFormat BitTimeFormat BitTimeFormat.TwentyFourHours The time format of the time-picker, 24H or 12H.
ValueFormat string? null The format of the time in the TimePicker like "HH:mm".
InvalidErrorMessage string? null The custom validation error message for the invalid value.
OnSelectTime EventCallback<TimeSpan?> Callback for when the on selected time changed.
Value TimeSpan? null The value of TimePicker.
ValueChanged EventCallback<TimeSpan?> Callback for when the on time value changed.
HourStep int 1 Determines increment/decrement steps for time-picker's hour.
MinuteStep int 1 Determines increment/decrement steps for time-picker's minute.
Styles BitTimePickerClassStyles null Custom CSS styles for different parts of the TimePicker.
Classes BitTimePickerClassStyles null Custom CSS classes for different parts of the TimePicker.
CloseButtonTitle string Close time picker The title of the close button (tooltip).
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitTimePickerClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitTimePicker.
Label string? null Custom CSS classes/styles for the Label of the BitTimePicker.
InputWrapper string? null Custom CSS classes/styles for the input wrapper of the BitTimePicker.
InputContainer string? null Custom CSS classes/styles for the input container of the BitTimePicker.
Input string? null Custom CSS classes/styles for the input of the BitTimePicker.
Icon string? null Custom CSS classes/styles for the icon of the BitTimePicker.
Overlay string? null Custom CSS classes/styles for the overlay of the BitTimePicker.
Callout string? null Custom CSS classes/styles for the callout of the BitTimePicker.
CalloutContainer string? null Custom CSS classes/styles for the callout container of the BitTimePicker.
TimeInputContainer string? null Custom CSS classes/styles for the time input container of the BitTimePicker.
HourInputContainer string? null Custom CSS classes/styles for the hour input container of the BitTimePicker.
IncreaseHourButton string? null Custom CSS classes/styles for the increase hour button of the BitTimePicker.
IncreaseHourIcon string? null Custom CSS classes/styles for the increase hour icon of the BitTimePicker.
HourInput string? null Custom CSS classes/styles for the hour input of the BitTimePicker.
DecreaseHourButton string? null Custom CSS classes/styles for the decrease hour button of the BitTimePicker.
DecreaseHourIcon string? null Custom CSS classes/styles for the decrease hour icon of the BitTimePicker.
Divider string? null Custom CSS classes/styles for the divider of the BitTimePicker.
MinuteInputContainer string? null Custom CSS classes/styles for the minute input container of the BitTimePicker.
IncreaseMinuteButton string? null Custom CSS classes/styles for the increase minute button of the BitTimePicker.
IncreaseMinuteIcon string? null Custom CSS classes/styles for the increase minute icon of the BitTimePicker.
MinuteInput string? null Custom CSS classes/styles for the minute input of the BitTimePicker.
DecreaseMinuteButton string? null Custom CSS classes/styles for the decrease minute button of the BitTimePicker.
DecreaseMinuteIcon string? null Custom CSS classes/styles for the decrease minute icon of the BitTimePicker.
AmPmContainer string? null Custom CSS classes/styles for the AM/PM container of the BitTimePicker.
AmButton string? null Custom CSS classes/styles for the AM button of the BitTimePicker.
PmButton string? null Custom CSS classes/styles for the PM button of the BitTimePicker.
CloseButton string? null Custom CSS classes/styles for the close button of the BitTimePicker.
CloseButtonIcon string? null Custom CSS classes/styles for the close button icon of the BitTimePicker.
BitVisibility enum
Name
Value
Description
Visible 0 Show content of the component.
Hidden 1 Hide content of the component,though the space it takes on the page remains.
Collapsed 2 Hide content of the component,though the space it takes on the page gone.
BitIconLocation enum
Name
Value
Description
Left 0 Show the icon at the left side.
Right 1 Show the icon at the right side.
BitTimePickerEditMode enum
Name
Value
Description
Normal 0 Can edit hours and minutes.
OnlyMinutes 1 Can edit only minutes.
OnlyHours 1 Can edit only hours.
BitTimeFormat enum
Name
Value
Description
TwentyFourHours 0 Show time pickers in 24 hours format.
TwelveHours 1 Show time pickers in 12 hours format.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.