Blazor - Get Started with DateRangeInput

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


Basic date input

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>
Formatted 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>
  DateTimeFormat dateformat = new DateTimeFormat{
      Day = DateTimeFormatDay.Numeric,
      Month = DateTimeFormatMonth.Long,
      Year = DateTimeFormatYear.Numeric
Formatted DateRangeInput

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

<DateRangeInput OnChange="OnChange"></DateRangeInput>

    string selectedMonth;

    public void OnChange(Event ev){
          DateRangeInputChangeEventDetail detail = ev["Detail"];
          selectedMonth = detail.Value;
Date range input event

Two-way Value Binding

The DateRangeInput component also supports two-way value binding:

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

    public object dateValue = "2022-1-15";
Date input value binding