Blazor DateInput Overview

The Blazor Date Input component allows the user to type a date in a more convenient and user-friendly way, compared to a regular textbox. The DateInput can display its value with a specific date format and hint the user to follow it during typing. The component also provides multiple settings that are related to the typing and auto-correction user experience. The DateInput is a base for other components such as the DatePicker, DateTimePicker and DateRangePicker.

The Date Input 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.

Download Free Trial

Creating Blazor DateInput

1. Add a TelerikDateInput tag to your razor page.
2. Bind the Value parameter to a DateTime or DateTime? object. The parameter supports two-way binding.
3. (optional) Set the Format, Min and Max parameters.
4. (optional) Configure the typing user experience related to automatic value correction or navigation across the different parts of the date format. For example, let's set AutoSwitchKeys, so that users can move from one date segment to the next with more keys and not just the arrows.

Basic Telerik Blazor DateInput

<TelerikDateInput @bind-Value="@DateValue"
                  Format="dd MMMM yyyy"
                  Min="@MinDate"
                  Max="@MaxDate"
                  AutoSwitchKeys="@AutoSwitchKeys"
                  Width="200px">
</TelerikDateInput>

<p>DateValue is: @DateValue</p>

@code {
    private DateTime DateValue { get; set; } = DateTime.Now;

    private DateTime MinDate { get; set; } = DateTime.Now.AddYears(-50);

    private DateTime MaxDate { get; set; } = DateTime.Now.AddYears(50);

    private List<object> AutoSwitchKeys { get; set; } = new List<object>() { ".", "/", " " };
}

Nullable DateTime

The Date Input behavior differs, depend on the type of field it is bound to, and this can result in different user experience:

DateInput Scenario	Behavior with DateTime	Behavior with Nullable DateTime?
No set value	The value defaults to 0001-01-01.	The value is null. The component displays its Format or FormatPlaceHolder.
Empty date format segments	The Value does not change. The component displays its Format or FormatPlaceHolder only for the missing segment.	The Value remains or becomes null. The component displays its full Format or FormatPlaceHolder.
Deleted value inside a Form	A validation error will appear.	No validation error (unless some other validation attributes are set).

Typing Settings

The Date Input provides various options to configure the Date Input keyboard typing and user experience. They are related to the caret movement, two-digit years, and automatic correction of invalid values.

Increment Steps

The Date Input enables users to change the value by pressing the arrow keys. Use the <DateInputSteps> nested tag to set the increment and decrement steps for each part of the date format.

Validation

The built-in Date Input validation ensures that the component value is acceptable for the application business logic.

Events

The Blazor Date Input fires events such as change and blur. Handle these events to react to user actions and customize the component behavior.

Appearance

The DateInput exposes a few parameters for its styling. Use them to change the component appearance declaratively and without custom CSS.

DateInput Parameters

The following section lists some Date Input parameters and links to other pages that provide information for more parameters. Also check the DateInput API Reference for all parameters, methods and events.

Parameter	Type and Default Value	Description
AriaDescribedBy	string	The aria-describedby attribute of the input.
AriaLabel	string	The aria-label attribute of the input.
AriaLabelledBy	string	The aria-labelledby attribute of the input.
AutoComplete	string	The autocomplete attribute of the input.
DebounceDelay	int (150)	The 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 Date Input is enabled and accepts new values.
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 (ShortDatePattern)	The textbox mask and date format that the user input must match. The default value depends on CultureInfo.CurrentCulture. Read more in the Supported Formats article.
Id	string	The id attribute of the input.
Max	DateTime (new DateTime(2099, 12, 31))	The latest allowed date that the user can type.
Min	DateTime (DateTime(1900, 1, 1))	The earliest allowed date that the user can type.
Placeholder	string	The placeholder attribute of the input. The placeholder will appear only if the component is bound to nullable DateTime? object, the Value is null and the component is not focused. Once the user focuses it to start typing, the FormatPlaceholder (default or custom one) will override the Placeholder to indicate the expected date format.
ShowClearButton	bool	Defines if the user can clear the component value through an x button rendered inside the input.
TabIndex	int	The tabindex attribute of the input. Use it to control the tabbing order of the inputs on the page.
ValidateOn	ValidationEvent enum (Input)	The event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs
Value	DateTime or DateTime?	The component value. Use with two-way binding or ValueChanged event handler.

Typing User Experience

The component provides multiple parameters, which control the caret placement, two-digit year values and the auto-correct behavior of the Date Input.

Styling and Appearance

Parameter	Type and Default Value	Description
Class	string	A custom CSS class to be rendered on the <span class="k-dateinput"> element. Use it for custom CSS styling and theme overrides.
Width	string	The width of the Date Input.

The Date Input Appearance article lists more parameters, which configure the component styling.

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
• DayPeriod

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

DateInput Reference and Methods

The Date Input exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref directive attribute.

Method	Description
FocusAsync	Focuses the DateInput component to be ready for typing. Always call with await. Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips.

Date Input reference and FocusAsync method usage

<TelerikDateInput @ref="@DateInputRef"
                  @bind-Value="@DateValue"
                  Width="200px">
</TelerikDateInput>

<TelerikButton OnClick="@OnButtonClick">Focus DateInput</TelerikButton>

@code {
    private TelerikDateInput<DateTime> DateInputRef { get; set; }

    private DateTime DateValue { get; set; } = DateTime.Now;

    private async Task OnButtonClick()
    {
        await DateInputRef.FocusAsync();
    }
}

Next Steps

• Learn about the flexible Date Input typing user experience
• Set Date Input format
• Customize the Date Input appearance
• Handle Date Input events

See Also

• Live Demo: Date Input
• Input Validation
• Date Input API Reference