DatePicker
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
Explore basic configurations of the BitDatePicker, including labels, placeholders, week numbers, and highlighting features.
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
8
9
10
11
12
13
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
Min & Max
Set minimum and maximum selectable dates to restrict user input to a specific range of days, months, or years.
Min: Now.AddDays(-5)
Max: Now.AddDays(+5)
Selected date
March 2025
S
M
T
W
T
F
S
Min: Now.AddMonths(-2)
Max: Now.AddMonths(+1)
Selected date
March 2025
S
M
T
W
T
F
S
Min: Now.AddYears(-5)
Max: Now.AddYears(+1)
Selected date
March 2025
S
M
T
W
T
F
S
Hour/Minute step
Adjust the increment step for hours and minutes when using the BitDatePicker's time selection feature.
Selected date
S
M
T
W
T
F
S
:
Selected date
S
M
T
W
T
F
S
:
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).
Selected date
March 2025
S
M
T
W
T
F
S
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.
Selected date
March 2025
S
M
T
W
T
F
S
Binding
Bind a selected date to a model or view, allowing two-way data binding with the BitDatePicker.
Selected date 01/17/2020
January 2020
S
M
T
W
T
F
S
Selected date: 01/17/2020 00:00:00 +00:00
Culture
By default, BitDatePicker picks the current culture. But you can provide your own instance of CultureInfo for any custom culture.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.
Selected date
اسفند 1403
ش
ی
د
س
چ
پ
ج
Selected date
Esfand 1403
S
Y
D
S
C
P
J
Standalone
Use the BitDatePicker in a standalone mode, allowing it to function independently without a surrounding form or container.
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
8
9
10
11
12
13
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
ReadOnly
The ReadOnly parameter makes the date picker input non-editable, preventing users from manually changing the time value.
Selected date 03/13/2025
March 2025
S
M
T
W
T
F
S
Selected date 03/13/2025
March 2025
S
M
T
W
T
F
S
Selected date 03/13/2025
March 2025
S
M
T
W
T
F
S
Selected date 03/13/2025
S
M
T
W
T
F
S
:
Templates
Utilize various templates within the BitDatePicker, such as custom label templates, day cell templates, and year cell templates.
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Responsive
Enable responsive design for the BitDatePicker, allowing it to adjust its layout and appearance based on the screen size.
Selected date
March 2025
S
M
T
W
T
F
S
8
9
10
11
12
13
Validation
Implement form validation with BitDatePicker using data annotations, ensuring the user selects a valid date before submitting the form.
Style & Class
Explore styling and class customization for BitDatePicker, including component styles, custom classes, and detailed styles.
Component's Style & Class:
Selected date
March 2025
S
M
T
W
T
F
S
Selected date
March 2025
S
M
T
W
T
F
S
Styles & Classes:
Selected date
S
M
T
W
T
F
S
:
Selected date
March 2025
S
M
T
W
T
F
S
RTL
Use BitDatePicker in right-to-left (RTL).
Selected date
March 2025
S
M
T
W
T
F
S
API
BitDatePicker parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AllowTextInput | bool | false | Whether or not the DatePicker allows a string date input. |
| AutoClose | bool | true | Whether the DatePicker closes automatically after selecting the date. |
| CalloutAriaLabel | string | Calendar | Aria label of the DatePicker's callout for screen readers. |
| CalloutHtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional html attributes for the DatePicker's callout. |
| Classes | BitDatePickerClassStyles | null | Custom CSS classes for different parts of the BitDatePicker. |
| Culture | CultureInfo | CultureInfo.CurrentUICulture | CultureInfo for the DatePicker. |
| DateFormat | string? | null | The format of the date in the DatePicker. |
| DayCellTemplate | RenderFragment<DateTimeOffset>? | null | Custom template to render the day cells of the DatePicker. |
| GoToNextMonthTitle | string | Go to next month | The title of the Go to next month button (tooltip). |
| GoToNextYearRangeTitle | string | Next year range {0} - {1} | The title of the Go to next year range button (tooltip). |
| GoToNextYearTitle | string | Go to next year {0} | The title of the Go to next year button (tooltip). |
| GoToPrevMonthTitle | string | Go to previous month | The title of the Go to previous month button (tooltip). |
| GoToPrevYearRangeTitle | string | Previous year range {0} - {1} | The title of the Go to previous year range button (tooltip). |
| GoToPrevYearTitle | string | Go to previous year {0} | The title of the Go to previous year button (tooltip). |
| GoToTodayTitle | string | Go to today | The title of the GoToToday button (tooltip). |
| 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 template for the DatePicker's icon. |
| IconLocation | BitIconLocation | BitIconLocation.Right | Determines the location of the DatePicker's icon. |
| IconName | string | CalendarMirrored | The name of the DatePicker's icon. |
| InvalidErrorMessage | string? | null | The custom validation error message for the invalid value. |
| IsMonthPickerVisible | bool | true | Whether the month picker is shown or hidden. |
| IsOpen | bool | false | Whether or not this DatePicker is open. |
| Label | string? | null | The text of the DatePicker's label. |
| LabelTemplate | RenderFragment? | null | Custom template for the DatePicker's label. |
| MaxDate | DateTimeOffset | null | The maximum date allowed for the DatePicker. |
| MinDate | DateTimeOffset? | null | The minimum date allowed for the DatePicker. |
| MonthCellTemplate | RenderFragment<DateTimeOffset>? | null | Custom template to render the month cells of the DatePicker. |
| MonthPickerToggleTitle | string | {0}, change month | The title of the month picker's toggle (tooltip). |
| OnClick | EventCallback | The callback for clicking on the DatePicker's input. | |
| OnFocus | EventCallback | The callback for focusing the DatePicker's input. | |
| OnFocusIn | EventCallback | The callback for when the focus moves into the DatePicker's input. | |
| OnFocusOut | EventCallback | The callback for when the focus moves out of the DatePicker's input. | |
| Placeholder | string | string.Empty | The placeholder text of the DatePicker's input. |
| Responsive | bool | false | Enables the responsive mode in small screens. |
| SelectedDateAriaAtomic | string | Selected date {0} | The text of selected date aria-atomic of the calendar. |
| ShowClearButton | bool | false | Whether the clear button should be shown or not when the BitDatePicker has a value. |
| ShowCloseButton | bool | false | Whether the DatePicker's close button should be shown or not. |
| ShowGoToToday | bool | true | Whether the GoToToday button should be shown or not. |
| ShowMonthPickerAsOverlay | bool | false | Show month picker on top of date picker when visible. |
| ShowTimePicker | bool | false | Whether or not render the time-picker. |
| ShowWeekNumbers | bool | false | Whether the week number (weeks 1 to 53) should be shown before each week row. |
| StartingValue | DateTimeOffset? | null | Specifies the date and time of the date-picker when it is opened without any selected value. |
| Styles | BitDatePickerClassStyles | null | Custom CSS styles for different parts of the BitDatePicker. |
| Standalone | bool | false | Whether the date-picker is rendered standalone or with the input component and callout. |
| TabIndex | int | 0 | The tabIndex of the DatePicker's input. |
| TimeFormat | BitTimeFormat | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| Underlined | bool | false | Whether or not the Text field of the DatePicker is underlined. |
| WeekNumberTitle | string | Week number {0} | The title of the week number (tooltip). |
| YearCellTemplate | RenderFragment<int>? | null | Custom template to render the year cells of the DatePicker. |
| YearPickerToggleTitle | string | {0}, change year | The title of the year picker's toggle (tooltip). |
| YearRangePickerToggleTitle | string | {0} - {1}, change month | The title of the year range picker's toggle (tooltip). |
| HourStep | int | 1 | Determines increment/decrement steps for date-picker's hour. |
| MinuteStep | int | 1 | Determines increment/decrement steps for date-picker's minute. |
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. |
| Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | bool | false | Disables the validation of the input. |
| OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
| ReadOnly | bool | false | Makes the input read-only. |
| Required | bool | false | Makes the input required. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
BitInputBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| InputElement | ElementReference | The ElementReference of the input element. | |
| FocusAsync() | () => ValueTask | Gives focus to the input element. | |
| FocusAsync(bool preventScroll) | (bool preventScroll) => ValueTask | Gives focus to the input element. |
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. |
| Dir | BitDir? | null | Determines the component direction. |
| 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. |
BitDatePickerClassStyles properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitDatePicker. |
| Focused | string? | null | Custom CSS classes/styles for the focused state of the BitDatePicker. |
| Label | string? | null | Custom CSS classes/styles for the Label of the BitDatePicker. |
| InputWrapper | string? | null | Custom CSS classes/styles for the input wrapper of the BitDatePicker. |
| InputContainer | string? | null | Custom CSS classes/styles for the input container of the BitDatePicker. |
| InputContainer | string? | null | Custom CSS classes/styles for the input container of the BitDatePicker. |
| Input | string? | null | Custom CSS classes/styles for the input of the BitDatePicker. |
| Icon | string? | null | Custom CSS classes/styles for the icon of the BitDatePicker. |
| Overlay | string? | null | Custom CSS classes/styles for the overlay of the BitDatePicker. |
| Callout | string? | null | Custom CSS classes/styles for the callout of the BitDatePicker. |
| CalloutContainer | string? | null | Custom CSS classes/styles for the callout container of the BitDatePicker. |
| Group | string? | null | Custom CSS classes/styles for the group of the BitDatePicker. |
| DayPickerWrapper | string? | null | Custom CSS classes/styles for the day-picker's wrapper of the BitDatePicker. |
| DayPickerHeader | string? | null | Custom CSS classes/styles for the day-picker's header of the BitDatePicker. |
| DayPickerMonth | string? | null | Custom CSS classes/styles for the day-picker's month of the BitDatePicker. |
| DayPickerNavWrapper | string? | null | Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitDatePicker. |
| PrevMonthNavButton | string? | null | Custom CSS classes/styles for the Go to previous month button of the BitDatePicker. |
| PrevMonthNavIcon | string? | null | Custom CSS classes/styles for the Go to previous month icon of the BitDatePicker. |
| GoToTodayButton | string? | null | Custom CSS classes/styles for the Go to today button of the BitDatePicker. |
| GoToTodayIcon | string? | null | Custom CSS classes/styles for the Go to today icon of the BitDatePicker. |
| CloseButton | string? | null | Custom CSS classes/styles for the close button of the BitDatePicker. |
| CloseButtonIcon | string? | null | Custom CSS classes/styles for the close button icon of the BitDatePicker. |
| NextMonthNavButton | string? | null | Custom CSS classes/styles for the Go to next month button of the BitDatePicker. |
| NextMonthNavIcon | string? | null | Custom CSS classes/styles for the Go to next month icon of the BitDatePicker. |
| DaysHeaderRow | string? | null | Custom CSS classes/styles for the header row of the days of the BitDatePicker. |
| WeekNumbersHeader | string? | null | Custom CSS classes/styles for the header of the week numbers of the BitDatePicker. |
| DaysRow | string? | null | Custom CSS classes/styles for each row of the days of the BitDatePicker. |
| WeekNumber | string? | null | Custom CSS classes/styles for the week number of the BitDatePicker. |
| DayButton | string? | null | Custom CSS classes/styles for each day button of the BitDatePicker. |
| TodayDayButton | string? | null | Custom CSS classes/styles for today day button of the BitDatePicker. |
| SelectedDayButton | string? | null | Custom CSS classes/styles for selected day button of the BitDatePicker. |
| TimePickerContainer | string? | null | Custom CSS classes/styles for the time-picker's main container of the BitDatePicker. |
| TimePickerWrapper | string? | null | Custom CSS classes/styles for the time-picker's wrapper of the BitDatePicker. |
| TimePickerHourMinuteSeparator | string? | null | Custom CSS classes/styles for the time-picker's hour/minute separator of the BitDatePicker. |
| TimePickerDivider | string? | null | Custom CSS classes/styles for the time-picker's divider of the BitDatePicker. |
| TimePickerMinuteInput | string? | null | Custom CSS classes/styles for the time-picker's minute input of the BitDatePicker. |
| TimePickerAmPmContainer | string? | null | Custom CSS classes/styles for the time-picker's Am Pm container of the BitDatePicker. |
| TimePickerAmButton | string? | null | Custom CSS classes/styles for the time-picker's Am button of the BitDatePicker. |
| TimePickerPmButton | string? | null | Custom CSS classes/styles for the time-picker's Pm button of the BitDatePicker. |
| Divider | string? | null | Custom CSS classes/styles for the main divider of the BitDatePicker. |
| YearMonthPickerWrapper | string? | null | Custom CSS classes/styles for the year-month-picker's wrapper of the BitDatePicker. |
| MonthPickerHeader | string? | null | Custom CSS classes/styles for the month-picker's header of the BitDatePicker. |
| YearPickerToggleButton | string? | null | Custom CSS classes/styles for the year-picker's toggle button of the BitDatePicker. |
| MonthPickerNavWrapper | string? | null | Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDatePicker. |
| PrevYearNavButton | string? | null | Custom CSS classes/styles for the Go to previous year button of the BitDatePicker. |
| PrevYearNavIcon | string? | null | Custom CSS classes/styles for the Go to previous year icon of the BitDatePicker. |
| NextYearNavButton | string? | null | Custom CSS classes/styles for the Go to next year button of the BitDatePicker. |
| NextYearNavIcon | string? | null | Custom CSS classes/styles for the Go to next year icon of the BitDatePicker. |
| MonthsContainer | string? | null | Custom CSS classes/styles for the months container of the BitDatePicker. |
| MonthsRow | string? | null | Custom CSS classes/styles for each row of the months of the BitDatePicker. |
| MonthButton | string? | null | Custom CSS classes/styles for each month button of the BitDatePicker. |
| YearPickerHeader | string? | null | Custom CSS classes/styles for the year-picker's header of the BitDatePicker. |
| MonthPickerToggleButton | string? | null | Custom CSS classes/styles for the month-picker's toggle button of the BitDatePicker. |
| YearPickerNavWrapper | string? | null | Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitDatePicker. |
| PrevYearRangeNavButton | string? | null | Custom CSS classes/styles for the Go to previous year-range button of the BitDatePicker. |
| PrevYearRangeNavIcon | string? | null | Custom CSS classes/styles for the Go to previous year-range icon of the BitDatePicker. |
| NextYearRangeNavButton | string? | null | Custom CSS classes/styles for the Go to next year-range button of the BitDatePicker. |
| NextYearRangeNavIcon | string? | null | Custom CSS classes/styles for the Go to next year-range icon of the BitDatePicker. |
| YearsContainer | string? | null | Custom CSS classes/styles for the years container of the BitDatePicker. |
| YearsRow | string? | null | Custom CSS classes/styles for each row of the years of the BitDatePicker. |
| YearButton | string? | null | Custom CSS classes/styles for each year button of the BitDatePicker. |
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). |
BitDir enum
Name |
Value |
Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
- On this page