Components / DateTime Picker

Blazor DateTime Picker Overview

The Blazor DateTime Picker component allows the user to choose both a date and 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 date and time format of the input, and respond to events.

Telerik UI for Blazor Ninja image

The DateTime Picker component is part of Telerik UI for Blazor, a professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor DateTimePicker

  1. Add the TelerikDateTimePicker tag to your razor page.
  2. Bind a DateTime object to the component
  3. Optionally, provide custom Format, Min and Max values

Basic datetime picker with custom format, min and max

Selected time: @selectedTime
<br />

<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
                       Format="dd MMM yyyy HH:mm:ss" Width="250px"></TelerikDateTimePicker>

@code {
    private DateTime? selectedTime = DateTime.Now;
    public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
    public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}

Date Input Typing Settings

The DateTimePicker 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 DateTimePicker.

Increment Steps

The DateTime 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 DateTimePickerSteps tag and its parameters. Read more about the Blazor DateTime Picker increment steps...

Events

The Blazor DateTime Picker generates events that you can handle and further customize its behavior. Read more about the Blazor DateTime 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. It is located in the Time portion of the dropdown (you will be navigated to it automatically upon selecting a 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.

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...

Week Numbers

The Calendar popup can display the ISO week number on each row of date cells. See the ShowWeekNumbers parameter below.

DateTime Picker Parameters

The Blazor Date Time Picker provides various parameters that allow you to configure the component. Also check the DateTimePicker'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 Defines if the DateTimePicker is enabled
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
(FullDateTimePattern)		 The format of the DateTimePicker's DateInput. The default value depends on CultureInfo.CurrentCulture. Read more at Supported date formats by the DateInput.
Id string The id HTML attribute of the input
Max DateTime
(DateTime(2099, 12, 31, 23, 59, 59))		 The latest date and time that the user can select
Min DateTime
(DateTime(1900, 1, 1, 0, 0, 0))		 The earliest date and time that the user can select
Placeholder string 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.
TabIndex int? 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)		 ValidateOn - 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.
ShowWeekNumbers bool Sets if the popup Calendar will display week numbers, according to the ISO-8601 format. Note that the ISO week number may differ from the conventional .NET week number.

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 DateTimePicker:

Attribute Type and Default Value Description
Class string The CSS class that will be rendered on the input element
PopupClass string Additional CSS class to customize the appearance of the DateTimePicker's dropdown
Width string The width of the DateTimePicker

You can find more options for customizing the DateTimePicker 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:

  • Day
  • Month
  • Year
  • Hour
  • Minute
  • Second
  • Weekday

By default, the value for all parameters is null, which applies the full format specifier.

DateTimePicker Reference and Methods

Add a reference to the component instance to use the Date Time Picker's methods.

Method Description
Close Closes the Calendar popup.
FocusAsync Focuses the DateTimePicker 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. 
<TelerikDateTimePicker @ref="@DateTimePickerRef"
                       @bind-Value="@DateTimePickerValue"
                       Width="300px">
</TelerikDateTimePicker>

<TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>

@code {  
    // the datetime picker is a generic component and its type comes from the value field type
    private TelerikDateTimePicker<DateTime> DateTimePickerRef { get; set; }

    private DateTime DateTimePickerValue = DateTime.Now;

    private void OpenPopup()
    {
        DateTimePickerRef.Open();
    }
}

Next Steps

See Also

In this article
Related articles
Not finding the help you need? Improve this article