Blazor日期时间选择器概述

的Blazor DateTime Picker组件允许用户从下拉菜单中的可视化列表中选择日期和时间，或者将其键入日期输入只能接受DateTime值。您可以控制输入的日期和时间格式，并对其进行响应事件．

DateTime Picker组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor DateTimePicker

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

select time: @selectedTime 
  @code {private DateTime?selectedTime =日期时间。现在;public DateTime Min = new DateTime(1990,1,1,8,15,0);public DateTime Max = new DateTime(2025, 1,1,19,30,45);｝

增量的步骤

DateTime Picker允许最终用户通过单击呈现的箭头来更改所选值。您可以通过嵌套设置递增和递减步骤DateTimePickerSteps标签及其参数。阅读更多关于Blazor DateTime Picker增量步骤…

事件

Blazor DateTime Picker生成您可以处理并进一步自定义其行为的事件。阅读更多关于Blazor DateTime Picker事件…．

验证

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

操作按钮

当使用下拉菜单编辑日期时，必须点击“设置”按钮提交日期。它位于下拉菜单的时间部分(选择日期后，您将自动导航到它)。点击“取消”，或者在下拉框外不点击“设置”，将时间恢复到原来的值。你也可以通过点击“NOW”按钮来提交日期，该按钮将选择当前时间。

格式

中的时间格式说明符格式在下拉菜单中控制玻璃杯。例如，HH说明符将生成一个24小时格式的小时选择器。如果你还添加tt说明，你也会得到AM/PM不倒转，但24小时格式仍将使用。这意味着如果格式字符串重复相同的时间部分，您还可以为它们添加几个转轮。

自适应呈现

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

DateTime Picker参数

Blazor日期时间选择器提供了允许您配置组件的各种参数。同时查看DateTimePicker的公共API．

造型和外观

以下参数使您能够自定义Blazor DateTimePicker的外观:

的样式中，可以找到自定义DateTimePicker样式的更多选项外观的文章．

格式占位符

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

• DateInput
• DatePicker
• DateTimePicker
• DateRangePicker
• TimePicker

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

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

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

DateTimePicker引用和方法

控件添加对组件实例的引用以使用日期时间选择器的方法．

  打开Popup @code {// datetime picker是一个通用组件，它的类型来自值字段类型私有TelerikDateTimePicker< datetime > DateTimePickerRef {get;设置;} private DateTime DateTimePickerValue = DateTime. now;private void OpenPopup() {DateTimePickerRef.Open();}}

下一个步骤

• DateTimePicker事件

另请参阅

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