Skip to content
BlazorUI

Pickers

TimePicker

Bit.BlazorUI

A BitTimePicker offers a drop-down control that's optimized for picking a single time value using hour and minute spin buttons. The time it holds is a TimeSpan of the day, written and read in the format of the current culture, and every part of it can be set with the pointer or the keyboard alike. You can customize the picker to fit your scenario, for example by changing the time format, showing the seconds, stepping in intervals, limiting the selectable range or the exact values that can be picked, rendering it inline instead of in a callout, or letting users type the time directly.

Usage

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

Basic

Explore the basic states of the BitTimePicker component: a simple picker, a disabled one, a required one that renders the required indicator next to its label, and one showing a placeholder text until a time gets selected.







Time format

The BitTimePicker supports both the 12-hour and the 24-hour time formats using the TimeFormat parameter. In the 12-hour format the hour input runs over the twelve hours of a clock face, AM/PM buttons appear in the callout to say which half of the day it is in, and the displayed value uses the AM/PM designators of the current culture. The value itself is always a time of day: half past five in the afternoon is 17:30 whichever format shows it. Typing an hour keeps the half of the day the picker is already in - typing 5 into an afternoon time means 17:00, not a silent jump to the morning - while the spin buttons move the time itself, so stepping past noon or midnight moves the AM/PM state with it.


Seconds

Enable the ShowSeconds parameter to add a third spin section for picking the seconds. The displayed value format automatically extends to include the seconds part in both 12 and 24-hour formats. A picker without it still carries the seconds of the value it was given - stepping the hour of 10:30:45 gives 11:30:45, not 11:30:00 - so nothing of a bound time is quietly thrown away by hiding the part that shows it.


Text input

Enabling AllowTextInput lets users type the time directly into the input field. Clicking the input field opens the BitTimePicker callout, and clicking it again dismisses the callout and allows text input. A typed time does not have to be written exactly the way the picker writes it: the spellings of the current culture are accepted in either clock format, with or without the seconds, so 2:05 PM lands in a 24-hour picker as 14:05 and is rewritten in its own format. Anything that is not a time of day - or one that MinTime, MaxTime and the allowed-value predicates refuse - is reported as an invalid value by the form validation. A custom ValueFormat is the exception: an application that asks for a format of its own gets it taken literally, and a typed time then has to match it.

Icon

Customize the icon of the BitTimePicker using the IconName parameter, and place it on either side of the input using the IconLocation parameter. The icons inside the callout are customizable as well: IncreaseHourIconName, DecreaseHourIconName and their minute and second counterparts replace the arrows of the spin buttons, and CloseButtonIconName replaces the icon of the close button. Each of them has an Icon twin (IncreaseHourIcon, …) that takes the CSS classes of an external icon library instead.



Formatting

Left alone, the BitTimePicker writes the time the way its culture writes one: the pattern of the culture, rewritten into the clock format the picker is in (TimeFormat) and extended with the seconds when ShowSeconds is set. Every part is written with its leading zero, so the field spells the time the same way the two-digit inputs of the callout do; a time typed without them is still read. The ValueFormat parameter replaces that with any pattern of standard .NET time format specifiers, which is then the only one a typed time may be written in as well - an application that asks for a format of its own gets it taken literally, in both directions. In this example, the time is formatted and parsed as hh-mm.ss.

Binding

Two-way bind the selected time of the BitTimePicker to a TimeSpan? variable using @bind-Value. The value is a time of day, so every part of the picker works on the hours, the minutes and the seconds of it - a span of a day or more (or a negative one) is read as the time of day it lands on. A one-way bound Value paired with the OnChange callback keeps the value under the control of the application, and DefaultValue seeds an unbound picker with a time to start on.

Selected time: 05:12:15


Culture

By default, the BitTimePicker picks the current culture to format and parse the time value and to render the AM/PM designators. The pattern the time is written in comes from that culture as well, so the separators and the order of its parts are the ones the culture writes times with, and a culture that reads right to left lays the picker out that way without an explicit Dir. The Culture parameter accepts any custom CultureInfo instance to change that. In this example a customized Farsi culture (see the CultureInfoHelper (opens in a new tab) class) renders the localized AM/PM designators.

Standalone

The Standalone parameter renders the time picking part of the BitTimePicker inline, without the input field and the callout. It still carries its value in a hidden input, so it posts and validates in a form like any other input component - and since it is part of the page rather than a popup over it, it is not announced as a dialog, its label points at the hour input (the first part of it that is actually on the screen), and that is where the focus lands.



10:24 AM

ReadOnly

The ReadOnly parameter makes the time picker non-editable: the value stays visible and focusable, and the callout still opens and closes, but the spin buttons, the AM/PM buttons, the action buttons, the keyboard and the text input all reject any change of it. Unlike IsEnabled set to false, the value is still posted with the form it sits in.





02:50


02:50 AM

Selectable range

Limit the selectable time range using the MinTime and MaxTime parameters: stepping with the spin buttons clamps the value into the range, and a typed time outside of it is rejected with the OutOfRangeErrorMessage text. The AllowedHours, AllowedMinutes, and AllowedSeconds predicates add an arbitrary rule on top of that: the spin buttons skip over the values they reject, a number typed into a time input snaps to the nearest accepted one (carrying on in the direction it was going rather than snapping back to where it came from), and a time entered as text that lands on a rejected value is reported with the DisallowedTimeErrorMessage text. Both bounds are times of day, so one outside of a day is pulled back into one before it is applied, and where a bound and a predicate disagree the bound wins. DisablePast and DisableFuture add the current time as a bound of their own - for a picker that may only be given a time later (or earlier) today - taken to the precision the picker shows, so the minute that is running can still be picked. Where they overlap with MinTime and MaxTime, the narrower of the two wins.





Steps

Customize the hour, minute, and second steps of the BitTimePicker using the HourStep, MinuteStep, and SecondStep parameters. A step lays a grid over its range that every value the controls produce sits on - the spin buttons, PageUp and PageDown on a time input, and the now button all land on it. The grid starts at the matching part of MinTime, and at the top of the range where there is none, so a picker whose range begins at 09:07 can still be set to 09:07. A value that arrives off the grid - a bound time of 10:37 in a picker that steps by 15 minutes - is kept and shown as it is; the first press of a spin button then moves it onto the nearest grid point in the direction it was pressed rather than 15 minutes past itself. A typed time is not held to the grid either, only to the bounds and the allowed values: a step is the granularity the controls move in, not a validation rule.



Starting value

An empty BitTimePicker starts from midnight, so the first press of a spin button lands on 01:00. The StartingValue parameter moves that starting point: the picker stays empty and its inputs stay blank until something is picked, but the first change made to it lands around the given time instead - stepping the hour of the picker below selects 10:30 rather than 01:00. It is where the AM/PM buttons and the Home/End keys begin from as well, which saves stepping all the way from midnight in a picker that mostly gets times around the working day.


Action buttons

The BitTimePicker can render action buttons in its callout: ShowNowButton adds a button that selects the current time of day - the time the picker itself could have stepped to, snapped to the steps and to the allowed values and pulled into the bounds - ShowClearButton adds a button that clears the selected value (disabled while there is nothing to clear, and reported by the OnClear callback), and ShowCloseButton adds a dismiss button in the corner of the callout. Their captions can be customized using the NowButtonText, ClearButtonText, and CloseButtonTitle parameters.

Selected time:




Appearance

Underlined trades the box of the input field for a single rule under it, and HasBorder set to false takes the box away altogether - for a picker that sits inside a container of its own. DropDirection decides where the callout is allowed to open: TopAndBottom keeps it above or below the input, while All lets it take whichever side of the input has the room.



Validation

The BitTimePicker integrates with the Blazor EditForm and its data annotations validation. Validation happens when the Submit button is clicked, and also whenever an entered text is not a time the picker accepts. Each of the three ways it can be refused carries its own message: InvalidErrorMessage for text that is not a time at all, OutOfRangeErrorMessage for a time outside of MinTime and MaxTime, and DisallowedTimeErrorMessage for one the allowed-value predicates reject. Each of them falls back to a message naming the field when it is not set.


Responsive

Enable the Responsive parameter to adjust the callout's layout for small screens: it turns into a full-width panel sliding down from the top of the screen that can also be dismissed by swiping it up. The ShowCloseButton parameter pairs well with this mode, giving the panel an obvious way out.

Keyboard & accessibility

The whole time can be set without leaving the keyboard, and every part of the picker carries a label a screen reader can announce:

  • Enter, Space or ↓ on the field opens the picker (an editable field keeps Enter and Space for typing and opens with ↓ only); Esc or Alt+↑ closes it and puts the focus back on the field, while Tab closes it and carries on to the next control.
  • Unless the field is editable, opening the picker moves the focus onto the hour input, and Tab moves on between the time inputs, the AM/PM pair, and the action buttons.
  • ↑ / ↓ on a time input change it by one, stopping at the ends of its range, and a number typed into it snaps to the nearest selectable value.
  • PageUp / PageDown make the same move the spin buttons make - by the step of the picker, wrapping around the clock and skipping over what the allowed-value predicates reject.
  • Home / End on a time input jump to the first and the last value it can be set to (the ends of the current half of the day for the hour of a 12-hour picker), and Enter takes the time that is on the inputs, closes the picker and puts the focus back on the field.
  • Esc anywhere inside the picker closes it and hands the focus back to the field.

CalloutAriaLabel names the popup, which is a modal dialog while it floats over the page and plain page content when the picker is standalone; HourInputAriaLabel, MinuteInputAriaLabel, and SecondInputAriaLabel name the time inputs; the IncreaseHourTitle-style parameters caption the spin buttons for the tooltip and the screen reader alike; and the AM/PM buttons report their state via aria-pressed. The selected time is also announced as a whole by a live region whenever any part of it changes, so the buttons that set all of it at once - now, clear, AM/PM - do not change it silently. AutoFocus puts the focus on the field as soon as the picker renders.

Events

OnSelectTime fires for every change made with the picker, OnChange for every change of the bound value, OnClear for the clear button in particular, OnOpen and OnClose follow the callout, and OnClick, OnFocusIn, and OnFocusOut follow the input field.


Programmatic control

The callout can be driven from the outside as well: two-way bind IsOpen to open and close it from the code, or call the OpenCallout and DismissCallout methods on a reference to the component - the first opens the callout exactly as clicking the input would (moving the focus onto the hour input), and the second closes it and leaves the focus wherever it is. OnOpen and OnClose report every change of the state, whichever side asked for it.


IsOpen: False


Templates

Customize parts of the BitTimePicker using templates: the LabelTemplate replaces the label with any custom content (here with an action button that opens the callout using the public OpenCallout method), the IconTemplate replaces the default icon of the input field, and the CalloutHeaderTemplate and CalloutFooterTemplate add custom content above and below the time inputs inside the callout - a title, a hint, or preset buttons that set the value from the code.





Color

Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application. The color applies to the selected AM/PM button, the now and clear action buttons, and the focus indicator of the input.

































External Icons

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


FontAwesome:







Bootstrap:



Size

The Size parameter scales the whole BitTimePicker - the input and its label, and the time inputs, the separators and the spin buttons inside the callout - between three sizes, with Medium being the default.





Style & Class

Explore styling and class customization of the BitTimePicker: the Style and Class parameters affect the root element, while the Styles and Classes parameters give fine-grained control over every part of the component, like the input, the label, and each of the spin buttons.


Component's Style & Class:





Styles & Classes:


RTL

Use the Dir parameter to render the BitTimePicker in right-to-left (RTL) direction, adapting the input, the callout, and the close button placement accordingly.

10:24 AM


API

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

BitTimePicker parameters

Name Type Default value Description
AllowTextInput bool false Whether the TimePicker allows input a time string directly or not.
AllowedHours Func<int, bool>? null The hours that can be selected, on top of what MinTime and MaxTime already allow. The predicate receives an hour of the day (0-23); the spin buttons skip over the hours it rejects, a typed one snaps to the nearest it accepts, and a time entered as text that lands on one fails validation.
AllowedMinutes Func<int, bool>? null The minutes that can be selected, on top of what MinTime and MaxTime already allow. The predicate receives a minute of the hour (0-59); the spin buttons skip over the minutes it rejects, a typed one snaps to the nearest it accepts, and a time entered as text that lands on one fails validation.
AllowedSeconds Func<int, bool>? null The seconds that can be selected, on top of what MinTime and MaxTime already allow. The predicate receives a second of the minute (0-59); the spin buttons skip over the seconds it rejects, a typed one snaps to the nearest it accepts, and a time entered as text that lands on one fails validation.
AutoFocus bool false Whether the input of the TimePicker gets the focus as soon as it renders for the first time.
CalloutAriaLabel string Clock Aria label for time picker popup for screen reader users.
CalloutFooterTemplate RenderFragment? null Custom template to render at the bottom of the TimePicker's callout, below the time inputs and the action buttons.
CalloutHeaderTemplate RenderFragment? null Custom template to render at the top of the TimePicker's callout, above the time inputs.
CalloutHtmlAttributes Dictionary<string, object> new Dictionary<String, Object>() Capture and render additional attributes in addition to the main callout's parameters.
Classes BitTimePickerClassStyles null Custom CSS classes for different parts of the TimePicker.
ClearButtonText string Clear The text of the clear button, shown when ShowClearButton is set.
CloseButtonIcon BitIconInfo? null Gets or sets the close button icon using custom CSS classes for external icon libraries. Takes precedence over CloseButtonIconName when both are set.
CloseButtonIconName string? Cancel Gets or sets the name of the close button icon from the built-in Fluent UI icons.
CloseButtonTitle string Close time picker The title of the close button (tooltip).
Color BitColor? null The general color of the TimePicker, which applies to the selected AM/PM button, the now and clear action buttons, and the focus indicator of the input.
ContinuousSpinDelay int 400 The delay in milliseconds before the time part starts changing continuously while an increase/decrease button is held down.
ContinuousSpinInterval int 75 The interval in milliseconds between two consecutive changes while an increase/decrease button is held down.
Culture CultureInfo CultureInfo.CurrentUICulture CultureInfo for the TimePicker. It provides the AM/PM designators and the pattern the value is written in, and a culture that reads right to left lays the picker out that way without an explicit Dir.
DecreaseHourIcon BitIconInfo? null Gets or sets the decrease hour button icon using custom CSS classes for external icon libraries. Takes precedence over DecreaseHourIconName when both are set.
DecreaseHourIconName string? ChevronDownSmall Gets or sets the name of the decrease hour button icon from the built-in Fluent UI icons.
DecreaseHourTitle string Decrease hour The title of the decrease hour button (tooltip and aria-label).
DecreaseMinuteIcon BitIconInfo? null Gets or sets the decrease minute button icon using custom CSS classes for external icon libraries. Takes precedence over DecreaseMinuteIconName when both are set.
DecreaseMinuteIconName string? ChevronDownSmall Gets or sets the name of the decrease minute button icon from the built-in Fluent UI icons.
DecreaseMinuteTitle string Decrease minute The title of the decrease minute button (tooltip and aria-label).
DecreaseSecondIcon BitIconInfo? null Gets or sets the decrease second button icon using custom CSS classes for external icon libraries. Takes precedence over DecreaseSecondIconName when both are set.
DecreaseSecondIconName string? ChevronDownSmall Gets or sets the name of the decrease second button icon from the built-in Fluent UI icons.
DecreaseSecondTitle string Decrease second The title of the decrease second button (tooltip and aria-label).
DisallowedTimeErrorMessage string? null The custom validation error message for a time entered as text that AllowedHours, AllowedMinutes or AllowedSeconds rejects.
DisableFuture bool false Disables every time of day after the current time, exactly as a MaxTime of now would. When both are set, the earlier of the two bounds wins.
DisablePast bool false Disables every time of day before the current time, exactly as a MinTime of now would. When both are set, the later of the two bounds wins.
DropDirection BitDropDirection BitDropDirection.TopAndBottom Determines the allowed drop directions of the callout.
HasBorder bool true Determines if the TimePicker has a border.
HourInputAriaLabel string Hour The aria-label of the hour input.
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, starting at the hour of MinTime, and at midnight where there is none, that every hour the buttons produce sits on. A time entered as text is not held to it.
Icon BitIconInfo? null Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName string? Clock Gets or sets the name of the icon to display from the built-in Fluent UI icons.
IconLocation BitIconLocation BitIconLocation.Right TimePicker icon location.
IconTemplate RenderFragment? null Custom TimePicker icon template.
IncreaseHourIcon BitIconInfo? null Gets or sets the increase hour button icon using custom CSS classes for external icon libraries. Takes precedence over IncreaseHourIconName when both are set.
IncreaseHourIconName string? ChevronDownSmall Gets or sets the name of the increase hour button icon from the built-in Fluent UI icons.
IncreaseHourTitle string Increase hour The title of the increase hour button (tooltip and aria-label).
IncreaseMinuteIcon BitIconInfo? null Gets or sets the increase minute button icon using custom CSS classes for external icon libraries. Takes precedence over IncreaseMinuteIconName when both are set.
IncreaseMinuteIconName string? ChevronDownSmall Gets or sets the name of the increase minute button icon from the built-in Fluent UI icons.
IncreaseMinuteTitle string Increase minute The title of the increase minute button (tooltip and aria-label).
IncreaseSecondIcon BitIconInfo? null Gets or sets the increase second button icon using custom CSS classes for external icon libraries. Takes precedence over IncreaseSecondIconName when both are set.
IncreaseSecondIconName string? ChevronDownSmall Gets or sets the name of the increase second button icon from the built-in Fluent UI icons.
IncreaseSecondTitle string Increase second The title of the increase second button (tooltip and aria-label).
InvalidErrorMessage string? null The custom validation error message for the invalid value.
IsOpen bool false Whether or not this TimePicker is open. Supports two-way binding to open and close the callout from code.
Label string? null Label for the TimePicker.
LabelTemplate RenderFragment? null Used to customize the label for the TimePicker.
MaxTime TimeSpan? null The maximum time of day that can be selected. Stepping clamps the value into the bound, a typed time beyond it fails validation, and a bound outside of a day is clamped into one before it is applied.
MinTime TimeSpan? null The minimum time of day that can be selected. Stepping clamps the value into the bound, a typed time beyond it fails validation, and a bound outside of a day is clamped into one before it is applied.
MinuteInputAriaLabel string Minute The aria-label of the minute input.
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, starting at the minute of MinTime, and at the top of the hour where there is none, that every minute the buttons produce sits on - which is what turns it into a five-minute or quarter-hour picker. A time entered as text is not held to it.
NowButtonText string Now The text of the now button, shown when ShowNowButton is set.
OnClear EventCallback Callback for when the value is cleared using the clear button.
OnClick EventCallback Callback for when clicking on TimePicker input.
OnClose EventCallback Callback for when the callout of the TimePicker is closed.
OnFocus EventCallback Callback for when focus moves into the TimePicker input.
OnFocusIn EventCallback Callback for when focus moves into the TimePicker input.
OnFocusOut EventCallback Callback for when focus moves out of the TimePicker input.
OnOpen EventCallback Callback for when the callout of the TimePicker is opened.
OnSelectTime EventCallback<TimeSpan?> Callback for when the selected time changes.
OutOfRangeErrorMessage string? null The custom validation error message for a time entered as text that falls outside of MinTime and MaxTime.
Placeholder string? null Placeholder text for the TimePicker.
Responsive bool false Enables the responsive mode in small screens.
SecondInputAriaLabel string Second The aria-label of the second input.
SecondStep int 1 The step, in seconds, the spin buttons move the second by. A step greater than 1 lays a grid over the minute, starting at the second of MinTime, and at the top of the minute where there is none, that every second the buttons produce sits on. A time entered as text is not held to it.
ShowClearButton bool false Whether the BitTimePicker's clear button should be shown or not.
ShowCloseButton bool false Whether the BitTimePicker's close button should be shown or not.
ShowNowButton bool false Whether the BitTimePicker's now button should be shown or not. The button selects the current time of day, snapped to the steps and to the allowed values.
ShowSeconds bool false Whether the BitTimePicker shows the seconds input or not.
Size BitSize? null The size of the TimePicker, which scales the input, the label, the time inputs and the spin buttons.
Styles BitTimePickerClassStyles null Custom CSS styles for different parts of the TimePicker.
Standalone bool false Whether the BitTimePicker is rendered standalone or with the input component and callout.
StartingValue TimeSpan? null The time an empty TimePicker starts from, instead of midnight. It is not a value: the picker stays empty until something is picked, but the first change made to it lands around the given time.
TimeFormat BitTimeFormat BitTimeFormat.TwentyFourHours The time format of the time-picker, 24H or 12H.
Underlined bool false Whether or not the Text field of the TimePicker is underlined.
ValueFormat string? null The format of the time in the TimePicker like "HH:mm". Left unset it follows the time pattern of the culture, rewritten into the TimeFormat, extended with the seconds where ShowSeconds is set and padded with the leading zeros.

BitTimePicker public members

Name Type Default value Description
InputId string? The id of the input element of the TimePicker.
OpenCallout Task OpenCallout() Opens the callout of the TimePicker, doing nothing when it is already open or when the picker is standalone and has no callout to open.
DismissCallout Task DismissCallout() Closes the callout of the TimePicker, leaving the focus wherever it is.

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 Default value 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.
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.

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.

BitTimePickerClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitTimePicker.
Focused string? null Custom CSS classes/styles for the focused state of the BitTimePicker.
Label string? null Custom CSS classes/styles for the Label of the BitTimePicker.
InputWrapper string? null Custom CSS classes/styles for the input wrapper of the BitTimePicker.
InputContainer string? null Custom CSS classes/styles for the input container of the BitTimePicker.
Input string? null Custom CSS classes/styles for the input of the BitTimePicker.
Icon string? null Custom CSS classes/styles for the icon of the BitTimePicker.
Overlay string? null Custom CSS classes/styles for the overlay of the BitTimePicker.
Callout string? null Custom CSS classes/styles for the callout of the BitTimePicker.
CalloutContainer string? null Custom CSS classes/styles for the callout container of the BitTimePicker.
CalloutHeader string? null Custom CSS classes/styles for the callout header of the BitTimePicker.
CalloutFooter string? null Custom CSS classes/styles for the callout footer of the BitTimePicker.
TimeInputContainer string? null Custom CSS classes/styles for the time input container of the BitTimePicker.
HourInputContainer string? null Custom CSS classes/styles for the hour input container of the BitTimePicker.
IncreaseHourButton string? null Custom CSS classes/styles for the increase hour button of the BitTimePicker.
IncreaseHourIcon string? null Custom CSS classes/styles for the increase hour icon of the BitTimePicker.
HourInput string? null Custom CSS classes/styles for the hour input of the BitTimePicker.
DecreaseHourButton string? null Custom CSS classes/styles for the decrease hour button of the BitTimePicker.
DecreaseHourIcon string? null Custom CSS classes/styles for the decrease hour icon of the BitTimePicker.
HourMinuteSeparator string? null Custom CSS classes/styles for the hour minute separator of the BitTimePicker.
MinuteInputContainer string? null Custom CSS classes/styles for the minute input container of the BitTimePicker.
IncreaseMinuteButton string? null Custom CSS classes/styles for the increase minute button of the BitTimePicker.
IncreaseMinuteIcon string? null Custom CSS classes/styles for the increase minute icon of the BitTimePicker.
MinuteInput string? null Custom CSS classes/styles for the minute input of the BitTimePicker.
DecreaseMinuteButton string? null Custom CSS classes/styles for the decrease minute button of the BitTimePicker.
DecreaseMinuteIcon string? null Custom CSS classes/styles for the decrease minute icon of the BitTimePicker.
MinuteSecondSeparator string? null Custom CSS classes/styles for the minute second separator of the BitTimePicker.
SecondInputContainer string? null Custom CSS classes/styles for the second input container of the BitTimePicker.
IncreaseSecondButton string? null Custom CSS classes/styles for the increase second button of the BitTimePicker.
IncreaseSecondIcon string? null Custom CSS classes/styles for the increase second icon of the BitTimePicker.
SecondInput string? null Custom CSS classes/styles for the second input of the BitTimePicker.
DecreaseSecondButton string? null Custom CSS classes/styles for the decrease second button of the BitTimePicker.
DecreaseSecondIcon string? null Custom CSS classes/styles for the decrease second icon of the BitTimePicker.
AmPmContainer string? null Custom CSS classes/styles for the AM/PM container of the BitTimePicker.
AmButton string? null Custom CSS classes/styles for the AM button of the BitTimePicker.
PmButton string? null Custom CSS classes/styles for the PM button of the BitTimePicker.
Actions string? null Custom CSS classes/styles for the actions container of the BitTimePicker.
NowButton string? null Custom CSS classes/styles for the now button of the BitTimePicker.
ClearButton string? null Custom CSS classes/styles for the clear button of the BitTimePicker.
CloseButton string? null Custom CSS classes/styles for the close button of the BitTimePicker.
CloseButtonIcon string? null Custom CSS classes/styles for the close button icon of the BitTimePicker.

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.

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.

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 TimePicker.
Medium 1 The medium size TimePicker.
Large 2 The large size TimePicker.

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.

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.