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
Show code
Explore basic configurations of the BitDatePicker, including labels, placeholders, week numbers, and highlighting features.
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
39
40
41
42
43
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
Min & Max
Show code
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
October 2024
S
M
T
W
T
F
S
Min: Now.AddMonths(-2)
Max: Now.AddMonths(+1)
Selected date
October 2024
S
M
T
W
T
F
S
Min: Now.AddYears(-5)
Max: Now.AddYears(+1)
Selected date
October 2024
S
M
T
W
T
F
S
Text input
Show code
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
October 2024
S
M
T
W
T
F
S
Date format
Show code
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
October 2024
S
M
T
W
T
F
S
Style & Class
Show code
Explore styling and class customization for BitDatePicker, including component styles, custom classes, and detailed styles.
Component's Style & Class:
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Styles & Classes:
Selected date
S
M
T
W
T
F
S
:
Selected date
October 2024
S
M
T
W
T
F
S
Binding
Show code
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
Show code
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
Mehr 1403
S
Y
D
S
C
P
J
Templates
Show code
Utilize various templates within the BitDatePicker, such as custom label templates, day cell templates, and year cell templates.
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Selected date
October 2024
S
M
T
W
T
F
S
Responsive
Show code
Enable responsive design for the BitDatePicker, allowing it to adjust its layout and appearance based on the screen size.
Selected date
October 2024
S
M
T
W
T
F
S
39
40
41
42
43
Hour/Minute step
Show code
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
:
Standalone
Show code
Use the BitDatePicker in a standalone mode, allowing it to function independently without a surrounding form or container.
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
October 2024
S
M
T
W
T
F
S
39
40
41
42
43
Selected date
October 2024
S
M
T
W
T
F
S
Selected date
S
M
T
W
T
F
S
:
Validation
Show code
Implement form validation with BitDatePicker using data annotations, ensuring the user selects a valid date before submitting the form.
RTL
Show code
Use BitDatePicker in right-to-left (RTL).
Selected date
October 2024
S
M
T
W
T
F
S
API
BitDatePicker parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitInputBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitInputBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitDatePickerClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitIconLocation enum
Name |
Value |
Description |
---|---|---|
BitTimeFormat enum
Name |
Value |
Description |
---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitDir enum
Name |
Value |
Description |
---|---|---|
- On this page