Class DateRangePickerModel<TValue>

Represents a comprehensive model for DateRangePicker component configuration and event handling.

Inheritance
object
DateRangePickerModel<TValue>
Inherited Members
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class DateRangePickerModel<TValue>
Type Parameters
Name Description
TValue

The type of the date range values (typically DateTime or nullable DateTime).
Remarks

This class serves as a complete configuration model for DateRangePicker components, encapsulating all properties related to appearance, behavior, validation, localization, and event handling. It provides strongly-typed access to all DateRangePicker features including range selection, popup behavior, formatting, and accessibility. The model supports both programmatic configuration and data binding scenarios.

Examples
<SfDateRangePicker TValue="DateTime?" @bind-StartDate="Model.StartDate" @bind-EndDate="Model.EndDate"
                  AllowEdit="@Model.AllowEdit" Format="@Model.Format" 
                  ShowClearButton="@Model.ShowClearButton">
    <DateRangePickerEvents TValue="DateTime?" 
                          ValueChange="@Model.Change"
                          OnOpen="@OnPopupOpen"
                          RangeSelected="@OnRangeSelected">
    </DateRangePickerEvents>
</SfDateRangePicker>

@code {
    DateRangePickerModel<DateTime?> Model = new DateRangePickerModel<DateTime?>
    {
        AllowEdit = true,
        Format = "dd/MM/yyyy",
        ShowClearButton = true,
        Placeholder = "Select date range..."
    };
}

Constructors

DateRangePickerModel()

Declaration
public DateRangePickerModel()

Properties

AllowEdit

Specifies a boolean value whether the DateRangePicker allows user to change the value via typing. When set as false, the DateRangePicker allows user to change the value via picker only.

Declaration
[JsonPropertyName("allowEdit")]
public bool AllowEdit { get; set; }
Property Value
Type
bool

Blur

Triggers when the input loses the focus.

Declaration
[JsonIgnore]
[JsonPropertyName("blur")]
public EventCallback<object> Blur { get; set; }
Property Value
Type
EventCallback<object>

Change

Triggers when the DateRangePicker value is changed.

Declaration
[JsonIgnore]
[JsonPropertyName("change")]
public EventCallback<object> Change { get; set; }
Property Value
Type
EventCallback<object>

Cleared

Triggers when daterangepicker value is cleared using clear button.

Declaration
[JsonIgnore]
[JsonPropertyName("cleared")]
public EventCallback<object> Cleared { get; set; }
Property Value
Type
EventCallback<object>

Close

Triggers when the popup is closed.

Declaration
[JsonPropertyName("close")]
public RangePopupEventArgs Close { get; set; }
Property Value
Type
RangePopupEventArgs

Created

Triggers when the DateRangePicker is created.

Declaration
[JsonIgnore]
[JsonPropertyName("created")]
public EventCallback<object> Created { get; set; }
Property Value
Type
EventCallback<object>

CssClass

Specifies the CSS class name that can be appended with the root element of the DateRangePicker. One or more custom CSS classes can be added to a DateRangePicker.

Declaration
[JsonPropertyName("cssClass")]
public string CssClass { get; set; }
Property Value
Type
string

Depth

Sets the maximum level of view (Month, Year, Decade) in the Calendar.

Depth view should be smaller than the Start view to restrict its view navigation.

.
Declaration
[JsonPropertyName("depth")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public CalendarView Depth { get; set; }
Property Value
Type
CalendarView

Destroyed

Triggers when the DateRangePicker is destroyed.

Declaration
[JsonIgnore]
[JsonPropertyName("destroyed")]
public EventCallback<object> Destroyed { get; set; }
Property Value
Type
EventCallback<object>

EnablePersistence

Enable or disable the persisting DateRangePicker's state between the page reloads. If enabled, following list of states will be persisted.

  • StartDate
  • EndDate
  • Value
.
Declaration
[JsonPropertyName("enablePersistence")]
public bool EnablePersistence { get; set; }
Property Value
Type
bool

EnableRtl

Enable or disable rendering DateRangePicker in right to left direction.

Declaration
[JsonPropertyName("enableRtl")]
public bool EnableRtl { get; set; }
Property Value
Type
bool

Enabled

Specifies a boolean value that indicates whether the DateRangePicker allows the user to interact with it.

Declaration
[JsonPropertyName("enabled")]
public bool Enabled { get; set; }
Property Value
Type
bool

EndDate

Gets or sets the end date of the date range selection.

Declaration
[JsonPropertyName("endDate")]
public DateTime EndDate { get; set; }
Property Value
Type
DateTime

FirstDayOfWeek

Sets the calendar's first day of the week. By default, the first day of the week will be based on the current culture.

Declaration
[JsonPropertyName("firstDayOfWeek")]
public double FirstDayOfWeek { get; set; }
Property Value
Type
double

FloatLabelType

Specifies the floating label behavior of the DateRangePicker that the placeholder text floats above the DateRangePicker based on the following values.

Possible values are:

  • NeverNever floats the label in the DateRangePicker when the placeholder is available.
  • AlwaysThe floating label always floats above the DateRangePicker.
  • AutoThe floating label floats above the DateRangePicker after focusing it or when enters the value in it.
.
Declaration
[JsonPropertyName("floatLabelType")]
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type
FloatLabelType

Focus

Triggers when the input gets focus.

Declaration
[JsonIgnore]
[JsonPropertyName("focus")]
public EventCallback<object> Focus { get; set; }
Property Value
Type
EventCallback<object>

Format

Specifies the format of the value that to be displayed in DateRangePicker.

By default, the format is based on the culture.

You can set the format to "format:'dd/MM/yyyy hh:mm'".

.
Declaration
[JsonPropertyName("format")]
public string Format { get; set; }
Property Value
Type
string

HtmlAttributes

You can add the additional input attributes such as disabled, value, and more to the root element.

If you configured both the property and equivalent input attribute, then the DateRangePicker considers the property value.

.
Declaration
[JsonPropertyName("htmlAttributes")]
public object HtmlAttributes { get; set; }
Property Value
Type
object

KeyConfigs

Customizes the key actions in DateRangePicker. For example, when using German keyboard, the key actions can be customized using these shortcuts.

Declaration
[JsonPropertyName("keyConfigs")]
public object KeyConfigs { get; set; }
Property Value
Type
object

Locale

Specifies the global culture and localization of the DateRangePicker.

Declaration
[JsonPropertyName("locale")]
public string Locale { get; set; }
Property Value
Type
string

Max

Gets or sets the maximum date that can be selected in the calendar-popup.

Declaration
[JsonPropertyName("max")]
public DateTime Max { get; set; }
Property Value
Type
DateTime

MaxDays

Specifies the maximum span of days that can be allowed in a date range selection.

Declaration
[JsonPropertyName("maxDays")]
public int MaxDays { get; set; }
Property Value
Type
int

Min

Gets or sets the minimum date that can be selected in the calendar-popup.

Declaration
[JsonPropertyName("min")]
public DateTime Min { get; set; }
Property Value
Type
DateTime

MinDays

Specifies the minimum span of days that can be allowed in date range selection.

Declaration
[JsonPropertyName("minDays")]
public int MinDays { get; set; }
Property Value
Type
int

Navigated

Triggers when the Calendar is navigated to another view or within the same level of view.

Declaration
[JsonIgnore]
[JsonPropertyName("navigated")]
public EventCallback<object> Navigated { get; set; }
Property Value
Type
EventCallback<object>

Open

Triggers when the popup is opened.

Declaration
[JsonPropertyName("open")]
public RangePopupEventArgs Open { get; set; }
Property Value
Type
RangePopupEventArgs

Placeholder

Specifies the text that is shown as a hint or placeholder until the user focuses or enter a value in DateRangePicker. The property is depending on the FloatLabelType property.

Declaration
[JsonPropertyName("placeholder")]
public string Placeholder { get; set; }
Property Value
Type
string

Presets

Set the predefined ranges which let the user pick required range easily in a DateRangePicker.

Declaration
[JsonPropertyName("presets")]
public List<PresetsModel> Presets { get; set; }
Property Value
Type
List<PresetsModel>

Readonly

Specifies a boolean value whether the DateRangePicker allows the user to change the text.

Declaration
[JsonPropertyName("readonly")]
public bool Readonly { get; set; }
Property Value
Type
bool

RenderDayCell

Gets or sets the RenderDayCell Triggers when each day cell of the Calendar is rendered.

Declaration
[JsonIgnore]
[JsonPropertyName("renderDayCell")]
public EventCallback<object> RenderDayCell { get; set; }
Property Value
Type
EventCallback<object>

Select

Triggers on selecting the start and end date.

Declaration
[JsonPropertyName("select")]
public RangePickerEventArgs<TValue> Select { get; set; }
Property Value
Type
RangePickerEventArgs<TValue>

Separator

Sets or gets the string that used between the start and end date string.

Declaration
[JsonPropertyName("separator")]
public string Separator { get; set; }
Property Value
Type
string

ShowClearButton

Specifies whether to show or hide the clear icon in DateRangePicker.

Declaration
[JsonPropertyName("showClearButton")]
public bool ShowClearButton { get; set; }
Property Value
Type
bool

Start

Specifies the initial view of the Calendar when it is opened. With the help of this property, initial view can be changed to year or decade view.

Declaration
[JsonPropertyName("start")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public CalendarView Start { get; set; }
Property Value
Type
CalendarView

StartDate

Gets or sets the start date of the date range selection.

Declaration
[JsonPropertyName("startDate")]
public DateTime StartDate { get; set; }
Property Value
Type
DateTime

StrictMode

Gets or sets a value indicating whether StrictMode Specifies the DateRangePicker to act as strict. So that, it allows to enter only a valid date value within a specified range or else it will resets to previous value.

By default, StrictMode is in false. It allows invalid or out-of-range date value with highlighted error class.

Declaration
[JsonPropertyName("strictMode")]
public bool StrictMode { get; set; }
Property Value
Type
bool

Value

Gets or sets the start and end date of the Calendar.

Declaration
[JsonPropertyName("value")]
public object Value { get; set; }
Property Value
Type
object

WeekNumber

Determines whether the week number of the Calendar is to be displayed or not. The week number is displayed in every week row.

Declaration
[JsonPropertyName("weekNumber")]
public bool WeekNumber { get; set; }
Property Value
Type
bool

Width

Specifies the width of the DateRangePicker component.

Declaration
[JsonPropertyName("width")]
public object Width { get; set; }
Property Value
Type
object

ZIndex

specifies the z-index value of the DateRangePicker popup element.

Declaration
[JsonPropertyName("zIndex")]
public int ZIndex { get; set; }
Property Value
Type
int