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
Syncfusion.Blazor.SfBaseComponent
CalendarBase<TValue>
SfDatePicker<TValue>
SfDateTimePicker<TValue>
Inherited Members
Syncfusion.Blazor.Calendars.CalendarBase<TValue>.SetParametersAsync(Microsoft.AspNetCore.Components.ParameterView)
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDatePicker<TValue> : CalendarBase<TValue>, IInputBase
Type Parameters
Name Description
TValue

Specifies the type of SfDatePicker.

Constructors

SfDatePicker()

Declaration
public SfDatePicker()

Fields

ACTIVE

Declaration
protected const string ACTIVE = "e-active"
Field Value
Type Description
System.String

ARIA_EXPANDED

Declaration
protected const string ARIA_EXPANDED = "aria-expanded"
Field Value
Type Description
System.String

BODY

Declaration
protected const string BODY = "body"
Field Value
Type Description
System.String

DATE_PICKER

Declaration
protected const string DATE_PICKER = "e-datepicker"
Field Value
Type Description
System.String

INPUT_FOCUS

Declaration
protected const string INPUT_FOCUS = "e-input-focus"
Field Value
Type Description
System.String

MODEL

Declaration
protected const string MODEL = "model"
Field Value
Type Description
System.String

MODEL_DAY

Declaration
protected const string MODEL_DAY = "e-model-day"
Field Value
Type Description
System.String

MODEL_HEADER

Declaration
protected const string MODEL_HEADER = "e-model-header"
Field Value
Type Description
System.String

MODEL_MONTH

Declaration
protected const string MODEL_MONTH = "e-model-month"
Field Value
Type Description
System.String

MODEL_YEAR

Declaration
protected const string MODEL_YEAR = "e-model-year"
Field Value
Type Description
System.String

READ_ONLY

Declaration
protected const string READ_ONLY = "readonly"
Field Value
Type Description
System.String

TRUE

Declaration
protected const string TRUE = "true"
Field Value
Type Description
System.String

Properties

AllowEdit

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

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

CONTAINER_CLASS

Declaration
protected virtual string CONTAINER_CLASS { get; set; }
Property Value
Type Description
System.String

CssClass

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

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

Enabled

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

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

EnableRtl

Enable or disable rendering component in right to left direction.

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

FloatLabelType

Specifies the floating label 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

Format

Specifies 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

HtmlAttributes

You can add the additional html attributes such as styles, class, and more to the root element.

If you configured both the property and equivalent html attribute, 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>

ID

Specifies the id of the Calendar component.

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

InputAttributes

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 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>

OnBlur

Triggers when the input loses the focus.

Declaration
public EventCallback<FocusEventArgs> OnBlur { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.FocusEventArgs>

OnChange

Triggers when the content of input has changed and gets focus-out.

Declaration
public EventCallback<ChangeEventArgs> OnChange { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.ChangeEventArgs>

OnFocus

Triggers when the input gets focus.

Declaration
public EventCallback<FocusEventArgs> OnFocus { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.FocusEventArgs>

OnInput

Triggers each time when the value of input has changed.

Declaration
public EventCallback<ChangeEventArgs> OnInput { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.ChangeEventArgs>

Placeholder

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

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

Readonly

Specifies the boolean value whether the DatePicker allows the user to change the text.

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

ROOT

Declaration
protected virtual string ROOT { get; set; }
Property Value
Type Description
System.String

StrictMode

Specifies the component 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
public bool StrictMode { get; set; }
Property Value
Type Description
System.Boolean

TabIndex

Specifies the tab order of the DatePicker component.

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

Width

Specifies the width of the DatePicker component.

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

ZIndex

Specifies the z-index value of the DatePicker popup element.

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

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.

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.

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.

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.

UpdateParentClass(String, String)

Update the parent component class to the element.

Update the class to input element Update the class to container element
Declaration
public void UpdateParentClass(string rootClass, string containerClass)
Parameters
Type Name Description
System.String rootClass
System.String containerClass

UpdateValidateClass()

Method which updates the valid class based on the value .

Declaration
protected void UpdateValidateClass()