Blazor Date Picker Overview
The Date Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI.
Blazor Date Picker Example
This sample demonstrates how to create
IgbDatePicker with option to select a single date.
The Date Picker component requires the following modules to be registered:
// in Program.cs file builder.Services.AddIgniteUIBlazor( typeof(IgbDatePickerModule));
The Blazor Date Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below:
Text Area: This displays the selected date, stored in the
Valueproperty of the editor.
Calendar: Clicking the calendar button will open the calendar drop-down of the Date Picker. The calendar will open to show the month of the currently selected
Value, if there is one. If a
Valueis not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically.
Clear Button: The 'x' icon will clear the current value.
||string||Changes the color of the calendar button.|
||bool||The date picker's value can be typed-in and modified by toggling this property to true.|
||enum||Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021.|
||enum||Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday.|
||string||When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the
||string||Displays custom text above the date in the top-left corner of the Date Picker.|
||DateTime||Restricts earlier dates from being selected or viewed.|
||DateTime||Restricts later dates from being selected or viewed.|
||string||A custom string to be displayed when the value within the edit portion of the calendar is cleared.|
||bool||Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the
||bool||The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off.|
||bool||Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the date picker. The week number's visibility can be toggled on and off.|
||enum||Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek.|
||bool||By default, the dropdown portion of the Date Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar.|
||date||Sets the value of the Date Picker and selects it in the dropdown calendar.|
Users can also customize the Date Picker's font by using the various text properties of the control. They are:
The following example demonstrates how to enable editing in the
The following example demonstrates how to restrict selected dates in the
The following example demonstrates how apply a long date in the
The following example demonstrates how combine multiple
The following is a list of API members mentioned in the above sections: