Set the Readonly in Blazor DatePicker Component

6 Aug 20261 minute to read

The DatePicker component exposes three related properties that control user interaction: Enabled, AllowEdit, and Readonly. Together they determine whether the input can be focused, edited, and whether the popup can be opened.

Enabled

By default, the Enabled property is true. When enabled, the input can be focused and edited, and the popup can be opened to select a date. When set to false, the input is not focusable, is non-editable, and cannot open the popup.

AllowEdit

By default, the AllowEdit property is true, which allows the textbox input to be changed directly and also lets the user select a value from the popup. When set to false, the input is not editable but the user can still select a value from the popup.

Readonly

By default, the Readonly property is false, which allows the input to be edited and the value to be selected from the popup. When set to true, user input is not allowed and the popup will not open, but the input can still receive focus. To use the Readonly property, you must also disable the AllowEdit property.

The following example demonstrates how to set Readonly in the DatePicker component by using the Readonly and AllowEdit properties.

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" AllowEdit="false" Readonly="true" Value="@DateValue"></SfDatePicker>

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