Blazor - Get Started with DateInput

Blazor - Get Started with Smart.DateInput

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic DateInput

Smart.DateInput is a custom component that allows users to input or select dates.

  1. Add the DateInput component to the Pages/Index.razor file
  2. The default value of the input is the current date. It can be changed using the Value property:
    <DateInput Value="defaultValue"></DateInput>
      public object defaultValue = "2021-12-15";
Basic date input

Date Formatting

The format of the dates displayed in the input can be modified using the DateTimeFormat property.
The values are set according to the JavasScript Intl.DateTimeFormat() constructor.

<DateInput DateTimeFormat="dateformat" Value="defaultValue"></DateInput>
  string defaultValue = "2021-12-15";
  DateTimeFormat dateformat = new DateTimeFormat{
      Day = DateTimeFormatDay.Numeric,
      Month = DateTimeFormatMonth.Long,
      Year = DateTimeFormatYear.Numeric
Formatted DateInput

DateInput Events

Smart.DateInput provides an OnChange Event that can help you expand the component's functionality.
The event object can have unique event.detail parameters.

  • OnChange - triggered when the value is changed.
    Event Details: string label, dynamic oldLabel, dynamic oldValue, dynamic value

<DateInput OnChange="OnChange"></DateInput>

    string selectedMonth;

    public void OnChange(Event ev){
          DateInputChangeEventDetail detail = ev["Detail"];
          selectedMonth = detail.Value.ToString("MMMM", new CultureInfo("en-US"));

The demo below displays the new value every time it is changed:

Date input event

Two-way Value Binding

The DateInput component also supports two-way value binding:

<DateInput @bind-Value = "@dateValue"></DateInput>

    public object dateValue = "2021-09-14";
Date input value binding