Blazor Date Picker概述

的Blazor日期选择器组件允许用户从可视化格列高利表中选择日期日历或者把它输入日期输入只接受日期。您可以控制输入的日期格式、用户如何在日历中导航以及用户不能选择哪些日期。

日期选择器组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

正在创建Blazor日期选择器

1. 使用TelerikDatePicker标记将组件添加到剃须刀页面。

2. 绑定一个DateTime对象添加到组件

3. 可选地，提供自定义格式，最小值而且马克斯值

所选日期为:@datePickerValue.ToShortDateString() 
   @code {DateTime datePickerValue {get;设置;} = DateTime.Now;public DateTime Min = new DateTime(1990, 1,1,8,15,0);public DateTime Max = new DateTime(2025, 1,1,19,30,45);｝

增量的步骤

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

事件

Blazor Date Picker生成您可以处理和进一步定制其行为的事件。阅读更多关于Blazor Date Picker事件的信息…．

验证

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

头模板

DatePicker允许您自定义Calendar弹出头的呈现。欲知详情，请浏览模板文章．

自适应呈现

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

日期选择器参数

Blazor Date Picker提供了各种参数，允许您配置组件:

日期选择器本质上是日期输入和一个日历它公开的属性被映射到这两个组件的相应属性。您可以在各自组件的文档中了解更多关于它们行为的信息。

造型和外观

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

中的自定义日期选择器样式的更多选项外观的文章．

格式占位符

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

• DateInput
• DatePicker
• DateTimePicker
• DateRangePicker
• TimePicker

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

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

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

DatePicker引用和方法

类向组件实例添加引用以使用约会挑选者的方法．

 Focus DatePicker Open DatePicker Calendar @code{//组件类型取决于值类型私有TelerikDatePicker DatePickerRef {get;设置;} private DateTime DatePickerValue {get;设置;} = DateTime.Now;private async Task FocusPicker() {await DatePickerRef.FocusAsync();}私有无效OpenPicker() {DatePickerRef.Open();}}

下一个步骤

• 使用日期选择器事件

• 配置日期选择器增量步骤

另请参阅

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