DateRangePicker

Picking a date range can be tough without context. A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates 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 BitDateRangePicker, including labels, placeholders, week numbers and highlighting features.

Basic DateRangePicker

Disabled

PlaceHolder

Week numbers

Highlight months

TimePicker

Custom Icon

Disabled AutoClose

Show clear button when has a value

StartingValue: December 2020

Start Time: 10:12

End Time: 16:59

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)

Min: Now.AddMonths(-2)

Max: Now.AddMonths(+1)

Min: Now.AddYears(-5)

Max: Now.AddYears(+1)

MaxRange: 2 days, 4 hours and 30 minutes

Formatting

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

DateFormat: 'dd=MM(yy)'

ValueFormat: 'Dep: {0}, Arr: {1}'

Binding

Bind a selected date to a model or view, allowing two-way data binding with the BitDateRangePicker.

From: 01/17/2020 00:00:00 +00:00

To: 01/25/2020 00:00:00 +00:00

Culture

By default, BitDateRangePicker 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.

fa-IR culture with Farsi names

fa-IR culture with Fingilish names

Templates

Utilize various templates within the BitDateRangePicker, such as custom label templates, day cell templates, and year cell templates.

Custom label

DayCellTemplate

MonthCellTemplate

YearCellTemplate

Responsive

Enable responsive design for the BitDateRangePicker, allowing it to adjust its layout and appearance based on the screen size.

Responsive DateRangePicker

Hour/Minute step

Adjust the increment step for hours and minutes when using the BitDateRangePicker's time selection feature.

HourStep = 2

MinuteStep = 15

Standalone

Use the BitDateRangePicker in a standalone mode, allowing it to function independently without a surrounding form or container.

Basic DatePicker

Disabled

Week numbers

Highlight months

TimePicker

Style & Class

Explore styling and class customization for BitDateRangePicker, including component styles, custom classes, and detailed styles.

Component's Style & Class:

Styles & Classes:

Select a date

RTL

Use BitDateRangePicker in right-to-left (RTL).

API

BitDateRangePicker parameters

Name	Type	Default value	Description
AllowTextInput	bool	false	Whether or not the DateRangePicker allows string date inputs.
AutoClose	bool	true	Whether the DateRangePicker closes automatically after selecting the second value.
CalloutAriaLabel	string	Calendar	Aria label of the DateRangePicker's callout for screen readers.
CalloutHtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional html attributes for the DateRangePicker's callout.
Classes	BitDateRangePickerClassStyles	null	Custom CSS classes for different parts of the BitDateRangePicker.
CloseButtonTitle	string	Close date range picker	The title of the close button (tooltip).
Culture	CultureInfo	CultureInfo.CurrentUICulture	CultureInfo for the DateRangePicker.
DateFormat	string?	null	The format of the date in the DateRangePicker.
DayCellTemplate	RenderFragment<DateTimeOffset>?	null	Custom template to render the day cells of the DateRangePicker.
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	true	Determines if the DateRangePicker 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.
HideTimePickerTitle	string	Hide time picker	The title of the HideTimePicker button (tooltip).
IconTemplate	RenderFragment?	null	Custom template for the DateRangePicker's icon.
IconLocation	BitIconLocation	BitIconLocation.Right	Determines the location of the DateRangePicker's icon.
IconName	string	CalendarMirrored	The name of the DateRangePicker'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 the DateRangePicker's callout is open.
Label	string?	null	The text of the DateRangePicker's label.
LabelTemplate	RenderFragment?	null	Custom template for the DateRangePicker's label.
MaxRange	TimeSpan?	null	The maximum range of day and times allowed for selection in DateRangePicker.
MaxDate	DateTimeOffset?	null	The maximum date allowed for the DateRangePicker.
MinDate	DateTimeOffset?	null	The minimum date allowed for the DateRangePicker.
MonthCellTemplate	RenderFragment<DateTimeOffset>?	null	Custom template to render the month cells of the DateRangePicker.
MonthPickerToggleTitle	string	{0}, change month	The title of the month picker's toggle (tooltip).
OnClick	EventCallback		The callback for clicking on the DateRangePicker's input.
OnFocus	EventCallback		The callback for focusing the DateRangePicker's input.
OnFocusIn	EventCallback		The callback for when the focus moves into the DateRangePicker's input.
OnFocusOut	EventCallback		The callback for when the focus moves out of the DateRangePicker's input.
Placeholder	string	string.Empty	The placeholder text of the DateRangePicker's input.
Responsive	bool	false	Enables the responsive mode in small screens.
ShowClearButton	bool	false	Whether the clear button should be shown or not when the DateRangePicker has a value.
ShowCloseButton	bool	false	Whether the DateRangePicker'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 range picker when visible.
ShowTimePicker	bool	false	Whether or not render the time-picker.
ShowTimePickerAsOverlay	bool	false	Show month picker on top of date range picker when visible.
ShowTimePickerTitle	string	Show time picker	The title of the ShowTimePicker button (tooltip).
ShowWeekNumbers	bool	false	Whether the week number (weeks 1 to 53) should be shown before each week row.
Standalone	bool	false	Whether the DateRangePicker is rendered standalone or with the input component and callout.
StartingValue	BitDateRangePickerValue?	null	Specifies the date and time of the date and time picker when it is opened without any selected value.
Styles	BitDateRangePickerClassStyles	null	Custom CSS styles for different parts of the BitDateRangePicker.
TabIndex	int	0	The tabIndex of the DateRangePicker's input.
TimeFormat	BitTimeFormat	BitTimeFormat.TwentyFourHours	Time format of the time-pickers, 24H or 12H.
Underlined	bool	false	Whether or not the Text field of the DateRangePicker is underlined.
ValueFormat	string	Start: {0} - End: {1}	The string format used to show the DateRangePicker's value in its input.
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 DateRangePicker.
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 DateRangePicker's hour.
MinuteStep	int	1	Determines increment/decrement steps for DateRangePicker'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.
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	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.

BitDateRangePickerValue properties

Name	Type	Default value	Description
StartDate	DateTimeOffset?	null	Indicates the beginning of the date range.
EndDate	DateTimeOffset?	null	Indicates the end of the date range.

BitDateRangePickerClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitDateRangePicker.
Focused	string?	null	Custom CSS classes/styles for the focused state of the BitDateRangePicker.
Label	string?	null	Custom CSS classes/styles for the Label of the BitDateRangePicker.
InputWrapper	string?	null	Custom CSS classes/styles for the input wrapper of the BitDateRangePicker.
InputContainer	string?	null	Custom CSS classes/styles for the input container of the BitDateRangePicker.
InputContainer	string?	null	Custom CSS classes/styles for the input container of the BitDateRangePicker.
Input	string?	null	Custom CSS classes/styles for the input of the BitDateRangePicker.
Icon	string?	null	Custom CSS classes/styles for the icon of the BitDateRangePicker.
Overlay	string?	null	Custom CSS classes/styles for the overlay of the BitDateRangePicker.
Callout	string?	null	Custom CSS classes/styles for the callout of the BitDateRangePicker.
CalloutContainer	string?	null	Custom CSS classes/styles for the callout container of the BitDateRangePicker.
Group	string?	null	Custom CSS classes/styles for the group of the BitDateRangePicker.
DayPickerWrapper	string?	null	Custom CSS classes/styles for the day-picker's wrapper of the BitDateRangePicker.
DayPickerHeader	string?	null	Custom CSS classes/styles for the day-picker's header of the BitDateRangePicker.
DayPickerMonth	string?	null	Custom CSS classes/styles for the day-picker's month of the BitDateRangePicker.
DayPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitDateRangePicker.
PrevMonthNavButton	string?	null	Custom CSS classes/styles for the Go to previous month button of the BitDateRangePicker.
PrevMonthNavIcon	string?	null	Custom CSS classes/styles for the Go to previous month icon of the BitDateRangePicker.
GoToTodayButton	string?	null	Custom CSS classes/styles for the Go to today button of the BitDateRangePicker.
GoToTodayIcon	string?	null	Custom CSS classes/styles for the Go to today icon of the BitDateRangePicker.
CloseButton	string?	null	Custom CSS classes/styles for the close button of the BitDateRangePicker.
CloseButtonIcon	string?	null	Custom CSS classes/styles for the close button icon of the BitDateRangePicker.
NextMonthNavButton	string?	null	Custom CSS classes/styles for the Go to next month button of the BitDateRangePicker.
NextMonthNavIcon	string?	null	Custom CSS classes/styles for the Go to next month icon of the BitDateRangePicker.
DaysHeaderRow	string?	null	Custom CSS classes/styles for the header row of the days of the BitDateRangePicker.
WeekNumbersHeader	string?	null	Custom CSS classes/styles for the header of the week numbers of the BitDateRangePicker.
DaysRow	string?	null	Custom CSS classes/styles for each row of the days of the BitDateRangePicker.
WeekNumber	string?	null	Custom CSS classes/styles for the week number of the BitDateRangePicker.
DayButton	string?	null	Custom CSS classes/styles for each day button of the BitDateRangePicker.
TodayDayButton	string?	null	Custom CSS classes/styles for today day button of the BitDateRangePicker.
StartDayButton	string?	null	Custom CSS classes/styles for selected start day button of the BitDateRangePicker.
SelectedDayButtons	string?	null	Custom CSS classes/styles for selected day buttons of the BitDateRangePicker.
EndDayButton	string?	null	Custom CSS classes/styles for selected end day button of the BitDateRangePicker.
StartAndEndSelectionDays	string?	null	Custom CSS classes/styles for selected start and end day buttons of the BitDateRangePicker.
TimePickerContainer	string?	null	Custom CSS classes/styles for the time-picker's main container of the BitDateRangePicker.
StartTimePickerWrapper	string?	null	Custom CSS classes/styles for the start time-picker's wrapper of the BitDateRangePicker.
EndTimePickerWrapper	string?	null	Custom CSS classes/styles for the end time-picker's wrapper of the BitDateRangePicker.
TimePickerWrapper	string?	null	Custom CSS classes/styles for the time-picker's wrapper of the BitDateRangePicker.
TimePickerHourInput	string?	null	Custom CSS classes/styles for the time-picker's hour input of the BitDateRangePicker.
TimePickerDivider	string?	null	Custom CSS classes/styles for the time-picker's divider of the BitDateRangePicker.
StartTimePickerAmPmContainer	string?	null	Custom CSS classes/styles for the start time-picker's minute input of the BitDateRangePicker.
EndTimePickerAmPmContainer	string?	null	Custom CSS classes/styles for the end time-picker's Am Pm container of the BitDateRangePicker.
TimePickerAmPmContainer	string?	null	Custom CSS classes/styles for the time-picker's Am Pm container of the BitDateRangePicker.
TimePickerAmPmContainer	string?	null	Custom CSS classes/styles for the time-picker's Am Pm container of the BitDateRangePicker.
TimePickerAmButton	string?	null	Custom CSS classes/styles for the time-picker's Am button of the BitDateRangePicker.
TimePickerPmButton	string?	null	Custom CSS classes/styles for the time-picker's Pm button of the BitDateRangePicker.
Divider	string?	null	Custom CSS classes/styles for the main divider of the BitDateRangePicker.
YearMonthPickerWrapper	string?	null	Custom CSS classes/styles for the year-month-picker's wrapper of the BitDateRangePicker.
MonthPickerHeader	string?	null	Custom CSS classes/styles for the month-picker's header of the BitDateRangePicker.
YearPickerToggleButton	string?	null	Custom CSS classes/styles for the year-picker's toggle button of the BitDateRangePicker.
MonthPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDateRangePicker.
PrevYearNavButton	string?	null	Custom CSS classes/styles for the Go to previous year button of the BitDateRangePicker.
PrevYearNavIcon	string?	null	Custom CSS classes/styles for the Go to previous year icon of the BitDateRangePicker.
NextYearNavButton	string?	null	Custom CSS classes/styles for the Go to next year button of the BitDateRangePicker.
NextYearNavIcon	string?	null	Custom CSS classes/styles for the Go to next year icon of the BitDateRangePicker.
MonthsContainer	string?	null	Custom CSS classes/styles for the months container of the BitDateRangePicker.
MonthsRow	string?	null	Custom CSS classes/styles for each row of the months of the BitDateRangePicker.
MonthButton	string?	null	Custom CSS classes/styles for each month button of the BitDateRangePicker.
YearPickerHeader	string?	null	Custom CSS classes/styles for the year-picker's header of the BitDateRangePicker.
MonthPickerToggleButton	string?	null	Custom CSS classes/styles for the month-picker's toggle button of the BitDateRangePicker.
YearPickerNavWrapper	string?	null	Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitDateRangePicker.
PrevYearRangeNavButton	string?	null	Custom CSS classes/styles for the Go to previous year-range button of the BitDateRangePicker.
PrevYearRangeNavIcon	string?	null	Custom CSS classes/styles for the Go to previous year-range icon of the BitDateRangePicker.
NextYearRangeNavButton	string?	null	Custom CSS classes/styles for the Go to next year-range button of the BitDateRangePicker.
NextYearRangeNavIcon	string?	null	Custom CSS classes/styles for the Go to next year-range icon of the BitDateRangePicker.
YearsContainer	string?	null	Custom CSS classes/styles for the years container of the BitDateRangePicker.
YearsRow	string?	null	Custom CSS classes/styles for each row of the years of the BitDateRangePicker.
YearButton	string?	null	Custom CSS classes/styles for each year button of the BitDateRangePicker.

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