Data Binding in Blazor DateRangePicker

14 Aug 20262 minutes to read

This section briefly explains how to bind the value to the DateRangePicker component in the following ways.

• One-way binding
• Two-way data binding
• Dynamic value binding

One-way binding

You can bind the value to the DateRangePicker component directly for StartDate and EndDate properties as mentioned in the following code example. In one-way binding, you need to pass the property or variable name along with @ (for example: @StartValue).

@using Syncfusion.Blazor.Calendars

<SfDateRangePicker TValue="DateTime?" StartDate="@StartValue" EndDate="@EndValue"></SfDateRangePicker>

<button @onclick="@UpdateValue">Update Value</button>

@code {

    public DateTime? StartValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);

    public DateTime? EndValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 28);

    public void UpdateValue()
    {
        StartValue = new DateTime(DateTime.Now.Year + 1, DateTime.Now.Month, 28);
        EndValue = new DateTime(DateTime.Now.Year + 1, DateTime.Now.Month + 1, 28);
    }
}

Two-way data binding

Two-way binding can be achieved by using the bind-StartDate and bind-EndDate attributes, which support the DateTime type. If the component value has been changed, it will affect all places where the variable is bound for the bind-StartDate and bind-EndDate attributes.

@using Syncfusion.Blazor.Calendars

<p>DateRangePickers StarteDate and EndDate is: <strong>@StartValue</strong> and <strong>@EndValue</strong></p>

<SfDateRangePicker TValue="DateTime?" @bind-StartDate="@StartValue" @bind-EndDate="@EndValue" ></SfDateRangePicker>

@code {

public DateTime? StartValue { get; set; } = DateTime.Now;

public DateTime? EndValue { get; set; } = DateTime.Now;
}

Dynamic value binding

You can change the property value dynamically by manually calling the StateHasChanged() method inside an event handler of the DateRangePicker component. This method notifies the component that its state has changed and queues a re-render. Refer to the following code example.

@using Syncfusion.Blazor.Calendars

<p>DateRangePicker StarteDate and EndDate is: <strong> @StartValue </strong> and <strong> @EndValue </strong></p>

<SfDateRangePicker TValue="DateTime?" StartDate="@StartValue" EndDate="@EndValue">
<DateRangePickerEvents TValue="DateTime?" ValueChange="@onChange"></DateRangePickerEvents>
</SfDateRangePicker>

@code {

public DateTime? StartValue { get; set; } = DateTime.Now;

public DateTime? EndValue { get; set; } = DateTime.Now;

private void onChange(RangePickerEventArgs<DateTime?> args)
{
    StartValue = args.StartDate;
    EndValue = args.EndDate;
    StateHasChanged();
}
}

NOTE

You can refer to our Blazor Date Range Picker feature tour page for its groundbreaking feature representations. You can also explore our Blazor Date Range Picker example to understand how to present and manipulate data.