Ant Design Blazor
TimePicker
To select/input a time.
When To Use
By clicking the input box, you can select a time from a popup panel.
Examples
Click TimePicker, and then we could select or input a time in panel.
The input box comes in three sizes. large is used in the form, while the medium size is the default.
While part of format is omitted, the corresponding column in panel will disappear, too.
Render addon contents to time picker panel's bottom.
Use time range picker with RangePicker.
value and onChange should be used together,
A disabled state of the TimePicker.
Show stepped options by hourStep minuteStep secondStep.
TimePicker of 12 hours format, with default format hh:mm:ss tt.
TimePicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| Disabled | ParameterDisable the date picker. | Boolean | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ShowWeek | ParameterWhen true, will show week column in date panel | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |