- bit BlazorUI

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
















Min & Max
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


Style & Class
Component's Style & Class:




Styles & Classes:

Binding

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.



Templates









Responsive

Implementation

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.
IsResponsive bool false Enables the responsive mode in small screens.
IsUnderlined bool false Whether or not the Text field of the DateRangePicker is underlined.
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.
OnChange EventCallback<BitDateRangePickerValue?> Callback for when the value changes in the DateRangePicker.
Placeholder string string.Empty The placeholder text of the DateRangePicker's input.
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.
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.
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).
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.
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.
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).