Blazor - Get Started with Smart.DateRangeInput

Setup The Project

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

Setup Basic DateRangeInput

Smart.DateRangeInput is a custom component that allows selecting the range between different two dates.

Add the DateRangeInput component to the Pages/Index.razor file

<DateRangeInput></DateRangeInput>

Time Picker

Smart.DateRangeInput has a built-in time picker that allows selecting the time of the beginning and end of the date range. Set the Timepicker property to true:

<DateRangeInput Timepicker="true"></DateRangeInput>

Date Formatting

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

<DateRangeInput DateTimeFormat="dateformat"></DateRangeInput>
@code{
  DateTimeFormat dateformat = new DateTimeFormat{
      Day = DateTimeFormatDay.Numeric,
      Month = DateTimeFormatMonth.Long,
      Year = DateTimeFormatYear.Numeric
  };
}

DateRangeInput Events

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

<h3>@selectedMonth</h3>
<DateRangeInput OnChange="OnChange"></DateRangeInput>

@code{
    string selectedMonth;

    public void OnChange(Event ev){
        if(ev.ContainsKey("Detail")){
          DateRangeInputChangeEventDetail detail = ev["Detail"];
          selectedMonth = detail.Value;
        }
    }
}

Two-way Value Binding

The DateRangeInput component also supports two-way value binding:

<h3>@dateValue</h3>
<DateRangeInput @bind-Value = "@dateValue"></DateRangeInput>

@code{
    public object dateValue = "2022-1-15";
}