Blazor时间选择器概述

的Blazor时间选择组件允许用户从下拉列表中选择一个时间，或者将其键入日期输入只接受DateTime值。您可以控制输入和响应中显示的格式事件。

Time Picker组件支持DateTime，DateTime吗?，DateTimeOffset和DateTimeOffset吗?类型。

TimePicker组件是《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

创建Blazor时间选择器

1. 添加TelerikTimePicker标签到你的剃刀页面。
2. 绑定一个DateTime对象到组件
3. 可选地，提供自定义格式，最小值和马克斯值

.ToLongTimeString() 
  @code {private DateTime?selecttime = DateTime.Now;//只使用时间部分public DateTime Min = new DateTime(1900, 1,1,8,15,0);public DateTime Max = new DateTime(1900, 1,1,19,30,45);｝

增量的步骤

Time Picker允许最终用户通过单击呈现的箭头来更改所选值。控件设置自增和自减步骤TimePickerSteps标记及其参数。阅读更多关于Blazor时间选择器增量步骤…

事件

Blazor Time Picker生成事件，您可以处理这些事件并进一步自定义其行为。阅读更多关于Blazor时间选择事件…。

验证

您可以通过使用内置验证来确保组件值是可接受的。阅读更多关于输入验证的信息…。

操作按钮

使用下拉菜单编辑日期时，必须点击“设置”按钮提交日期。点击“取消”，或在下拉框外未点击“设置”，时间将恢复为原始值。您也可以通过点击“NOW”按钮来提交日期，该按钮将选择当前时间。

格式

参数中的时间格式指定符格式在下拉菜单中控制可用的玻璃杯。例如，HH指定符将产生一个24小时格式的小时选择器。如果你还加上tt指定，你也会得到上午/下午的不倒翁，但24小时格式仍将被使用。这意味着如果格式字符串重复它们，您还可以为相同的时间部分添加多个tumbler。

最小和最大

的最小值和马克斯属性需要DateTime对象，但只使用它的时间部分。因此，日期本身并不重要。小时，分钟，秒和AM/PM部分控制的范围在时间选择器下拉。它们不会对输入编辑施加验证/限制。

自适应呈现

该组件根据屏幕大小支持不同的弹出窗口呈现。阅读更多关于自适应渲染功能以及如何启用它…

时间选择器参数

Blazor Time Picker组件提供了各种参数，允许您配置该组件。也可以查看TimePicker的公共API。

造型与外观

以下参数使您能够自定义Blazor时间选择器的外观:

控件中可以找到自定义时间选择器样式的更多选项外观的文章。

格式占位符

的FormatPlaceholder参数允许您将自定义字符串设置为每个DateTime段的占位符，并可用于以下Blazor组件的Telerik UI:

• DateInput
• DatePicker
• DateTimePicker
• DateRangePicker
• TimePicker

要设置FormatPlaceholder，使用< *组件* FormatPlaceholder >嵌套的标签。它允许您使用以下参数设置格式占位符:

• 一天
• 月
• 一年
• 小时
• 一分钟
• 第二个
• 工作日

缺省情况下，所有参数的取值为零，它应用完整的格式说明符。

时间选择器引用和方法

添加对组件实例的引用以使用时间选择器的方法。

  打开Popup @code{//日期时间选择器是一个通用组件，它的类型来自于值字段类型私有TelerikTimePicker< datetime > TimePickerRef {get;设置;} private DateTime TimePickerValue = DateTime. now;private void OpenPopup() {TimePickerRef.Open();}}

下一个步骤

• 使用时间选择器事件

• 配置时间选择器增量步骤

另请参阅

• 实时演示:时间选择器
• 输入验证
• 支持的输入日期格式
• API参考