logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

TimePicker时间选择框

输入或选择时间的控件。

何时使用


当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。

Examples

点击 TimePicker,然后可以在浮层中选择或者输入某一时间。

expand code expand code

三种大小的输入框,大的用在表单中,中的为默认。

expand code expand code

TimePicker 浮层中的列会随着 format 变化,当略去 format 中的某部分时,浮层中对应的列也会消失。

expand code expand code

在 TimePicker 选择框底部显示自定义的内容。

expand code expand code

通过 RangePicker 使用时间范围选择器。

expand code expand code

value 和 onChange 需要配合使用。

expand code expand code

禁用时间选择。

expand code expand code

可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。

expand code expand code

12 小时制的时间选择器,默认的 format 为 hh:mm:ss tt

expand code expand code

TimePicker API#

属性 描述 类型 默认值
OnChange 属性选中值改变时执行的回调 EventCallback<DateTimeChangedEventArgs<TValue>> --
ChangeOnClose 属性模糊后保存输入值 Boolean --
Picker 属性设置选择器类型 DatePickerType --
PopupContainerSelector 属性用于放置弹出窗口容器的选择器 String --
Disabled 属性禁用日期选择器。当给定一个布尔值时,它将禁用所有布尔值。当给定一个布尔数组时,它表示禁用范围的开始/结束:[start, end] OneOf<Boolean, Boolean[]> --
BoundaryAdjustMode 属性叠加调整策略(例如浏览器调整大小时) TriggerBoundaryAdjustMode --
Bordered 属性是否显示边框 Boolean true
AutoFocus 属性是否自动对焦输入 Boolean false
Open 属性选择器是否打开 Boolean false
InputReadOnly 属性选择器是否只读 Boolean false
ShowToday 属性是否显示从任何日期选择今天的今天按钮 Boolean true
Mask 属性用于本地化 UI 字符串的语言环境 String LocaleProvider.CurrentLocale.DatePicker
Locale 属性 DatePickerLocale --
CultureInfo 属性用于本地化的 CultureInfo CultureInfo CultureInfo for Locale
ShowTime 属性是否显示时间。

当为布尔值时,它将 ShowTime 设置为布尔值。

当为字符串时,它将 ShowTime 设置为 true 并使用字符串值作为时间格式。

OneOf<Boolean, String> --
AllowClear 属性是否允许清除所选值 Boolean true
Placeholder 属性输入占位符 OneOf<String, String[]> --
PopupStyle 属性应用于弹出窗口的样式 String --
ClassName 属性选择器类名 String --
DropdownClassName 属性弹出框下拉列表的类名 String --
Format 属性日期时间显示格式 String --
DefaultValue 属性默认值 TValue --
DefaultPickerValue 属性选择器的默认值 TValue --
SuffixIcon 属性自定义后缀图标 RenderFragment --
Ranges 属性范围选择预设允许用户通过单击按钮选择范围 Dictionary<String, Nullable`1[]> --
RenderExtraFooter 属性在选择器页脚中显示的额外内容 RenderFragment --
OnClearClick 属性单击清除时执行的回调Use OnClear instead

Obsolete 将在未来的版本中删除。
EventCallback --
OnClear 属性单击清除按钮时调用。 EventCallback --
OnOk 属性单击确定时执行的回调 EventCallback --
OnOpenChange 属性打开或关闭弹出式日历时执行的回调 EventCallback<Boolean> --
OnPanelChange 属性当显示的面板类型改变时执行的回调 EventCallback<DateTimeChangedEventArgs<TValue>> --
DisabledDate 属性确定是否应禁用提供的日期的功能 Func<DateTime, Boolean> --
DisabledHours 属性确定是否应禁用日期中的某个小时的函数 Func<DateTime, Int32[]> --
DisabledMinutes 属性确定是否应禁用日期中的分钟的函数 Func<DateTime, Int32[]> --
DisabledSeconds 属性确定是否应禁用日期中的秒数的函数 Func<DateTime, Int32[]> --
DisabledTime 属性确定日期中应禁用哪些时间的函数 Func<DateTime, DatePickerDisabledTime> --
DateRender 属性日期单元格的自定义呈现 Func<DateTime, DateTime, RenderFragment> --
MonthCellRender 属性月份单元格的自定义渲染 Func<DateTime, RenderFragment> --
Placement 属性弹出选择框的位置 Placement --
Use12Hours 属性为真时,将使用 12 小时时间。当 false 时将使用 24 小时制 Boolean false
ValidationMessages FormItem 的验证消息 String[] --
AdditionalAttributes 属性获取或设置将应用于所创建元素的附加属性的集合。 IReadOnlyDictionary<String, Object> --
Value 属性获取或设置输入的值。这应该与双向绑定一起使用。 TValue --
ValueChanged 属性更新绑定值的回调。 EventCallback<TValue> --
ValueExpression 属性标识绑定值的表达式。 Expression<Func<TValue>> --
ValuesExpression 属性标识可枚举绑定值的表达式。 Expression<Func<IEnumerable<TValue>>> --
Size 属性输入框的大小。注意:在表单的上下文中,使用“大”尺寸。可用:`大``默认``小` String AntSizeLDSType.Default
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
方法签名 返回类型 描述
FocusAsync() Task 将焦点添加到选取器输入
BlurAsync() Task 从选取器输入中删除焦点
Close() void 关闭弹出窗口
Switch开关 Transfer穿梭框
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.