background

UI for Blazor

Blazor DateInput

  • The Blazor DateInput control lets you directly enter dates with separate sections for day, month, year, hours, etc.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor DateInput - Header
  • Display Dates with Blazor DateInput

    The Blazor DateInput component lets the user enter only a valid date that conforms to the specified format, culture, min and max settings. It works in both Blazor WebAssembly (WASM) and server-side Blazor apps and supports forms validation, keyboard navigation and provides events.

    Telerik UI for Blazor DateInput Overview
  • DateInput Supported Formats

    The Telerik Blazor date input restricts input to the format specified by the developer. This ensures a valid date, and full control over the display.

    You can choose from the standard .NET format specifiers, and also write your own—just like you would with any C# code.

    The standard format strings are also culture-aware in the framework, so they respond to the current user culture, and so does the DateInput.

    See examples of formats in the date input

    Telerik UI for Blazor DateInput Supported Formats
  • DateInput Configuration Options

    The Telerik UI for Blazor DateInput component provides AutoSwitchParts and AutoSwitchKeys auto-tabbing properties to match your preferred experience while editing year, month and date values. You can also leverage copy and paste functionality to copy a specific date format and directly paste it into the component without any need for manual typing.

    Additionally, the DateInput component supports a TwoDigitYearMax property, which makes it easy for users to enter dates in a two-digit year format, an AutoCorrectParts property, which gives you control over the date auto-correction UX, and an AllowCaretMode property, allowing users to input date values using a caret to move through separate date segments.

    See the Blazor DateInput Configuration demo

    Telerik-UI-for-Blazor-DateInput-Two-Digit-Year-Format
  • DateInput Validation

    Form validation through DataAnnotation attributes comes out-of-the-box with the Telerik Blazor Date Input. You can choose whether validation is triggered on change, blur or while typing – whatever the best option is for each scenario. 

    Telerik UI for Blazor DateInput Validation
  • DateInput Step Interval

    Each of the component’s segments (e.g. the hours segment) can be incremented or decremented with the arrow keys. By default, increments occur at a rate of 1 but if you would rather control that step you can. For example, if you are a building an interface for making appointments and your time slots are 30min long, you make the minutes segment change by 30minutes. 
    Telerik UI for Blazor DateInput
  • DateInput Events

    The DateInput offers the standard ValueChanged event and an OnChange event that lets you react to the user changing the value, but still allows you to use two-way binding. The component also fires the OnBlur event which is triggered when it loses focus. 

    Telerik UI for Blazor Editor Events
  • DateInput Accessibility and Keyboard Navigation

    The Telerik DateInput component honors web accessibility standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers) and lets you enter values with the keyboard only – not only by typing, but also by pressing the arrow keys.

    Telerik UI fro ASP.NET Core Accessibility
  • DateInput TabIndex

    The Blazor DateInput component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order.
  • DateInput Globalization

    The Telerik DateInput automatically translates culture-aware formats to the client so users see the dates they are used to – for example, if you set the format to “d” people in the US can see MM/dd/yyyy while people in the UK can see dd/MM/yyyy.

    Sample of Blazor Date Input globalization

    Blazor Editor Globalization and Localization
  • DateInput Theming

    The Telerik Blazor DateInput has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create a new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

    Telerik UI for Blazor DateInput Themes
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor DateInput component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    RTL Support

All Blazor Components

Next Steps