Class SfDatePicker<TValue>

The DatePicker is a graphical user interface component that allows the user to select or enter a date value.

Inheritance
System.Object
SfBaseComponent
SfInputTextBase<TValue>
CalendarBase<TValue>
SfDatePicker<TValue>
SfDateTimePicker<TValue>
Inherited Members
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.SetParametersAsync(Microsoft.AspNetCore.Components.ParameterView)
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BlurHandler()
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>.RootClass
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.SpinButton
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueExpression
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueTemplate
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDatePicker<TValue> : CalendarBase<TValue>, IMaskPlaceholder
Type Parameters
Name Description
TValue

Specifies the type of SfDatePicker.

Constructors

SfDatePicker()

Declaration
public SfDatePicker()

Fields

ARIA_ACTIVE_DESCENDANT

Declaration
protected const string ARIA_ACTIVE_DESCENDANT = "aria-activedescendant"
Field Value
Type
System.String

ARIA_INVALID

Declaration
protected const string ARIA_INVALID = "aria-invalid"
Field Value
Type
System.String

DATE_ICON

Declaration
protected const string DATE_ICON = "e-date-icon e-icons"
Field Value
Type
System.String

ERROR_CLASS

Declaration
protected const string ERROR_CLASS = "e-error"
Field Value
Type
System.String

FALSE

Declaration
protected const string FALSE = "false"
Field Value
Type
System.String

Properties

AllowEdit

Gets or sets a boolean value to AllowEdit whether the SfDatePicker<TValue> allows user to change the value via typing.

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

true, if the DatePicker allows user to change the value via typing; otherwise, false user to change the value via picker only. 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

BaseTabIndex

Declaration
protected override int BaseTabIndex { get; set; }
Property Value
Type
System.Int32
Overrides
Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseTabIndex

BaseWidth

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

EnableMask

Gets or sets mask rendering in the SfDatePicker<TValue> component.

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

true, if the component render with mask format; otherwise, false. The default value is false.
Remarks

The Enable mask property restricts the user to type the unwanted characters in the text area. It allows only eligible characters to type.

FloatLabelType

Gets or sets the FloatLabelType behavior of the DatePicker that the Placeholder text floats above the DatePicker based on the following values.

Possible values are:

  • NeverNever floats the label in the DatePicker when the placeholder is available.
  • AlwaysThe floating label always floats above the DatePicker.
  • AutoThe floating label floats above the DatePicker after focusing it or when enters the value in it.
Declaration
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type Description
FloatLabelType

A value of the FloatLabelType enum representing the behavior of the floating label in the DatePicker.
Examples
<SfDatePicker TValue="DateTime?" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto">
</SfDatePicker>

Format

Gets or sets the Format of the value that to be displayed in component.

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 format value in string type. 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 SfDatePicker<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

Gets or sets the additional HtmlAttributes such as styles, class, and more to the root element.

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

A dictionary containing additional html attributes such as styles, class and more to the root element.
Remarks

Additional attributes can be added by specifying an inline attribute or by specifying @attributes directive.

Examples
<SfDatePicker TValue="DateTime?" HtmlAttributes="@CustomAttribute">
</SfDatePicker>
@code{
   Dictionary<string, object> CustomAttribute = new Dictionary<string, object>() {
        { "title", "Select a Date" }
    };
  }

InputAttributes

Gets or sets the additional InputAttributes such as disabled, value, and more to the root element.

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 more to the root element.
Remarks

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

InputFormats

Gets or sets the array of input formats to be used for parsing date values in the SfDatePicker<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 SfDatePicker<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 SfDatePicker<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:

OpenOnFocus

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

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

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

Use this property to improve user experience by automatically showing the SfDatePicker 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 DatePicker.

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

Accepts a string value. The default value is string.Empty
Remarks

The property is depending on the FloatLabelType property.

Readonly

Gets or sets the boolean value to Readonly whether the SfDatePicker<TValue> allows the user to change the text.

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

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

ShowClearButton

Gets or sets a boolean value to ShowClearButton this indicates whether the clear button is displayed in SfDatePicker<TValue> component.

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.

StrictMode

Gets or sets the component to act as strict So that it allows to enter of only a valid date value within a specified range, or else it will reset to the 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.

TabIndex

Gets or sets the TabIndex order of the DatePicker component.

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

Accepts integer value. The default value is 0.

TimePart

Declaration
protected DateTime TimePart { get; set; }
Property Value
Type
System.DateTime

Width

Gets or sets the Width of the SfDatePicker<TValue> component.

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

Accepts a string value. The default value is null

ZIndex

Gets or sets the ZIndex value of the DatePicker popup element.

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

Accepts 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

ClientPopupRender()

Method to trigger the client-side actions once the popup is displayed when date icon is clicked.

Declaration
protected virtual Task ClientPopupRender()
Returns
Type Description
System.Threading.Tasks.Task

The System.Threading.Tasks.Task.

ConvertToGregorian(String, String)

Converts a formatted Hijri date string to a Gregorian System.DateTime object.

Declaration
public TValue ConvertToGregorian(string hijriDate, string format)
Parameters
Type Name Description
System.String hijriDate

The Hijri date string to convert, formatted according to the specified format.
System.String format

The format string that specifies the structure of the hijriDate. Valid format components include "dd" for day, "MM" for month (numeric), "MMM"/"MMMM" for month name, "yyyy" for year, and "HH"/"mm"/"ss" for time.
Returns
Type Description
TValue

A System.DateTime object in Gregorian format representing the date and time specified in the Hijri hijriDate.
Remarks

This method splits the hijriDate and format into individual components, parses each component to extract day, month, year, and time values, and converts them from Hijri to Gregorian. It assumes that the hijriDate is in the Hijri calendar.

Exceptions
Type Condition
System.ArgumentNullException

Thrown when hijriDate or format is null or empty.

ConvertToHijri(TValue, String)

Converts a Gregorian System.DateTime object to a formatted Hijri date string.

Declaration
public string ConvertToHijri(TValue gregorianDate, string format)
Parameters
Type Name Description
TValue gregorianDate

The Gregorian date to be converted to Hijri, of type TValue.
System.String format

The format string specifying the output structure of the Hijri date. Supports standard date format specifiers such as "dd", "MM", "MMM", "MMMM", "yyyy", and time components.
Returns
Type Description
System.String

A string representing the Hijri date formatted according to the specified format.
Remarks

This method converts a System.DateTime value from Gregorian to Hijri and formats it. If the format string contains "MMM" or "MMMM", it replaces the month part with a Hijri month name (abbreviated or full, depending on the format).

Exceptions
Type Condition
System.ArgumentNullException

Thrown when format is null.

CreateMask()

Declaration
protected Task CreateMask()
Returns
Type
System.Threading.Tasks.Task

CurrentView()

Gets the current view of the calendar.

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

The System.String.

FocusAsync()

Sets focus to the DatePicker component for interaction.

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

The System.Threading.Tasks.Task.

FocusOutAsync()

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

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

The System.Threading.Tasks.Task.

FormatValue(String)

Declaration
protected override TValue FormatValue(string genericValue)
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)

GetDefaultFormat()

Declaration
protected string GetDefaultFormat()
Returns
Type
System.String

GetPersistDataAsync()

Gets the properties to be maintained in the persisted state.

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

The System.Threading.Tasks.Task<>.

HidePopupAsync(EventArgs)

Hide the calendar popup.

Declaration
public Task HidePopupAsync(EventArgs args = null)
Parameters
Type Name Description
System.EventArgs args

Specifies the event arguments.
Returns
Type Description
System.Threading.Tasks.Task

The System.Threading.Tasks.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)

InvokeClearBtnEvent(EventArgs)

Declaration
protected Task InvokeClearBtnEvent(EventArgs args)
Parameters
Type Name Description
System.EventArgs args
Returns
Type
System.Threading.Tasks.Task

NavigateAsync(CalendarView, TValue)

To navigate to the month or year or decade view of the calendar.

Declaration
public Task NavigateAsync(CalendarView view, TValue date)
Parameters
Type Name Description
CalendarView view

Specifies the view of the calendar.
TValue date

Specifies the focused date in a view.
Returns
Type Description
System.Threading.Tasks.Task

The System.Threading.Tasks.Task.

ShowPopup(EventArgs)

Declaration
protected Task ShowPopup(EventArgs args = null)
Parameters
Type Name Description
System.EventArgs args
Returns
Type
System.Threading.Tasks.Task

ShowPopupAsync(EventArgs)

Opens the popup to show the calendar.

Declaration
public Task ShowPopupAsync(EventArgs args = null)
Parameters
Type Name Description
System.EventArgs args

Specifies the event arguments.
Returns
Type Description
System.Threading.Tasks.Task

The System.Threading.Tasks.Task.

UpdateDateTimePopupState(Boolean)

Task used to update the popup state.

Declaration
protected virtual void UpdateDateTimePopupState(bool isOpen)
Parameters
Type Name Description
System.Boolean isOpen

true if the popup is in opened state, otherwise false.

UpdateValidateClass()

Method which updates the valid class based on the value .

Declaration
protected void UpdateValidateClass()