Date Input Overview

The Date Input component allows the user to enter a date. The developer can control the format of the date. If the user input does not match the desired pattern, the value is not accepted. If the input can be parsed, it will be corrected automatically.

To use a Telerik Date Input for Blazor:

  1. add the telerik-blazor.min.js file to your main index file. For a client-side Blazor app, it is wwwroot/index.html, and for a server-side Blazor app it is ~/Pages/Index.cshtml. For example:


      . . .
      <script src="" defer></script>

    Make sure that the version in the URL matches the version of the Telerik Blazor package used in your project.

  2. add the TelerikDateInput tag

Basic date input with its key features, and ValueChanged event handling

.NET Core Issue 8385 is preventing the ValueChanged handler from working at the moment. The code below will work as soon as Microsoft release a fix for this problem. Until then, you may get compilation issue due to the handler presence. We strive to follow best practices and future-proof our components, which is why we are using this approach even though it does not work yet.

@using Telerik.Blazor.Components.DateInput

<TelerikDateInput Value="@dateInputValue" ValueChanged="@MyValueChangeHandler" Format="dd/MMMM/yyyy">

@functions {
    DateTime dateInputValue { get; set; } = DateTime.Now;
    string result;

    private void MyValueChangeHandler(DateTime theUserInput)
        result = string.Format("The user entered: {0}", theUserInput);


Component namespace and reference

@using Telerik.Blazor.Components.DateInput

<TelerikDateInput ref="@theDateInput" bind-Value="@dateInputValue"></TelerikDateInput>

@functions {
    Telerik.Blazor.Components.DateInput.TelerikDateInput theDateInput;

    DateTime dateInputValue { get; set; } = DateTime.Now;

The date input provides the following features:

  • Class - the CSS class that will be rendered on the input element.
  • Enabled - whether the input is enabled.
  • Format - the date format that the user input must match.
  • ParsingErrorMessage - a hint that is displayed to the user through validation when their input cannot be parsed in the required format
  • Value - get/set the value of the input, can be used for binding.
  • Width - the width of the input. See the Dimensions article.
  • Validation - see the Input Validation article.

Example of using validation to prompt the user for certain input

@using Telerik.Blazor.Components.DateInput
@using System.ComponentModel.DataAnnotations

<EditForm Model="@person">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <TelerikDateInput bind-Value="@person.Birthday" ParsingErrorMessage="plase enter a full date like 29 March 2019" Format="dd/MMMM/yyyy">
    <ValidationMessage For="@(() => person.Birthday)"></ValidationMessage>
    <button type="submit">submit</button>

    //in a real case, the model will usually be in a separate file
    public class Person
        [Range(typeof(DateTime), "1/1/1900", "1/12/2000",
            ErrorMessage = "Value for {0} must be between {1:dd MMM yyyy} and {2:dd MMM yyyy}")]
        public DateTime Birthday { get; set; }

    Person person = new Person();

See Also

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