Blazor Time Picker Overview
The Blazor Time Picker component allows the user to choose a time from a visual list in a dropdown, or to type it into a date input that can accept only DateTime values. You can control the format shown in the input and respond to events.
The Time Picker component supports DateTime, DateTime?, DateTimeOffset and DateTimeOffset? types.
The TimePicker component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Time Picker
- Add the
TelerikTimePickertag to your razor page. - Bind a
DateTimeobject to the component - Optionally, provide custom
Format,MinandMaxvalues
Basic Time Picker with custom format, min and max
Selected time: @selectedTime?.ToLongTimeString()
<br />
<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt" @bind-Value="@selectedTime"></TelerikTimePicker>
@code {
private DateTime? selectedTime = DateTime.Now;
// only the time portions are used
public DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
public DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);
}
Date Input Typing Settings
The TimePicker textbox is a DateInput component, which provides various parameters to configure the keyboard typing experience. The settings are related to:
- Caret placement;
- Two-digit year values;
- Automatic correction of invalid date segments.
See the DateInput keyboard documentation for details and examples. The same DateInput parameters with the same behavior exist for the TimePicker.
Increment Steps
The Time Picker enables the end users to change the selected value by clicking the rendered arrows. You can set the increment and decrement steps through the nested TimePickerSteps tag and its parameters. Read more about the Blazor Time Picker increment steps...
Events
The Blazor Time Picker generates events that you can handle and further customize its behavior. Read more about the Blazor Time Picker events....
Validation
You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....
Action Buttons
When using the dropdown to edit dates, you must click the "Set" button to commit the date. Clicking "Cancel", or outside of the dropdown without clicking "Set", will revert the time to the original value. You can also commit a date by clicking the "NOW" button which will choose the current time.
Format
The time format specifiers in the Format control the tumblers available in the dropdown. For example, the HH specifier will result in a hour selector in a 24 hour format. If you also add the tt specifier, you will also get the AM/PM tumbler, but the 24 hour format will still be used. This means that you can also add several tumblers for the same time portion if the format string repeats them.
Min and Max
The Min and Max properties require a DateTime object, but will only use the time portion from it. Thus, the date itself is not important. The hours, minutes, seconds and AM/PM portions control the range of the tumblers in the time picker dropdown. They do not impose validation/limitations on the input editing.
Adaptive Rendering
The component supports different popup rendering depending on the screen size. Read more about the Adaptive Rendering functionality and how to enable it...
Time Picker Parameters
The Blazor Time Picker component provides various parameters that allow you to configure the component. Also check the TimePicker's public API.
| Attribute | Type and Default Value | Description |
|---|---|---|
AdaptiveMode |
AdaptiveMode ( None) |
The adaptive mode of the component. |
AutoComplete |
string ( "off") |
The autocomplete HTML attribute of the input. |
DebounceDelay |
int ( 150) |
Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries. |
Enabled |
bool |
Specifies whether typing in the input and opening the dropdown are allowed. |
ReadOnly |
bool |
If set to true, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
Format |
string ( ShortTimePattern) |
The format of the TimePicker's DateInput. The default value depends on CultureInfo.CurrentCulture. Read more at Supported date formats by the DateInput. Note that format specifiers for non-time portions will be editable only in the input and will not have a representation in the Time Picker dropdown. |
Id |
string |
Renders as the id attribute on the <input /> element, so you can attach a <label for=""> to the input. |
Max |
DateTime ( DateTime(2099, 12, 31, 23, 59, 59)) |
The latest time that the user can select. |
Min |
DateTime ( DateTime(1900, 1, 1, 0, 0, 0)) |
The earliest time that the user can select. |
Placeholder |
string |
Maps to the placeholder attribute of the HTML element. The placeholder will appear if the component is bound to nullable DateTime object - DateTime?, but will not be rendered if the component is bound to the default value of a non-nullable DateTime object. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or customized one) will override the Placeholder to indicate the format the date should be entered in. |
ShowClearButton |
bool |
Defines if the user can clear the component value through an x button rendered inside the input. |
TabIndex |
int? |
Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key. |
ValidateOn |
ValidationEvent enum ( Input) |
Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs. |
Value |
DateTime or DateTime?
|
The current value of the component. Supports two-way binding. |
Typing User Experience
The component provides multiple parameters, which control the caret placement, two-digit year values and the auto-correct behavior of the textbox. See the DateInput documentation for details.
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor Time Picker:
| Attribute | Type and Default Value | Description |
|---|---|---|
Class |
string |
The custom CSS class rendered on the wrapping element. |
PopupClass |
string |
additional CSS class to customize the appearance of the Time Picker's dropdown. |
Width |
string |
Defines the width of the TimePicker. |
You can find more options for customizing the Time Picker styling in the Appearance article.
Format Placeholder
It is possible to set custom strings as placeholders for each date format segment. This feature is available for the following Telerik UI for Blazor components:
- DateInput
- DatePicker
- DateRangePicker
- DateTimePicker
- TimePicker
To set up the FormatPlaceholder, use the <*Component*FormatPlaceholder> nested tag. It allows you to set format placeholders by using the following parameters:
DayMonthYearHourMinuteSecondWeekdayDayPeriod
By default, the value for all parameters is null, which applies the full format specifier.
TimePicker Reference and Methods
Add a reference to the component instance to use the Time Picker's methods.
| Method | Description |
|---|---|
Close |
Closes the Calendar popup. |
FocusAsync |
Focuses the Time Picker textbox. Always await this call, as it relies on JSInterop. Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips. |
Open |
Opens the Calendar popup. |
<TelerikTimePicker @ref="@TimePickerRef"
@bind-Value="@TimePickerValue"
Width="300px">
</TelerikTimePicker>
<TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>
@code {
// the datetime picker is a generic component and its type comes from the value field type
private TelerikTimePicker<DateTime> TimePickerRef { get; set; }
private DateTime TimePickerValue = DateTime.Now;
private void OpenPopup()
{
TimePickerRef.Open();
}
}