Pickers
TimePicker
Bit.BlazorUI
A BitTimePicker picks a time of day (a TimeSpan) with hour, minute and optional second spin inputs, in a callout or inline. It is culture-aware, supports 12/24-hour clocks, steps, ranges and allowed-value rules, typed input, and full keyboard, mouse-wheel and screen reader operation.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The basic states.
ReadOnly keeps the value focusable and posted but refuses changes;
IsEnabled="false" also takes it out of the form and the tab order.
02:50
02:50
Time format & seconds
TimeFormat picks the 24- or 12-hour clock; ShowSeconds adds a seconds input. The
value is always a time of day (5:30 PM is 17:30). In 12-hour mode a typed hour stays in the current half
of the day, while the spin buttons carry AM/PM across noon.
Text input
AllowTextInput lets the time be typed into the field. Either clock format is accepted, with or
without seconds (2:05 PM becomes 14:05 in a 24-hour picker); anything else, or a time the rules
refuse, fails validation.
Icon
IconName and IconLocation set the field icon. IncreaseHourIconName,
DecreaseHourIconName (and the minute/second twins) and CloseButtonIconName set
the callout icons.
Formatting & culture
By default the time is written in the pattern of the
Culture, which also supplies the AM/PM
designators and, for a right-to-left culture, the layout direction (see
CultureInfoHelper(opens in a new tab)).
ValueFormat sets a .NET time format instead, used for both display and typed input.
Binding
@bind-Value binds a TimeSpan? (spans outside a day wrap into one).
DefaultValue starts the picker with a value; StartingValue leaves it empty but
makes the first change land near it (stepping the hour below gives 10:30, not 01:00).
05:12
Selected time: 05:12:15
08:15
Standalone
Standalone renders the picker inline, without the field and callout. It still posts and
validates in a form, and is announced as a group named by its label.
10:24 AM
Selectable range
MinTime/MaxTime bound the range. AllowedHours,
AllowedMinutes and AllowedSeconds add rules on top: the controls skip what they
reject and typed text that hits one fails validation. DisablePast/DisableFuture
bound by the current time, read in TimeZone (the local zone by default - the server's, in a
server-rendered app) or pinned by Now.
Steps
HourStep, MinuteStep and SecondStep set the grid the spin buttons,
PageUp/PageDown, the wheel and the now button move on, anchored at MinTime. A
typed time is not held to it: a step is a granularity, not a validation rule.
Action buttons
ShowNowButton picks the current time (snapped to the rules), ShowClearButton
clears the value and ShowCloseButton adds a dismiss button; AutoClose closes the
callout after the now button. ShowInputClearButton puts a clear button in the field itself.
Selected time:
14:30
Validation & helper text
Description adds helper text tied to the input via aria-describedby.
ErrorMessage shows an app-side error and marks the picker invalid (Invalid does
the latter alone). In an EditForm, InvalidErrorMessage,
OutOfRangeErrorMessage and DisallowedTimeErrorMessage word the three ways a
typed time is refused.
When the meeting starts, in your local time.
That slot was taken while you were choosing.
That slot was taken while you were choosing.
Appearance
Prefix/Suffix (or their templates) add addons flush with the field ends; their
text is read as part of the field's description. Underlined and
HasBorder="false" change the frame, DropDirection where the callout opens, and
Responsive turns it into a swipe-to-dismiss sheet on small screens.
Starts atUTC
Keyboard & accessibility
- Enter, Space or ↓ opens the picker (only ↓ on an editable field) and focuses the hour; Esc or Alt+↑ closes it back onto the field, Tab from the field closes it and moves on.
- ↑/↓ step a time input as its spin buttons do (by its step, wrapping, AM/PM crossing noon), PageUp/PageDown by five steps, Home/End jump to its ends, and Enter accepts and closes. Tab skips the spin buttons.
- Pasting a whole time (14:30, 2:30 PM) into any time input sets it.
- 12-hour pickers take the first letter of the culture's designators (a/p) from any input.
AutoAdvancemoves on to the next input once a part is complete, so 1430 types 14:30.- Shift+wheel over a focused time input steps it (
NoMouseWheelturns it off,InvertMouseWheelreverses it).
CalloutAriaLabel, HourInputAriaLabel-style and IncreaseHourTitle-style
parameters name the parts; AM/PM report aria-pressed; a live region announces the whole time
on every change. AriaDescription adds screen-reader-only help.
Events
OnSelectTime (every change made with the picker), OnChange (the bound value),
OnClear, OnOpen/OnClose, and the field's OnClick,
OnFocusIn and OnFocusOut.
Programmatic control
Bind
IsOpen, or call OpenCallout (opens as a click would) and
DismissCallout (closes without moving the focus).
IsOpen: False
Templates
LabelTemplate, IconTemplate and DescriptionTemplate replace their
parts; CalloutHeaderTemplate/CalloutFooterTemplate add content around the time
inputs, such as preset times.
Pick a meeting time
CSS variables
The
--bit-TimePicker-* properties inherit: set them on :root for every picker or
on Style for one. Style's values are copied to the callout too, which leaves the
picker while open (so an ancestor other than :root reaches the field only). Full list in the
CSS variables table below.
09:45 AM
Cascading parameters
BitParams with a BitTimePickerParams sets shared defaults for every TimePicker under it. A
parameter a picker sets itself wins, one by one. The value, its callbacks,
IsOpen and the
error state stay per instance.
Color
Color (Primary by default) colors the selected AM/PM button, the now/clear buttons and the
focus indicator.
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
10:30 AM
External Icons
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.
FontAwesome:
Bootstrap:
Size
Size scales the field, its label and the callout (Medium by 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
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.
BitTimePicker CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-TimePicker-color | The Color role's main color | Accent of the picker: the background of the selected AM/PM button and the text of the now and clear action buttons. |
| --bit-TimePicker-on-color | The Color role's on-color | Text color over that accent, which is what the selected AM/PM button is written in. |
| --bit-TimePicker-hover-color | The Color role's hover color | Accent of the selected AM/PM button while it is hovered (pointer devices only). |
| --bit-TimePicker-active-color | The Color role's active color | Accent of the selected AM/PM button while it is pressed. |
| --bit-TimePicker-focus-color | The Color role's focus color | Color of the keyboard focus ring drawn around the field and around every control of the callout. |
| --bit-TimePicker-invalid-color | --bit-clr-err | Border and underline of an invalid field (the frame of an invalid Standalone picker), and the color of the ErrorMessage text. The focus ring keeps its own error color. |
| --bit-TimePicker-background | --bit-clr-bg-pri | Background of the input field. |
| --bit-TimePicker-text-color | --bit-clr-fg-pri | Text color of the input field. |
| --bit-TimePicker-placeholder-color | --bit-clr-fg-sec | Text color of the placeholder. |
| --bit-TimePicker-border-color | --bit-clr-brd-pri | Border of the input field, and the rule of the underlined variant. |
| --bit-TimePicker-hover-border-color | --bit-clr-brd-pri-hover / --bit-clr-brd-pri-active | Border of the hovered and the pressed field. An invalid field keeps its error color. |
| --bit-TimePicker-border-width | --bit-shp-border-width | Stroke of that border. |
| --bit-TimePicker-radius | --bit-shp-radius-control | Corner radius of the input field. |
| --bit-TimePicker-height | per Size, --bit-siz-ctrl-* | Height of the input field. |
| --bit-TimePicker-padding | spacing(1) | Inline padding of the input field. |
| --bit-TimePicker-font-size | per Size | Text size of the input field. |
| --bit-TimePicker-icon-color | --bit-clr-fg-sec | Color of the field icon and of the clear button inside the field. |
| --bit-TimePicker-icon-size | per Size, --bit-siz-icon-* | Size of the field icon and of the clear button glyph. |
| --bit-TimePicker-prefix-color | --bit-clr-fg-pri | Text of the prefix addon. |
| --bit-TimePicker-prefix-background | --bit-clr-bg-sec | Background of the prefix addon. |
| --bit-TimePicker-suffix-color | --bit-clr-fg-pri | Text of the suffix addon. |
| --bit-TimePicker-suffix-background | --bit-clr-bg-sec | Background of the suffix addon. |
| --bit-TimePicker-label-color | --bit-clr-fg-pri | Color of the label. |
| --bit-TimePicker-label-font-size | per Size | Text size of the label. |
| --bit-TimePicker-label-font-weight | --bit-tpg-field-label-font-weight | Weight of the label. |
| --bit-TimePicker-required-color | --bit-clr-req | Color of the asterisk of a required picker. |
| --bit-TimePicker-description-color | --bit-clr-fg-sec | Color of the helper text. |
| --bit-TimePicker-description-font-size | per Size | Text size of the helper text and of the error message. |
| --bit-TimePicker-disabled-color | --bit-clr-fg-dis | Text, icon and glyph color of a disabled picker. |
| --bit-TimePicker-disabled-background | --bit-clr-bg-dis | Background of a disabled field. |
| --bit-TimePicker-disabled-border-color | --bit-clr-brd-dis | Border of a disabled field. |
| --bit-TimePicker-callout-background | --bit-clr-bg-pri | Background of the popup. |
| --bit-TimePicker-callout-radius | --bit-shp-radius-popup | Corner radius of the popup. |
| --bit-TimePicker-callout-padding | spacing(2) | Padding inside the popup. |
| --bit-TimePicker-callout-shadow | --bit-shd-popup | Elevation of the popup. |
| --bit-TimePicker-overlay-background | transparent | The layer behind an open popup - a scrim for the Responsive sheet, for example. |
| --bit-TimePicker-gap | spacing(1) | Space between the hour, the minute and the second groups. |
| --bit-TimePicker-cell-size | per Size | Width and height of a time input and of a spin button. |
| --bit-TimePicker-cell-font-size | per Size | Text size of the time inputs. |
| --bit-TimePicker-cell-color | --bit-clr-fg-pri | Text color of the time inputs. |
| --bit-TimePicker-cell-font-weight | --bit-tpg-font-weight | Weight of the time inputs, the separators and the AM/PM buttons. |
| --bit-TimePicker-cell-radius | --bit-shp-radius-button | Corner radius of a spin button, of the AM/PM buttons and of the action buttons. |
| --bit-TimePicker-separator-color | inherited | Color of the ":" between the parts of the time. |
| --bit-TimePicker-separator-font-size | per Size | Size of the ":" between the parts of the time. |
| --bit-TimePicker-spin-color | --bit-clr-fg-pri | Glyph color of a spin button. |
| --bit-TimePicker-spin-font-size | per Size | Glyph size of a spin button. |
| --bit-TimePicker-spin-hover-background | --bit-clr-bg-pri-hover | Background of a hovered spin button, action button or clear button. |
| --bit-TimePicker-spin-active-background | --bit-clr-bg-pri-active | Background of a pressed spin button, action button or clear button. |
| --bit-TimePicker-meridiem-font-size | per Size | Text size of the AM/PM buttons. |
| --bit-TimePicker-action-font-size | per Size | Text size of the now and clear action buttons. |
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. |
| AriaDescription | string? | null | The text tied to the TimePicker as its accessible description without being shown on the screen, which is what lets a field carry an instruction too long to put next to it. It is read after Description, so the two can be used together. |
| AutoAdvance | bool | false | Moves the focus on to the next time input once the one being typed into cannot take another digit - after two digits, or after one no second digit could extend (a 3 in the hour of a 24-hour picker). |
| AutoClose | bool | false | Closes the callout once the now button has set the whole time. The spin buttons and the time inputs change one part at a time, so they leave it open. |
| 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. A standalone picker with a Label is named by that label instead. |
| 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. |
| ClearButtonIcon | BitIconInfo? | null | The icon of the clear button of the input, shown when ShowInputClearButton is set, using custom CSS classes for external icon libraries. Takes precedence over ClearButtonIconName when both are set. |
| ClearButtonIconName | string? | null | The name of the icon of the clear button of the input from the built-in Fluent UI icons. |
| ClearButtonText | string | Clear | The text of the clear button, shown when ShowClearButton is set. |
| ClearButtonTitle | string | Clear the selected time | The title of the clear button of the input (tooltip and aria-label), shown when ShowInputClearButton 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). |
| Description | string? | null | The helper text of the TimePicker, rendered under the field. The input references it through its aria-describedby, so a screen reader reads it along with the picker. |
| DescriptionTemplate | RenderFragment? | null | The custom template for the helper text of the TimePicker, which replaces Description. It is tied to the picker as its accessible description in the same way. |
| 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. |
| ErrorMessage | string? | null | The error message rendered under the field, which also marks the picker invalid. It is meant for a rejection the app itself knows about; a picker inside an EditForm already gets its messages from the cascading EditContext. |
| ErrorMessageTemplate | RenderFragment? | null | The custom content of the error message, which replaces the plain ErrorMessage text and marks the picker invalid in the same way. |
| 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 and the arrow keys 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 they 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). |
| Invalid | bool | false | Marks the TimePicker as invalid without an EditContext having said so, giving it the same look and the same aria-invalid attribute an invalid bound value does. Setting ErrorMessage implies it. |
| InvalidErrorMessage | string? | null | The custom validation error message for the invalid value. |
| InvertMouseWheel | bool | false | Reverses the direction the mouse wheel moves a time input in. |
| 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 and the arrow keys 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 they 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. |
| NoMouseWheel | bool | false | Disables changing the time inputs with the mouse wheel. By default Shift+wheel over a focused time input moves it by its step; the wheel alone scrolls the page. |
| Now | TimeSpan? | null | The current time of day the picker uses in place of the clock's, for the now button, DisablePast and DisableFuture. Mostly useful to pin "now" down in tests and demos. |
| 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. |
| Prefix | string? | null | The text displayed flush with the start of the field, before the input. It is not part of the value. |
| PrefixTemplate | RenderFragment? | null | The custom content displayed at the start of the field, which replaces Prefix. |
| 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 and the arrow keys 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 they 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. |
| ShowInputClearButton | bool | false | Shows a clear button inside the field once a time is selected, so the value can be taken back without opening the callout. It is not rendered while the picker is read-only or standalone. |
| 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. |
| Suffix | string? | null | The text displayed flush with the end of the field, after the icon. It is not part of the value. |
| SuffixTemplate | RenderFragment? | null | The custom content displayed at the end of the field, which replaces Suffix. |
| TimeFormat | BitTimeFormat | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| TimeZone | TimeZoneInfo? | null | The time zone the clock is read in for the now button, DisablePast and DisableFuture. Defaults to the local time zone - the server's, in a server-side rendered app. |
| 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. |
| PrefixContainer | string? | null | Custom CSS classes/styles for the prefix container of the BitTimePicker. |
| Prefix | string? | null | Custom CSS classes/styles for the prefix text 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. |
| SuffixContainer | string? | null | Custom CSS classes/styles for the suffix container of the BitTimePicker. |
| Suffix | string? | null | Custom CSS classes/styles for the suffix text of the BitTimePicker. |
| InputClearButton | string? | null | Custom CSS classes/styles for the clear button rendered inside the input of the BitTimePicker. |
| InputClearButtonIcon | string? | null | Custom CSS classes/styles for the icon of the clear button rendered inside the input of the BitTimePicker. |
| ErrorMessageContainer | string? | null | Custom CSS classes/styles for the container of the error message of the BitTimePicker. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the error message of the BitTimePicker. |
| DescriptionContainer | string? | null | Custom CSS classes/styles for the container of the description (helper text) of the BitTimePicker. |
| Description | string? | null | Custom CSS classes/styles for the description (helper text) 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.