DateRangePicker - bit BlazorUI
Home Docs

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
Disabled

Week numbers
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 BitDateRangePicker 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 BitDateRangePicker 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 BitDateRangePicker.
Two-way binding
Localization
By default, BitDateRangePicker 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 the BitDateRangePicker.


Value format
Custom icon name
Responsive
AutoClose
You can disable the auto-close feature
With time
Start: 01/17/2020 00:00:00 +00:00
End: 01/25/2020 00:00:00 +00:00

Implementation

BitDateRangePicker parameters
Name
Type
Default value
Description
AllowTextInput bool false Whether the DateRangePicker allows input a date string directly or not.
AutoClose bool true Whether the DateRangePicker closes automatically after selecting the second value 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 DateRangePicker.
DayCellTemplate RenderFragment<DateTimeOffset>? null Used to customize how content inside the day cell is rendered.
DateFormat string? null Date format like "yyyy/MM/dd".
GoToToday string Go to today GoToToday text for the DateRangePicker.
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 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.
IconTemplate RenderFragment? null Custom DateRangePicker icon template.
IconLocation BitIconLocation BitIconLocation.Right DateRangePicker icon location
IconName string CalendarMirrored Optional DateRangePicker icon.
IsMonthPickerVisible bool true Whether the month picker is shown beside the day picker or hidden.
IsOpen bool false Whether or not this DateRangePicker 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 Label for the DateRangePicker.
LabelTemplate RenderFragment? null Used to customize the label for the DateRangePicker.
MaxDate DateTimeOffset? null Maximum date for the DateRangePicker
MinDate DateTimeOffset? null Minimum date for the DateRangePicker
MonthCellTemplate RenderFragment<DateTimeOffset>? null Used to customize how content inside the month cell is rendered.
OnClick EventCallback Callback for when clicking on DateRangePicker input.
OnFocusIn EventCallback Callback for when focus moves into the DateRangePicker input.
OnFocusOut EventCallback Callback for when clicking on DateRangePicker input.
OnSelectDate EventCallback<BitDateRangePickerValue?> 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 DateRangePicker.
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 BitDateRangePickerValue? null The value of DateRangePicker.
ValueChanged EventCallback<BitDateRangePickerValue?> Callback for when the on date value changed.
ValueFormat string Start: {0} - End: {1} ValueFormat for the DateRangePicker.
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.
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.
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).