DatePicker - bit BlazorUI
Home Docs

DatePicker

Picking a date can be tough without context. A BitDatePicker offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates.

Usage

Basic
Disabled

Week numbers
Required
Validation will happen when the Submit button is clicked.

Text input
The input field will open the BitDatePicker, and clicking the field again will dismiss the BitDatePicker and allow text input. Please note to use this feature, you must enter the date in the exact DateFormat provided for the BitDatePicker.
Date format
Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed. In this example, we are formatting and parsing dates as dd=MM(yy).
Min & Max
When date boundaries are set (via MinDate and MaxDate params) the BitDatePicker will not allow out-of-bounds dates to be picked or entered.
In the first example, the allowed dates are between 5 days after now and 5 days before now.

In the second example, the allowed dates are between 1 month after now and 2 months before now.

In the third example, the allowed dates are between 1 year after now and 5 years before now.
Custom label
In this example, the callout of the BitDatePicker would be opened and closed using an icon button which is customely located in the label. This functionality has been implemented using a public API provided in the BitDatePicker.
Two-way binding
Localization
By default, BitDatePicker picks the current culture. You can also provide your own instance of CultureInfo for any custom culture.
To see an example, visit the following link.
Templates
In this sample, you can see how to implement a custom template for different parts of BitDatePicker.


Custom icon
Error message
The custom invalid error message will show when an invalid date is entered.

Responsive
With time

Implementation

BitDatePicker parameters
Name
Type
Default value
Description
AllowTextInput bool false Whether the DatePicker allows input a date string directly or not.
CalloutHtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the main callout's parameters.
Culture CultureInfo CultureInfo.CurrentUICulture CultureInfo for the DatePicker.
DateFormat string? null The format of the date in the DatePicker like "yyyy/MM/dd".
DayCellTemplate RenderFragment<DateTimeOffset>? null Used to customize how content inside the day cell is rendered.
GoToToday string Go to today GoToToday text for the DatePicker.
GoToPrevMonthTitle string Go to previous month The title of the Go to previous month button.
GoToNextMonthTitle string Go to next month The title of the Go to next month button.
HasBorder bool false Determines if the DatePicker has a border.
HighlightCurrentMonth bool false Whether the month picker should highlight the current month.
HighlightSelectedMonth bool false Whether the month picker should highlight the selected month.
IconTemplate RenderFragment? null Custom DatePicker icon template.
IconLocation BitIconLocation BitIconLocation.Right DatePicker icon location.
IconName string CalendarMirrored Optional DatePicker icon.
InvalidErrorMessage string? null The custom validation error message for the invalid value.
IsMonthPickerVisible bool true Whether the month picker is shown beside the day picker or hidden.
IsOpen bool false Whether or not this DatePicker is open.
IsResponsive bool false Enables the responsive mode in small screens.
IsUnderlined bool false Whether or not the Text field of the DatePicker is underlined.
Label string? null Label for the DatePicker.
LabelTemplate RenderFragment? null Used to customize the label for the DatePicker.
MaxDate DateTimeOffset null The maximum allowable date.
MinDate DateTimeOffset? null The minimum allowable date.
MonthCellTemplate RenderFragment<DateTimeOffset>? null Used to customize how content inside the month cell is rendered.
OnClick EventCallback Callback for when clicking on DatePicker input.
OnFocusIn EventCallback Callback for when focus moves into the DatePicker input.
OnFocusOut EventCallback Callback for when clicking on DatePicker input.
OnSelectDate EventCallback<DateTimeOffset?> Callback for when the on selected date changed.
PickerAriaLabel string Calendar Aria label for date picker popup for screen reader users.
Placeholder string string.Empty Placeholder text for the DatePicker.
ShowCloseButton bool false Whether the CalendarDay close button should be shown or not.
ShowGoToToday bool true Whether the "Go to today" link should be shown or not.
ShowMonthPickerAsOverlay bool false Show month picker on top of date picker when visible.
ShowWeekNumbers bool false Show week number in the year.
TabIndex int 0 The tabIndex of the TextField.
Value DateTimeOffset? null The value of DatePicker.
ValueChanged EventCallback<DateTimeOffset?> Callback for when the on date value changed.
YearCellTemplate RenderFragment<int>? null Used to customize how content inside the year cell is rendered.
ShowTimePicker bool false Show time picker for select times.
TimeFormat BitTimeFormat BitTimeFormat.TwentyFourHours Time format of the time pickers, 24H or 12H
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitVisibility enum
Name
Value
Description
Visible 0 Show content of the component.
Hidden 1 Hide content of the component,though the space it takes on the page remains.
Collapsed 2 Hide content of the component,though the space it takes on the page gone.
BitIconLocation enum
Name
Value
Description
Left 0 Show the icon at the left side.
Right 1 Show the icon at the right side.
BitTimeFormat enum
Name
Value
Description
TwentyFourHours 0 Show time pickers in 24 hours format.
TwelveHours 1 Show time pickers in 12 hours format.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).