Data Binding in Blazor DateTime Picker

27 Aug 20261 minute to read

This section explains how to bind values to the Blazor DateTime Picker component in the following ways.

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

One-way binding

Bind a value to the Blazor DateTime Picker component using the Value property as shown in the following example. In one-way binding, pass the property or variable name prefixed with @ in Razor (for example, @DateValue). Changes to the source update the UI on the next render, but user edits do not update the source automatically.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" Value="@DateValue"></SfDateTimePicker>

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

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

    public void UpdateValue()
    {
        DateValue = DateTime.Now;
    }
}

Two-way data binding

Two-way binding is achieved with the @bind-Value attribute. This binds the component’s value to the specified field and keeps the UI and source in sync. Use a type that matches the component’s TValue (for example, DateTime or DateTime?). The @bind-Value syntax is shorthand for using the Value, ValueChanged, and ValueExpression parameters.

@using Syncfusion.Blazor.Calendars

<p>DateTimePicker value is: @DateValue</p>

<SfDateTimePicker TValue="DateTime?" @bind-Value="@DateValue"></SfDateTimePicker>

@code {
public DateTime? DateValue { get; set; } = DateTime.Now;
}

Dynamic value binding

The value can be updated programmatically in response to component events such as the Blazor DateTime Picker’s ValueChange. Blazor’s default behavior re-renders the component automatically inside event callbacks, so calling StateHasChanged() is usually not required here. The ChangedEventArgs<T> payload exposes Value, PreviousValue, and IsInteracted to inspect the change. The following example updates the value in the Blazor DateTime Picker’s ValueChange event.

@using Syncfusion.Blazor.Calendars

<p>DateTimePicker value is: @DateValue</p>

<SfDateTimePicker TValue="DateTime?" Value="@DateValue">
    <DateTimePickerEvents TValue="DateTime?" ValueChange="@onChange">
    </DateTimePickerEvents>
</SfDateTimePicker>

@code {

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

private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
    {
        DateValue = args.Value;
        StateHasChanged();
    }
}