Pickers

DatePicker

Bit.BlazorUI

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.

ForceAnimation (whole page)

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The everyday options: disabled, required, placeholder, week numbers, month highlighting, time picker, clear and close buttons, AutoClose, AllowDeselect (pick the selected day again to clear it), StartingValue (where an empty picker opens) and Today (overrides the current date).

Basic DatePicker

Disabled

Required

PlaceHolder

Week numbers

Highlight months

TimePicker

Show clear button when has a value

Show close button

AutoClose (false)

AllowDeselect (re-select the selected day to clear)

StartingValue: December 2020, 20:45

Custom Today (March 2021)

Min & Max

MinDate and MaxDate disable the days outside the range and stop the navigation at it; DisablePast and DisableFuture do the same with today as the bound. The narrower bound wins.

Min: Now.AddDays(-5)

Max: Now.AddDays(+5)

Min: Now.AddMonths(-2)

Max: Now.AddMonths(+1)

Min: Now.AddYears(-5)

Max: Now.AddYears(+1)

DisablePast (from today on)

DisableFuture (up to today)

Disabled dates

Disable a list of dates (DisabledDates), whole weekdays (DisabledDaysOfWeek) or any rule (IsDateDisabled). Disabled days cannot be selected and the keyboard skips them.

DisabledDaysOfWeek (weekends)

DisabledDates (a few upcoming dates)

IsDateDisabled (odd days)

Highlighted dates

HighlightedDates marks days (and names them as such for a screen reader through HighlightedDateAriaLabel), GetDayClass adds CSS classes to any day, and HighlightToday turns off the accent on today.

HighlightedDates

GetDayClass (Sundays)

HighlightToday (false)

Calendar layout

FirstDayOfWeek, WeekNumberRule (ISO 8601: FirstFourDayWeek from Monday), ShowOutsideDays and FixedWeeks shape the day grid. MonthCount shows up to three months side by side (fewer on a narrow viewport) and PagedNavigation moves them all at once.

FirstDayOfWeek (Monday)

ISO 8601 week numbers

ShowOutsideDays (false)

FixedWeeks (always six weeks)

MonthCount (2)

MonthCount (3) with PagedNavigation

Month & year pickers

Hide the month/year picker with IsMonthPickerVisible, or open it over the day picker from the month title with ShowMonthPickerAsOverlay - which a narrow screen turns on by itself.

IsMonthPickerVisible

ShowMonthPickerAsOverlay

TimePicker

ShowTimePicker adds the time of day, ShowSeconds a seconds field, TimeFormat the 12-hour clock, ShowTimePickerAsOverlay puts it behind a clock button, and ShowNowButton hides the now button. Selecting a day keeps the callout open so the time can be set too.

The offered times: HourStep/MinuteStep/SecondStep set the grid, MinTime/MaxTime bound every day (MinDate/MaxDate only bound the day they fall on), and AllowedHours/AllowedMinutes/AllowedSeconds rule out the rest. The spin buttons, the PageUp/PageDown keys and typing all obey them. ContinuousSpinDelay and ContinuousSpinInterval tune press-and-hold.

Basic time picker (24-hour)

Selected DateTime:

TimeFormat (12-hour with AM/PM)

ShowSeconds (SecondStep 15)

ShowTimePickerAsOverlay

Without the now button

HourStep 2 & MinuteStep 15

Working hours only, no lunch hour

Slower press-and-hold spin

Nothing later than now (MaxDate)

Date format & text input

DateFormat sets the pattern the value is written and read with (default: the culture's short date, plus its time). AllowTextInput lets the date be typed; the input then carries the expected pattern as its accessible description (DateFormatAriaDescription). Invalid text, a date out of range, a disabled date and a disallowed time fail validation with InvalidErrorMessage, OutOfRangeErrorMessage, DisabledDateErrorMessage and DisallowedTimeErrorMessage.

DateFormat

Text input allowed

Expected format: dd/MM/yyyy

With custom error messages

Expected format: dd/MM/yyyy

Binding

Two-way bind with @bind-Value, or set DefaultValue and listen to OnChange.

Two-way binding

Selected date: 1/17/2020 12:00:00 AM +02:00

DefaultValue & OnChange

Changed date: -

Culture & localization

Culture supplies the names, the first day of the week, the formats and the calendar itself (the Persian one below is a calendar of its own). Every title and accessible name is a parameter, so the rest is localized too - the last picker sets them all. See CultureInfoHelper (opens in a new tab) for building a custom culture.

fa-IR culture with Farsi names

fa-IR culture with Fingilish names

Every title and accessible name translated

TimeZone

TimeZone is the zone the value is read and shown in: the selected day, the month the calendar opens on and the time. Time zone data differs per OS and runtime settings (e.g. InvariantTimezone, more info(opens in a new tab)).

Default (local TimeZone):

Selected date:

"Dateline Standard Time" TimeZone:

Selected date:

Standalone

Standalone renders the calendar inline, without the input and callout. It still takes part in an EditForm through a hidden input.

Basic DatePicker

October 2026

Disabled

October 2026

Week numbers, highlighted months and a time picker

Mode

Mode picks a month (MonthPicker) or a year (YearPicker) instead of a day: the input shows just that, and the value is its first day the Min/Max range and the day rules allow.

MonthPicker

Selected date: None

MonthPicker with Min/Max and highlighting

YearPicker (year of birth)

Selected date: None

Standalone MonthPicker

Standalone YearPicker

2025 - 2036

ReadOnly

ReadOnly shows the value and lets the calendar be browsed, but nothing can change it - not the days, the time, the clear button or typing.

Basic

Text input allowed

Expected format: M/d/yyyy

Standalone

Selected date 10/7/2026

October 2026

Standalone with TimePicker

Selected date 10/7/2026 12:43

Templates

LabelTemplate, IconTemplate, DayCellTemplate, MonthCellTemplate and YearCellTemplate replace their parts; CalloutHeaderTemplate and CalloutFooterTemplate add content around the calendar, such as preset buttons.

Custom label

DayCellTemplate

MonthCellTemplate

YearCellTemplate

Callout header & footer (presets)

Responsive

Responsive turns the callout into a full-width panel on small screens that slides in from the top and closes with a swipe. Resize the window to try it.

Responsive DatePicker

Events

OnSelectDate reports each picked date and OnMonthChange the first day of the month the calendar moves to (handy for lazy-loading). OnClick, OnFocusIn, OnFocusOut, OnClear, OnOpen and OnClose report the rest, however they were triggered.

OnSelectDate & OnMonthChange

Selected date: -

Displayed month: -

OnClick & OnFocusIn & OnFocusOut & OnClear

Clicked: 0 times

Focused in: 0 times

Focused out: 0 times

Cleared: 0 times

OnOpen & OnClose

Opened: 0 times

Closed: 0 times

Keyboard & screen readers

The input follows the WAI-ARIA combobox pattern: ↓/↑ - and Enter/Space on a field that is not typed into - open the calendar and move the focus into it, Esc closes it and returns the focus. The callout is a modal dialog that keeps the focus while open. In the day grid:

← / →: previous/next day
↑ / ↓: same day of the previous/next week
Home / End: first/last day of the week
PageUp / PageDown: same day of the previous/next month
Shift+PageUp / Shift+PageDown: same day of the previous/next year
Enter / Space: select the focused day

The month and year grids take the same keys (PageUp/PageDown move a year or a range of years), and the time fields step with PageUp/PageDown. Disabled cells are skipped. Every day is named with its full date, and the selection and displayed month are announced as they change.

Try the keyboard

Try the keyboard (month picker)

Validation & messages

In an EditForm the picker validates like any input and sets aria-invalid. Description adds helper text, ErrorMessage shows a rejection the app decides itself (e.g. a server response) and Invalid marks the field without a message. Both are tied to the input through aria-describedby, the error is announced as it appears, and AriaDescription adds text for screen readers alone.

Appointment

Pick a weekday - we are closed on weekends.

Invalid

Marked invalid by the app.

Dates are stored in UTC.

Programmatic control

Two-way bind IsOpen, or call OpenCallout and CloseCalloutAndFocus on a reference. A one-way bound IsOpen leaves the callout to the app: the picker reports changes but never closes it.

Controlled callout

IsOpen: False

Appearance

Underlined, HasBorder, IconPlacement and IconName style the field, ShowGoToToday hides the today button, and DropDirection lets the callout open on any side.

Underlined

HasBorder (false)

IconPlacement (Start)

IconName

ShowGoToToday (false)

DropDirection (All sides)

CSS variables

Every visual value reads a --bit-DatePicker-* variable: set one on :root to re-skin every picker, or on Style to re-skin one - the picker copies them onto its callout, so the field and the calendar change together. Styles.Callout targets the calendar alone.

Re-skinned field and calendar

Roomier calendar, same field

Cascading parameters

BitParams hands a BitDatePickerParams to every DatePicker inside it. The values are defaults, not overrides: a picker keeps whatever it sets itself.

Takes the week layout, the bounds and the clear button from the cascade:

Start

So does this one, without repeating any of it:

End

Its own bounds and placeholder, the cascaded week layout:

Deadline

Outside the cascade, and back to the defaults:

Anything

Color

Color (Primary by default) paints today, the highlighted current month and the selected AM/PM.

Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error

PrimaryBackground

SecondaryBackground

TertiaryBackground

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder

External Icons

Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.

FontAwesome:

Icon (string)

BitIconInfo.Css

BitIconInfo.Fa

Bootstrap:

Icon (string)

BitIconInfo.Css

BitIconInfo.Bi

Navigation & TimePicker Icons (FontAwesome):

Custom nav icons (FA)

TimePicker icons (FA)

Navigation Icons (Bootstrap):

Custom nav icons (Bootstrap)

Size

Size scales the field, the calendar cells and the time picker together (Medium by default).

Small

Medium

Large

Style & Class

Style and Class target the root; Styles and Classes target every part.

Component's Style & Class:

Styles & Classes:

Select a date

RTL

Dir="Rtl" mirrors the picker, including the arrow keys; an RTL culture (like fa-IR) does it automatically.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitDatePicker CSS variables

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.

API

Every parameter, public member, sub-class and enum this component exposes.

BitDatePicker 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.
IconPlacement	BitPlacement	BitPlacement.End	Determines the side of the input the DatePicker's icon is rendered on. Only Start and End are honoured; any other value leaves the icon on the end side. The side follows the reading direction: Start is the left of an LTR input and the right of an RTL one.
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).

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

BitInputBase parameters

Name	Type	Default value	Description
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.

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	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.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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.
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.

BitComponentBase public members

Name	Type	Default value	Description
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.

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.

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.

BitPlacement enum

Name	Value	Description
Top	0	The top edge.
Bottom	1	The bottom edge.
Start	2	The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End	3	The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left	4	The left edge, in both reading directions.
Right	5	The right edge, in both reading directions.
Center	6	The middle of the axis, against neither edge.
TopAndBottom	7	Both edges of the block axis at once.
StartAndEnd	8	Both edges of the inline axis at once, following the reading direction the way Start and End do.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component