Date Range in Blazor DatePicker

14 Aug 20261 minute to read

The DatePicker allows you to restrict the selectable date to a specified range by using the Min and Max properties.

When StrictMode is enabled, the Value is reset to null if it falls outside the configured Min/Max range. For more information, refer to the Strict Mode section.

The following example allows selecting a date within the range from the 7th to the 27th of the current month.

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" Min='@MinDate' Max='@MaxDate' Value='@DateValue'></SfDatePicker>

@code {
    public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,07);
    public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
    public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
}

The following example sets the initial Value to the 28th, which is outside the configured range (7th–27th). Because the date is out of range, the model value is reset to null and the e-error CSS class is applied to the input to highlight the invalid value.

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" Min='@MinDate' Max='@MaxDate' Value='@DateValue'></SfDatePicker>

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

NOTE

If the value of the Min or Max property is changed through code-behind, you have to update the Value property so that it stays within the range.

See also

• Strict Mode
• DateRangePicker