# DatePicker
## Description
A BitDatePicker picks a date, or a date and time, from a drop-down or inline calendar with day, month and year views. It supports min/max, disabled and highlighted dates, typed input, any culture, calendar and time zone, and the WAI-ARIA combobox and grid keyboard patterns.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowDeselect | `bool` | false | Whether selecting the already selected date deselects it, clearing the value. The callout stays open after a deselection, so another date can be picked right away. |
| AllowedHours | `Func<int, bool>?` | null | The hours the time picker can be set to, on top of what MinTime, MaxTime and the bounds of the day already allow. The spin buttons skip over the hours it rejects, a typed one snaps to the nearest it accepts, and a date entered as text whose time lands on one fails validation. |
| AllowedMinutes | `Func<int, bool>?` | null | The minutes the time picker can be set to, on top of what MinTime, MaxTime and the bounds of the day already allow. |
| AllowedSeconds | `Func<int, bool>?` | null | The seconds the time picker can be set to, on top of what MinTime, MaxTime and the bounds of the day already allow. It only has an effect while ShowSeconds is set. |
| AllowTextInput | `bool` | false | Whether or not the DatePicker allows a string date input. |
| AriaDescription | `string?` | null | Detailed description of the DatePicker for screen readers alone, rendered visually hidden and referenced by the input's aria-describedby after Description. |
| AutoClose | `bool` | true | Whether the DatePicker closes automatically after selecting the date. It has no effect while the time picker is shown, where the callout stays open so the time of the selected day can be set as well. |
| AutoFocus | `bool` | false | Whether the input of the picker gets the focus as soon as it renders for the first time. A standalone picker carries its value in a hidden input nobody is meant to land on, so it has nothing to place the focus on. |
| CalloutAriaLabel | `string` | Calendar | Aria label of the DatePicker's callout for screen readers. |
| CalloutFooterTemplate | `RenderFragment?` | null | Custom template to render at the bottom of the DatePicker's callout, below the pickers (e.g. preset buttons that set the value from the code). |
| CalloutHeaderTemplate | `RenderFragment?` | null | Custom template to render at the top of the DatePicker's callout, above the pickers. |
| 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. |
| ClearButtonIcon | `BitIconInfo?` | null | The icon to display inside the clear button. Takes precedence over ClearButtonIconName when both are set. |
| ClearButtonIconName | `string?` | null | The name of the clear button's icon from the built-in Fluent UI icon set. |
| ClearButtonTitle | `string` | Clear date | The title (tooltip) and the accessible name of the clear button. |
| CloseButtonIcon | `BitIconInfo?` | null | The icon to display inside the close button. Takes precedence over CloseButtonIconName when both are set. |
| CloseButtonIconName | `string?` | null | The name of the close button's icon from the built-in Fluent UI icon set. |
| CloseButtonTitle | `string` | Close date picker | The title of the close button (tooltip). |
| Color | `BitColor?` | null | The general color of the DatePicker that applies to the today day button, the highlighted current month, and the selected AM/PM button. |
| ContinuousSpinDelay | `int` | 400 | The delay in milliseconds before the hour/minute starts changing continuously while an increase/decrease button of the time picker is held down. |
| ContinuousSpinInterval | `int` | 75 | The interval in milliseconds between two consecutive changes while an increase/decrease button of the time picker is held down. |
| Culture | `CultureInfo` | CultureInfo.CurrentUICulture | CultureInfo for the DatePicker. |
| DateFormat | `string?` | null | The format the date is written with, and the only one a typed date is then read with. Without it the short date pattern of the culture is used (plus the time pattern where the time picker is on), and a typed date is read more freely: the day with the time left off, with the seconds left off or spelled out, and in either clock format, are all accepted. |
| DateFormatAriaDescription | `string` | Expected format: {0} | The accessible description of the input of a picker that accepts a typed date, which the pattern the date is read with is formatted into. A placeholder is gone as soon as the first character is typed, so the pattern is carried by a description of the input instead. Set it to an empty string to leave the input without one. |
| DayCellTemplate | `RenderFragment<DateTimeOffset>?` | null | Custom template to render the day cells of the DatePicker. |
| Description | `string?` | null | The helper text rendered below the DatePicker, also tied to its input as its accessible description. |
| DescriptionTemplate | `RenderFragment?` | null | The custom template for the description, which replaces Description and is tied to the input the same way. |
| DisabledDateErrorMessage | `string?` | null | The custom validation error message for a typed value that the DatePicker does not allow to be selected, through DisabledDates, DisabledDaysOfWeek or IsDateDisabled. |
| DisabledDates | `IEnumerable<DateTimeOffset>?` | null | The list of dates that are disabled (not selectable) in the DatePicker, in addition to MinDate and MaxDate. |
| DisabledDaysOfWeek | `IEnumerable<DayOfWeek>?` | null | The days of the week that are disabled (not selectable) in the DatePicker (e.g. weekends). |
| DisableFuture | `bool` | false | Disables all days after today, exactly as a MaxDate of today would. When both are set, the earlier of the two bounds wins. |
| DisablePast | `bool` | false | Disables all days before today, exactly as a MinDate of today would. When both are set, the later of the two bounds wins. |
| DisallowedTimeErrorMessage | `string?` | null | The custom validation error message for a date entered as text whose time of day the DatePicker does not allow, through MinTime, MaxTime, AllowedHours, AllowedMinutes or AllowedSeconds. |
| DropDirection | `BitDropDirection` | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the callout. |
| ErrorMessage | `string?` | null | The message shown below the DatePicker for a rejection the app decided on its own (a server response, a cross-field rule). It marks the DatePicker invalid, is referenced by the input's aria-describedby and is announced as it appears. |
| ErrorMessageTemplate | `RenderFragment?` | null | The custom content of the error message, which replaces ErrorMessage and marks the DatePicker invalid the same way. |
| FirstDayOfWeek | `DayOfWeek?` | null | Overrides the first day of the week of the day picker. If not set, the first day of the week of the Culture is used. |
| FixedWeeks | `bool` | false | Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the height of the calendar fixed while navigating between the months. |
| GetDayClass | `Func<DateTimeOffset, string?>?` | null | Custom function to provide additional CSS classes for each day button 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). |
| GoToTodayIcon | `BitIconInfo?` | null | The icon to display inside the GoToToday button. Takes precedence over GoToTodayIconName when both are set. |
| GoToTodayIconName | `string?` | null | The name of the GoToToday button's icon from the built-in Fluent UI icon set. |
| GoToTodayTitle | `string` | Go to today | The title of the GoToToday button (tooltip). |
| HasBorder | `bool` | true | Determines if the DatePicker has a border. |
| HideTimePickerIcon | `BitIconInfo?` | null | The icon to display inside the HideTimePicker button. Takes precedence over HideTimePickerIconName when both are set. |
| HideTimePickerIconName | `string?` | null | The name of the HideTimePicker button's icon from the built-in Fluent UI icon set. |
| HideTimePickerTitle | `string` | Hide time picker | The title of the HideTimePicker button (tooltip). |
| HighlightCurrentMonth | `bool` | false | Whether the month picker should highlight the current month. |
| HighlightedDates | `IEnumerable<DateTimeOffset>?` | null | The list of dates that are highlighted (marked) in the day picker. |
| HighlightedDateAriaLabel | `string` | {0}, highlighted | The accessible name of a day of HighlightedDates, which its full date is formatted into. A highlighted day is marked by a background alone, so the mark is said in the name of the day as well. Set it to an empty string to name a highlighted day like any other. |
| HighlightSelectedMonth | `bool` | false | Whether the month picker should highlight the selected month. |
| HighlightToday | `bool` | true | Whether the day picker should highlight today's day. It only affects the visual style of the day cell; the accessibility attributes still report the day as the current date. |
| HourStep | `int` | 1 | The step, in hours, the spin buttons move the hour by. A step greater than 1 lays a grid over the day that every hour the picker produces sits on, starting at the hour of MinTime and at midnight where there is none - the buttons, the PageUp/PageDown keys and what is typed into the hour alike. |
| Icon | `BitIconInfo?` | null | The icon to display in the DatePicker input using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconLocation | `BitIconLocation` | BitIconLocation.Right | Determines the location of the DatePicker's icon. |
| IconName | `string?` | null | The name of the DatePicker's icon from the built-in Fluent UI icon set. For external icon libraries, use Icon instead. |
| IconTemplate | `RenderFragment?` | null | Custom template for the DatePicker's icon. |
| Invalid | `bool` | false | Marks the DatePicker invalid without an EditContext having said so: the same look and aria-invalid a failing validation gives it. ErrorMessage implies it. |
| InvalidErrorMessage | `string?` | null | The custom validation error message for the invalid value. |
| IsDateDisabled | `Func<DateTimeOffset, bool>?` | null | Custom function to determine if a specific date is disabled (not selectable) in the DatePicker. |
| IsMonthPickerVisible | `bool` | true | Whether the month picker is shown next to the day picker or hidden. It has no effect in the MonthPicker mode, where the month picker is the only view. |
| 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. The days after it are ruled out as a whole and the day it falls on stays selectable; where a time picker is on screen, the time it carries bounds the hours of that day too. |
| MaxTime | `TimeSpan?` | null | The latest time of day the time picker can be set to, on every day the DatePicker offers - the time-of-day bound MaxDate is not. Where both bound the same day, the earlier of the two wins. |
| MinDate | `DateTimeOffset?` | null | The minimum date allowed for the DatePicker. The days before it are ruled out as a whole and the day it falls on stays selectable; where a time picker is on screen, the time it carries bounds the hours of that day too. |
| MinTime | `TimeSpan?` | null | The earliest time of day the time picker can be set to, on every day the DatePicker offers - the time-of-day bound MinDate is not. Where both bound the same day, the later of the two wins. |
| MonthCount | `int` | 1 | The number of consecutive months rendered side by side in the day picker (1 to 3). Such a strip always draws six week rows, never draws the days of the adjacent months, and falls back to fewer months on a viewport too narrow to hold them. |
| PagedNavigation | `bool` | false | Whether the previous and next navigation buttons move the day picker by all of its rendered months instead of one. It has no effect when MonthCount renders a single month. |
| MinuteStep | `int` | 1 | The step, in minutes, the spin buttons move the minute by. A step greater than 1 lays a grid over the hour that every minute the picker produces sits on, starting at the minute of MinTime and at the top of the hour where there is none - which is what turns it into a five-minute or quarter-hour picker. The buttons, the PageUp/PageDown keys and what is typed into the minute are all held to it. |
| Mode | `BitDatePickerMode` | BitDatePickerMode.DatePicker | The selection mode: a day (DatePicker), a month (MonthPicker) or a year (YearPicker). A month or a year lands on its first day the Min/Max range and the day rules allow; the time picker is only offered in the DatePicker mode. |
| 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). |
| NextMonthNavIcon | `BitIconInfo?` | null | The icon to display inside the next-month navigation button. Takes precedence over NextMonthNavIconName when both are set. |
| NextMonthNavIconName | `string?` | null | The name of the next-month navigation button's icon from the built-in Fluent UI icon set. |
| NextYearNavIcon | `BitIconInfo?` | null | The icon to display inside the next-year navigation button. Takes precedence over NextYearNavIconName when both are set. |
| NextYearNavIconName | `string?` | null | The name of the next-year navigation button's icon from the built-in Fluent UI icon set. |
| NextYearRangeNavIcon | `BitIconInfo?` | null | The icon to display inside the next-year-range navigation button. Takes precedence over NextYearRangeNavIconName when both are set. |
| NextYearRangeNavIconName | `string?` | null | The name of the next-year-range navigation button's icon from the built-in Fluent UI icon set. |
| NowButtonIcon | `BitIconInfo?` | null | The icon to display inside the now button. Takes precedence over NowButtonIconName when both are set. |
| NowButtonIconName | `string?` | null | The name of the now button's icon from the built-in Fluent UI icon set. |
| NowButtonTitle | `string` | Go to now | The title of the now button (tooltip). The button sets the time of the selected day to the current time - and, on a picker with no value yet, picks today along with it. |
| OnClear | `EventCallback` | | The callback that is called when the value gets cleared by the clear button. |
| OnClick | `EventCallback` | | The callback for clicking on the DatePicker's input. |
| OnClose | `EventCallback` | | Callback for when the callout is closed. |
| 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. |
| OnMonthChange | `EventCallback<DateTimeOffset>` | | The callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month. |
| OnOpen | `EventCallback` | | Callback for when the callout is opened. |
| OnSelectDate | `EventCallback<DateTimeOffset?>` | | The callback for when the user selects a date. |
| OutOfRangeErrorMessage | `string?` | null | The custom validation error message for a typed value that falls outside of the MinDate and MaxDate range. |
| Placeholder | `string` | string.Empty | The placeholder text of the DatePicker's input. |
| PrevMonthNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-month navigation button. Takes precedence over PrevMonthNavIconName when both are set. |
| PrevMonthNavIconName | `string?` | null | The name of the previous-month navigation button's icon from the built-in Fluent UI icon set. |
| PrevYearNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-year navigation button. Takes precedence over PrevYearNavIconName when both are set. |
| PrevYearNavIconName | `string?` | null | The name of the previous-year navigation button's icon from the built-in Fluent UI icon set. |
| PrevYearRangeNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-year-range navigation button. Takes precedence over PrevYearRangeNavIconName when both are set. |
| PrevYearRangeNavIconName | `string?` | null | The name of the previous-year-range navigation button's icon from the built-in Fluent UI icon set. |
| Responsive | `bool` | false | Enables the responsive mode in small screens. |
| SecondStep | `int` | 1 | The step, in seconds, the spin buttons move the second by. The grid it lays over the minute starts at the second of MinTime, and at the top of the minute where there is none. |
| 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. |
| ShowNowButton | `bool` | true | Whether the now button should be shown or not. |
| ShowOutsideDays | `bool` | true | Whether the days of the previous and next months should be shown in the day picker. It has no effect when MonthCount renders more than one month, since those days would then appear in two panes at once. |
| ShowSeconds | `bool` | false | Whether the time picker shows a seconds field beside the hour and the minute, which adds the second to the value and to the default date format. |
| ShowTimePicker | `bool` | false | Whether or not render the time-picker. |
| ShowTimePickerAsOverlay | `bool` | false | Show the time picker as an overlay on top of the date picker when visible. |
| ShowTimePickerIcon | `BitIconInfo?` | null | The icon to display inside the ShowTimePicker button. Takes precedence over ShowTimePickerIconName when both are set. |
| ShowTimePickerIconName | `string?` | null | The name of the ShowTimePicker button's icon from the built-in Fluent UI icon set. |
| 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. |
| Size | `BitSize?` | null | The size of the DatePicker. |
| Standalone | `bool` | false | Whether the date-picker is rendered standalone or with the input component and callout. |
| 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. |
| TimeFormat | `BitTimeFormat` | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| TimePickerDecreaseHourIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's decrease-hour button. Takes precedence over TimePickerDecreaseHourIconName when both are set. |
| TimePickerDecreaseHourIconName | `string?` | null | The name of the time-picker's decrease-hour button icon from the built-in Fluent UI icon set. |
| TimePickerDecreaseMinuteIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's decrease-minute button. Takes precedence over TimePickerDecreaseMinuteIconName when both are set. |
| TimePickerDecreaseMinuteIconName | `string?` | null | The name of the time-picker's decrease-minute button icon from the built-in Fluent UI icon set. |
| TimePickerDecreaseSecondIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's decrease-second button. Takes precedence over TimePickerDecreaseSecondIconName when both are set. |
| TimePickerDecreaseSecondIconName | `string?` | null | The name of the time-picker's decrease-second button icon from the built-in Fluent UI icon set. |
| TimePickerDecreaseHourTitle | `string` | Decrease hour | The title (tooltip) and the accessible name of the time-picker's decrease-hour button. |
| TimePickerDecreaseMinuteTitle | `string` | Decrease minute | The title (tooltip) and the accessible name of the time-picker's decrease-minute button. |
| TimePickerHourTitle | `string` | Hour | The title (tooltip) and the accessible name of the time-picker's hour input. |
| TimePickerIncreaseHourIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's increase-hour button. Takes precedence over TimePickerIncreaseHourIconName when both are set. |
| TimePickerIncreaseHourIconName | `string?` | null | The name of the time-picker's increase-hour button icon from the built-in Fluent UI icon set. |
| TimePickerIncreaseMinuteIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's increase-minute button. Takes precedence over TimePickerIncreaseMinuteIconName when both are set. |
| TimePickerIncreaseMinuteIconName | `string?` | null | The name of the time-picker's increase-minute button icon from the built-in Fluent UI icon set. |
| TimePickerIncreaseHourTitle | `string` | Increase hour | The title (tooltip) and the accessible name of the time-picker's increase-hour button. |
| TimePickerIncreaseMinuteTitle | `string` | Increase minute | The title (tooltip) and the accessible name of the time-picker's increase-minute button. |
| TimePickerDecreaseSecondTitle | `string` | Decrease second | The title (tooltip) and the accessible name of the time-picker's decrease-second button. |
| TimePickerIncreaseSecondIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's increase-second button. Takes precedence over TimePickerIncreaseSecondIconName when both are set. |
| TimePickerIncreaseSecondIconName | `string?` | null | The name of the time-picker's increase-second button icon from the built-in Fluent UI icon set. |
| TimePickerIncreaseSecondTitle | `string` | Increase second | The title (tooltip) and the accessible name of the time-picker's increase-second button. |
| TimePickerMinuteTitle | `string` | Minute | The title (tooltip) and the accessible name of the time-picker's minute input. |
| TimePickerSecondTitle | `string` | Second | The title (tooltip) and the accessible name of the time-picker's second input. |
| TimeZone | `TimeZoneInfo?` | null | TimeZone for the DatePicker. |
| Today | `DateTimeOffset?` | null | Overrides the current date and time considered as "today" and "now" in the DatePicker (useful for testing or custom time providers). |
| Underlined | `bool` | false | Whether or not the Text field of the DatePicker is underlined. |
| WeekNumberRule | `CalendarWeekRule?` | null | The rule used to calculate the week numbers. Defaults to the FirstFullWeek rule. |
| WeekNumbersHeaderTitle | `string` | Week | The accessible name of the empty column header above the week numbers. |
| 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). |
| DefaultValue | `TValue?` | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| 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. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| OpenCallout | `Task` | | Opens the callout of the DatePicker exactly as clicking its input would. |
| CloseCalloutAndFocus | `Task` | | Closes the callout of the DatePicker and moves the focus back to its input. |
| 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. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size DatePicker. |
| Medium | 1 | The medium size DatePicker. |
| Large | 2 | The large size DatePicker. |
### 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. |
### BitDropDirection Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| All | 0 | The direction determined automatically based on the available spaces in all directions. |
| TopAndBottom | 1 | Show the callout at the top or bottom side. |
### BitDatePickerMode Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| DatePicker | 0 | Standard date picker mode allowing selection of a specific day. |
| MonthPicker | 1 | Month picker mode allowing selection of only month and year. The day is automatically set to the first selectable day of the selected month. |
| YearPicker | 2 | Year picker mode allowing selection of only the year. The day is automatically set to the first selectable day of the selected year. |
### 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. |
## Sub Classes
### 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. |
| 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. |
| ErrorMessageContainer | `string?` | null | Custom CSS classes/styles for the error message container of the BitDatePicker. |
| ErrorMessage | `string?` | null | Custom CSS classes/styles for the error message of the BitDatePicker. |
| DescriptionContainer | `string?` | null | Custom CSS classes/styles for the description container of the BitDatePicker. |
| Description | `string?` | null | Custom CSS classes/styles for the description 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. |
| CalloutHeader | `string?` | null | Custom CSS classes/styles for the header wrapper of the callout of the BitDatePicker, rendered when a CalloutHeaderTemplate is provided. |
| CalloutFooter | `string?` | null | Custom CSS classes/styles for the footer wrapper of the callout of the BitDatePicker, rendered when a CalloutFooterTemplate is provided. |
| 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. |
| NowButton | `string?` | null | Custom CSS classes/styles for the Go to now button of the BitDatePicker. |
| HideTimePickerButton | `string?` | null | Custom CSS classes/styles for the hide time-picker button of the BitDatePicker. |
| HideTimePickerIcon | `string?` | null | Custom CSS classes/styles for the hide time-picker icon of the BitDatePicker. |
| GoToTodayIcon | `string?` | null | Custom CSS classes/styles for the Go to today icon of the BitDatePicker. |
| NowButtonIcon | `string?` | null | Custom CSS classes/styles for the Go to now 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. |
| DaysGrid | `string?` | null | Custom CSS classes/styles for the grid of the days 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. |
| DayNameHeader | `string?` | null | Custom CSS classes/styles for the header cells of the day names 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. |
| HighlightedDayButton | `string?` | null | Custom CSS classes/styles for the highlighted day buttons of the BitDatePicker. |
| TimeInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's input container of the BitDatePicker. |
| HourInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's hour input container of the BitDatePicker. |
| MinuteInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's minute input container of the BitDatePicker. |
| SecondInputContainer | `string?` | null | Custom CSS classes/styles for the time-picker's second input container of the BitDatePicker. |
| TimePickerWrapper | `string?` | null | Custom CSS classes/styles for the time-picker's wrapper of the BitDatePicker. |
| TimePickerHourInput | `string?` | null | Custom CSS classes/styles for the time-picker's hour input of the BitDatePicker. |
| TimePickerHourMinuteSeparator | `string?` | null | Custom CSS classes/styles for the time-picker's hour/minute separator of the BitDatePicker. |
| TimePickerMinuteInput | `string?` | null | Custom CSS classes/styles for the time-picker's minute input of the BitDatePicker. |
| TimePickerMinuteSecondSeparator | `string?` | null | Custom CSS classes/styles for the time-picker's minute/second separator of the BitDatePicker. |
| TimePickerSecondInput | `string?` | null | Custom CSS classes/styles for the time-picker's second input of the BitDatePicker. |
| TimePickerIncreaseHourButton | `string?` | null | Custom CSS classes/styles for the time-picker's increase hour button of the BitDatePicker. |
| TimePickerIncreaseHourIcon | `string?` | null | Custom CSS classes/styles for the time-picker's increase hour icon of the BitDatePicker. |
| TimePickerDecreaseHourButton | `string?` | null | Custom CSS classes/styles for the time-picker's decrease hour button of the BitDatePicker. |
| TimePickerDecreaseHourIcon | `string?` | null | Custom CSS classes/styles for the time-picker's decrease hour icon of the BitDatePicker. |
| TimePickerIncreaseMinuteButton | `string?` | null | Custom CSS classes/styles for the time-picker's increase minute button of the BitDatePicker. |
| TimePickerIncreaseMinuteIcon | `string?` | null | Custom CSS classes/styles for the time-picker's increase minute icon of the BitDatePicker. |
| TimePickerDecreaseMinuteButton | `string?` | null | Custom CSS classes/styles for the time-picker's decrease minute button of the BitDatePicker. |
| TimePickerDecreaseMinuteIcon | `string?` | null | Custom CSS classes/styles for the time-picker's decrease minute icon of the BitDatePicker. |
| TimePickerIncreaseSecondButton | `string?` | null | Custom CSS classes/styles for the time-picker's increase second button of the BitDatePicker. |
| TimePickerIncreaseSecondIcon | `string?` | null | Custom CSS classes/styles for the time-picker's increase second icon of the BitDatePicker. |
| TimePickerDecreaseSecondButton | `string?` | null | Custom CSS classes/styles for the time-picker's decrease second button of the BitDatePicker. |
| TimePickerDecreaseSecondIcon | `string?` | null | Custom CSS classes/styles for the time-picker's decrease second icon 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. |
| TimePickerHeader | `string?` | null | Custom CSS classes/styles for the time-picker's header of the BitDatePicker. |
| YearPickerToggleButton | `string?` | null | Custom CSS classes/styles for the year-picker's toggle button of the BitDatePicker. |
| ShowTimePickerButton | `string?` | null | Custom CSS classes/styles for the show time-picker button of the BitDatePicker. |
| ShowTimePickerIcon | `string?` | null | Custom CSS classes/styles for the show time-picker icon of the BitDatePicker. |
| MonthPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDatePicker. |
| TimePickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the time-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 of 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. |
| ClearButton | `string?` | null | Custom CSS classes/styles for the BitDatePicker's clear button. |
| ClearButtonIcon | `string?` | null | Custom CSS classes/styles for the BitDatePicker's clear button icon. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-DatePicker-label-color` | --bit-clr-fg-pri | Text color of the label above the field. |
| `--bit-DatePicker-label-font-size` | per Size | Text size of the label. |
| `--bit-DatePicker-required-color` | --bit-clr-req | Color of the asterisk after the label of a required picker. |
| `--bit-DatePicker-input-height` | per Size | Height of the field. |
| `--bit-DatePicker-input-font-size` | per Size | Text size of the field. |
| `--bit-DatePicker-input-color` | --bit-clr-fg-pri | Text color of the field. |
| `--bit-DatePicker-input-background` | --bit-clr-bg-pri | Background of the field. |
| `--bit-DatePicker-input-border-color` | --bit-clr-brd-pri | Border color of the field at rest, which the open state (the Color role) and the invalid state override. |
| `--bit-DatePicker-input-radius` | --bit-shp-radius-control | Corner radius of the field and of its focus ring. |
| `--bit-DatePicker-input-padding` | 0 8px (the spacing unit) | Inline padding of the field, between its border and the text and icons inside it. |
| `--bit-DatePicker-icon-color` | --bit-clr-fg-sec | Color of the calendar icon and of the clear button's icon. |
| `--bit-DatePicker-icon-size` | per Size (--bit-siz-icon-sm/md/lg) | Size of the calendar icon in the field. |
| `--bit-DatePicker-focus-color` | the Color role's focus color | Color of every focus ring the component draws - on the field and on the cells and buttons inside the callout. |
| `--bit-DatePicker-disabled-color` | --bit-clr-fg-dis | Text color of anything disabled: the label, the field, a day, a month, a year, a navigation button. |
| `--bit-DatePicker-invalid-color` | --bit-clr-err | Border of an invalid field, and the error message below it. |
| `--bit-DatePicker-description-color` | --bit-clr-fg-sec | Text color of the description. |
| `--bit-DatePicker-description-font-size` | --bit-tpg-fs-2xs | Text size of the description and of the error message. |
| `--bit-DatePicker-callout-background` | --bit-clr-bg-pri | Background of the callout, which the time inputs match. |
| `--bit-DatePicker-callout-radius` | --bit-shp-radius-popup | Corner radius of the callout. |
| `--bit-DatePicker-callout-shadow` | --bit-shd-popup | Elevation of the callout. A standalone picker has none by default and takes one from here. |
| `--bit-DatePicker-padding` | 8px * 1.5 (the spacing unit) | Padding of each picker pane - the day grid, the month and year grids, the time picker. |
| `--bit-DatePicker-color` | --bit-clr-fg-pri | Text color of the cells, the headers and the navigation buttons. The selected day, today and a disabled cell paint their own through the variables below. |
| `--bit-DatePicker-divider-color` | --bit-clr-brd-sec | Color of the rule between the panes and of the one beside the week numbers. |
| `--bit-DatePicker-hover-background` | --bit-clr-bg-pri-hover | Background of a cell, a navigation button or the clear button on hover. |
| `--bit-DatePicker-active-background` | --bit-clr-bg-pri-active | Background of a cell or a button while it is pressed. |
| `--bit-DatePicker-day-size` | per Size | Width and height of a day cell, which the week numbers, the weekday headers and the navigation buttons line up with. |
| `--bit-DatePicker-day-font-size` | per Size | Text size of the day cells and of the headers that line up with them. |
| `--bit-DatePicker-day-radius` | --bit-shp-radius-control | Corner radius of a day cell, which the month, year, navigation and time buttons follow. |
| `--bit-DatePicker-outside-day-color` | --bit-clr-fg-sec | Text color of a day of an adjacent month (ShowOutsideDays). |
| `--bit-DatePicker-selected-background` | --bit-clr-bg-sec | Background of the selected day, and of the selected or highlighted month. |
| `--bit-DatePicker-selected-color` | the cell color | Text color of the selected day. |
| `--bit-DatePicker-selected-border-color` | --bit-clr-brd-pri | Color of the ring drawn around the selected day. |
| `--bit-DatePicker-today-background` | the Color role's main color | Background of today, of the highlighted current month and of the selected AM/PM button. |
| `--bit-DatePicker-today-color` | the Color role's on-color | Text color of today, of the highlighted current month and of the selected AM/PM button. |
| `--bit-DatePicker-today-hover-background` | the Color role's hover color | Background of those same three on hover. |
| `--bit-DatePicker-today-active-background` | the Color role's active color | Background of today and of the selected AM/PM button while pressed. |
| `--bit-DatePicker-today-radius` | --bit-shp-radius-full | Corner radius of today, which is a full circle by default. |
| `--bit-DatePicker-highlighted-background` | --bit-clr-bg-ter | Background of a HighlightedDates day. |
| `--bit-DatePicker-week-number-color` | --bit-clr-fg-sec | Text color of a week number. |
| `--bit-DatePicker-week-number-background` | --bit-clr-bg-sec | Background of a week number. |
| `--bit-DatePicker-header-font-size` | per Size | Text size of the month, year and year-range titles above the grids. |
| `--bit-DatePicker-time-font-size` | per Size | Text size of the hour, minute and second fields and of the colons between them. |
## Examples
\n**Basic**:
```razor
Custom label
@context.Day
@if (context.Day % 5 is 0)
{
}
@context
AC
```
```csharp
private CultureInfo culture = CultureInfo.CurrentUICulture;
private DateTimeOffset? presetsValue;
private BitDatePicker? presetsPicker;
private async Task SelectPreset(int days)
{
presetsValue = DateTimeOffset.Now.Date.AddDays(days);
if (presetsPicker is not null)
{
await presetsPicker.CloseCalloutAndFocus();
}
}
```
\n**Responsive**:
```razor
Submit
Reset
@if (string.IsNullOrEmpty(SuccessMessage) is false)
{
@SuccessMessage
}
OpenCallout()
CloseCalloutAndFocus()
```
```csharp
private bool isCalloutOpen;
private BitDatePicker? programmaticPicker;
```
\n**Appearance**:
```razor
datePickerParams =
[
new BitDatePickerParams
{
ShowWeekNumbers = true,
FirstDayOfWeek = DayOfWeek.Monday,
WeekNumberRule = CalendarWeekRule.FirstFourDayWeek,
DisabledDaysOfWeek = [DayOfWeek.Saturday, DayOfWeek.Sunday],
MinDate = DateTimeOffset.Now.AddMonths(-1),
MaxDate = DateTimeOffset.Now.AddMonths(1),
Placeholder = "Select a working day",
ShowClearButton = true,
}
];
```
\n**Color**:
```razor
Selected DateTime: @selectedDateTime.ToString()
Selected date: @selectedDate.ToString()
Changed date: @(changedDate?.ToString() ?? "-")
```
```csharp
private DateTimeOffset? changedDate;
private DateTimeOffset? selectedDate = new DateTimeOffset(2020, 1, 17, 0, 0, 0, DateTimeOffset.Now.Offset);
```
\n**Culture & localization**:
```razor
Selected date: @timeZoneDate1?.ToString()
@{
TimeZoneInfo? timeZoneInfo = null;
var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
if (allTimeZones.Count > 0)
{
timeZoneInfo = allTimeZones[0];
}
}
@if (timeZoneInfo is not null) {
"@timeZoneInfo.Id" TimeZone:
Selected date: @timeZoneDate2?.ToString()
}
```
```csharp
private DateTimeOffset? timeZoneDate1;
private DateTimeOffset? timeZoneDate2;
```
\n**Standalone**:
```razor
Selected date: @(monthPickerDate?.ToString("yyyy/MM/dd") ?? "None")
Selected date: @(yearPickerDate?.ToString("yyyy/MM/dd") ?? "None")
@culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
Pick your appointment
Selected date: @(selectedDateEvent?.ToString() ?? "-")
Displayed month: @(displayedMonth?.ToString("MMMM yyyy") ?? "-")
Clicked: @clickCount times
Focused in: @focusInCount times
Focused out: @focusOutCount times
Cleared: @clearCount times
Opened: @openCount times
Closed: @closeCount times
```
```csharp
private int clickCount;
private int clearCount;
private int focusInCount;
private int focusOutCount;
private DateTimeOffset? displayedMonth;
private DateTimeOffset? selectedDateEvent;
private int openCount;
private int closeCount;
```
\n**Keyboard & screen readers**:
```razor
IsOpen: @isCalloutOpen