Class SfDateRangePicker<TValue>

The DateRangePicker is a graphical user interface component that allows user to select the date range from the calendar.

Inheritance
System.Object
SfBaseComponent
SfInputTextBase<TValue>
CalendarBase<TValue>
SfDateRangePicker<TValue>
Implements
Inherited Members
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.CurrentCulture
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.IsDateOnlyType()
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.IsDateTimeOffsetType()
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.SetParametersAsync(Microsoft.AspNetCore.Components.ParameterView)
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BlurHandler(System.String, System.Boolean)
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ClickStopPropagation
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ContainerClass
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.IsValueTemplate
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MouseDowSpinnerPrevent
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MousePreventContainer
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnBlur
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnChange
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnFocus
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnInput
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnPaste
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.PreventIconHandler
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.SpinButton
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueTemplate
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDateRangePicker<TValue> : CalendarBase<TValue>, IDateRangePicker
Type Parameters
Name Description
TValue

Specifies the type of SfDateRangePicker.

Constructors

SfDateRangePicker()

Declaration
public SfDateRangePicker()

Properties

AllowEdit

Gets or sets 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
public bool AllowEdit { get; set; }
Property Value
Type Description
System.Boolean

true, If the DateRangePicker value can be edited. otherwise, false. The default value is true.

BaseFloatLabelType

Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }
Property Value
Type
FloatLabelType
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseFloatLabelType

BaseHtmlAttributes

Declaration
protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseHtmlAttributes

BaseInputAttributes

Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseInputAttributes

BaseIsReadOnlyInput

Declaration
protected override bool BaseIsReadOnlyInput { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseIsReadOnlyInput

BasePlaceholder

Declaration
protected override string BasePlaceholder { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BasePlaceholder

BaseReadonly

Declaration
protected override bool BaseReadonly { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseReadonly

BaseShowClearButton

Declaration
protected override bool BaseShowClearButton { get; set; }
Property Value
Type
System.Boolean
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseShowClearButton

BaseWidth

Declaration
protected override string BaseWidth { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseWidth

EndDate

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

Declaration
public TValue EndDate { get; set; }
Property Value
Type Description
TValue

Accepts the end date of date range selection.

EndDateChanged

Triggers when end date of the DateRangePicker is changed.

Declaration
public EventCallback<TValue> EndDateChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<TValue>

EndDateExpression

Gets or sets the expression for defining the end date of the bound.

Declaration
public Expression<Func<TValue>> EndDateExpression { get; set; }
Property Value
Type Description
System.Linq.Expressions.Expression<System.Func<TValue>>

An expression that defines the end date of the bound.

FloatLabelType

Gets or sets 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
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type Description
FloatLabelType

The floating label behavior of the DateRangePicker.

Format

Gets or sets the required date format to the start and end date string.

By default, the format is based on the culture.

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

Declaration
public string Format { get; set; }
Property Value
Type Description
System.String

Accepts the string value that specified the required date format for start and end date strings. The default culture format is M/d/yyyy.

FullScreen

Gets or sets a boolean value to FullScreen this indicates whether to enable full screen layout for SfDateRangePicker<TValue> component popup in mobile devices or not.

Declaration
public bool FullScreen { get; set; }
Property Value
Type Description
System.Boolean

true, enable full screen layout for popup in mobile devices; otherwise, false. The default value is false.
Remarks

The FullScreen property applicable for mobile and tablet devices only.

HtmlAttributes

You can add the additional html attributes such as styles, class, and more to the root element. If you configured both property and equivalent html attributes, then the component considers the property value.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A dictionary of additional HTML attributes for the root element of the DateRangePicker.

InputAttributes

You can add the additional input attributes such as disabled, value, and more to the root element. If you configured both property and equivalent input attribute, then the component considers the property value.

Declaration
public Dictionary<string, object> InputAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A dictionary containing additional input attributes such as disabled, value and others that can be added to the root element.

InputFormats

Gets or sets the array of input formats to be used for parsing date values in the SfDateRangePicker<TValue> component.

Declaration
public string[] InputFormats { get; set; }
Property Value
Type Description
System.String[]

An array of strings representing the acceptable input formats for date values. The default value is null.
Remarks

This property allows the SfDateRangePicker<TValue> to interpret typed date values using a specified array of formats.
The formats can include both standard and custom formats supported in C#. When both InputFormats and Format properties are specified, the InputFormats property takes priority. If only InputFormats is specified, parsing will be attempted using the formats provided in the array.
If neither property is specified, the default behavior remains unchanged.
The parsing logic prioritizes the formats in the order they are specified in the InputFormats array.
If a successful parsing occurs, the SfDateRangePicker<TValue> updates its value accordingly. Error handling is controlled by the StrictMode property, allowing for different user experiences in case of invalid input.

Examples

The following example demonstrates how to set the InputFormats property to accept multiple date formats:

MaxDays

Gets or sets the maximum span of days that can be allowed in a date range selection.

Declaration
public Nullable<int> MaxDays { get; set; }
Property Value
Type Description
System.Nullable<System.Int32>

An integer value representing the maximum span of days that can be allowed in a date range selection.

MinDays

Gets or sets the minimum span of days that can be allowed in date range selection.

Declaration
public Nullable<int> MinDays { get; set; }
Property Value
Type Description
System.Nullable<System.Int32>

An integer value representing the minimum span of days that can be allowed in a date range selection.

OpenOnFocus

Gets or sets a value indicating whether the SfDateRangePicker popup opens automatically when the input field receives focus.

Declaration
public bool OpenOnFocus { get; set; }
Property Value
Type Description
System.Boolean

true if the SfDateRangePicker popup should open on input focus; otherwise, false. The default is false.
Remarks

Use this property to improve user experience by automatically showing the SfDateRangePicker popup when the user clicks or tabs into the input field. This is particularly useful for interfaces where quick access to date selection is desirable.

Examples

Placeholder

Gets or sets 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
public string Placeholder { get; set; }
Property Value
Type Description
System.String

Accepts the string value.

Presets

Gets or sets the Presets of the dateRangePicker popup element.

Declaration
public List<Presets> Presets { get; set; }
Property Value
Type Description
System.Collections.Generic.List<Presets>

Accepts the list of Presets objects. The default value is an empty list.

Readonly

Gets or sets value whether the DateRangePicker allows the user to change the text.

Declaration
public bool Readonly { get; set; }
Property Value
Type Description
System.Boolean

true, if the DateRangePicker value cannot be edited; otherwise, false. The default value is false.

RootClass

Declaration
protected override string RootClass { get; set; }
Property Value
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.RootClass

Separator

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

Declaration
public string Separator { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is "-".

ShowClearButton

Gets or sets whether to show or hide the clear icon in DateRangePicker.

Declaration
public bool ShowClearButton { get; set; }
Property Value
Type Description
System.Boolean

true, if the clear icon was shown; otherwise, false. The default value is false.

StartDate

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

Declaration
public TValue StartDate { get; set; }
Property Value
Type Description
TValue

Accepts the start date of date range selection, represented as a value of type TValue.

StartDateExpression

Gets or sets the expression for defining the start date of the bound.

Declaration
public Expression<Func<TValue>> StartDateExpression { get; set; }
Property Value
Type Description
System.Linq.Expressions.Expression<System.Func<TValue>>

An expression that defines the start date of the bound.

StrictMode

Gets or sets 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.

Declaration
public bool StrictMode { get; set; }
Property Value
Type Description
System.Boolean

true, if this property won't allow to enter an invalid date; otherwise, false It allows invalid or out-of-range date value with highlighted error class. The default value is false.
Remarks

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

Value

Gets or sets the selected date of the Calendar.

Declaration
public object Value { get; set; }
Property Value
Type Description
System.Object

Accepts the selected date of calendar.

ValueChanged

Specifies the callback to trigger when the value changes.

Declaration
public EventCallback<object> ValueChanged { get; set; }
Property Value
Type
Microsoft.AspNetCore.Components.EventCallback<System.Object>

ValueExpression

Gets or sets the expression for defining the value of the bound.

Declaration
public Expression<Func<object>> ValueExpression { get; set; }
Property Value
Type Description
System.Linq.Expressions.Expression<System.Func<System.Object>>

An expression that defines the value of the bound.

Width

Gets or sets the width of the DateRangePicker component.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

Accepts the string value.

ZIndex

Gets or sets the z-index value of the DateRangePicker popup element.

Declaration
public int ZIndex { get; set; }
Property Value
Type Description
System.Int32

Accepts an integer value. The default value is 1000.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

ChangeHandler(ChangeEventArgs)

Declaration
protected override Task ChangeHandler(ChangeEventArgs args)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.ChangeEventArgs args
Returns
Type
System.Threading.Tasks.Task
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ChangeHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)

CurrentView()

Gets the current view of the calendar.

Declaration
public string CurrentView()
Returns
Type Description
System.String

returns current view of the calendar.

FocusAsync()

Sets focus to the DateRangePicker component for interaction.

Declaration
public Task FocusAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task.

FocusHandler(FocusEventArgs)

Declaration
protected override Task FocusHandler(FocusEventArgs args)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Web.FocusEventArgs args
Returns
Type
System.Threading.Tasks.Task
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FocusHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FocusOutAsync()

Remove focus from the DateRangePicker component, if the component is in focus state.

Declaration
public Task FocusOutAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task.

FocusOutHandler(FocusEventArgs)

Declaration
protected override Task FocusOutHandler(FocusEventArgs args)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Web.FocusEventArgs args
Returns
Type
System.Threading.Tasks.Task
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FocusOutHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)

FormatValue(String)

Declaration
protected override TValue FormatValue(string genericValue = null)
Parameters
Type Name Description
System.String genericValue
Returns
Type
TValue
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FormatValue(System.String)

FormatValueAsString(TValue)

Declaration
protected override string FormatValueAsString(TValue formatValue)
Parameters
Type Name Description
TValue formatValue
Returns
Type
System.String
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FormatValueAsString(TValue)

GetPersistData()

Gets the properties to be maintained in the persisted state.

Declaration
public Task<string> GetPersistData()
Returns
Type Description
System.Threading.Tasks.Task<System.String>

Task.

HidePopupAsync()

Hide the calendar popup.

Declaration
public Task HidePopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task.

InputHandler(ChangeEventArgs)

Declaration
protected override Task InputHandler(ChangeEventArgs args)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.ChangeEventArgs args
Returns
Type
System.Threading.Tasks.Task
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)

ShowPopupAsync()

Opens the popup to show the calendar.

Declaration
public Task ShowPopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

Task.

UpdateChildProperties(Object)

Update the children properties.

Declaration
public void UpdateChildProperties(object presetValue)
Parameters
Type Name Description
System.Object presetValue

Specifies the preset values.

UpdateHeaders()

Update the header properties.

Declaration
public void UpdateHeaders()

Implements