Blazor daterrange Picker组件概述

的Blazor daterrange Picker组件允许用户选择一个日期范围(开始日期和结束日期)-从一个可视列表(日历)或输入日期输入只接受日期。您可以控制输入中显示的格式和用户不能选择的日期，以及实现验证和响应事件。

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

下载免费试用

正在创建Blazor日期范围选择器

1. 使用TelerikDateRangePicker标记将组件添加到剃须刀页面。
2. 结合其StartValue而且EndValue参数DateTime对象
3. 可选地，提供自定义格式，最小值而且马克斯值

@StartValue ?。ToString("dd MMM yyyy") 
 @EndValue?.ToString("dd MMM yyyy") 
   @code { public DateTime? StartValue { get; set; } = DateTime.Now; public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10); public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0); public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45); }

事件

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

验证

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

为了限制用户在输入中写入日期，使结束位于开始之后，必须实现一个自定义数据注释属性(您可以在上面链接的文章中找到一个示例)。DateRangePicker组件不会为了提供流畅的用户体验而开箱即用—代码不知道用户的意图是什么，如果有机会，它们可能会修复范围，因此立即纠正输入可能会妨碍用户舒适地使用它。该组件可以在弹出式日历中完全控制用户体验，并确保范围值是有效的(开始在结束之前)。如果用户在开始之前选择了结束日期，那么这个日期将成为新的开始，他们可以再次选择结束。

头模板

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

自适应呈现

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

DateRangePicker参数

Blazor日期范围选择器提供了各种参数，允许您配置组件。还要检查DateRangePicker的公共API．

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

造型和外观

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

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

格式占位符

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

• DateInput
• DatePicker
• DateTimePicker
• DateRangePicker
• TimePicker

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

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

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

DateRangePicker参考和方法

类向组件实例添加引用以使用日期范围选择器的方法．

焦点开始文本框    @code{//组件类型取决于值类型，也可以是DateTime?private TelerikDateRangePicker DateRangePickerRef {get;设置;} private DateTime DateRangePickerStartValue {get;设置;} = DateTime.Now;private DateTime DateRangePickerEndValue {get;设置;} = DateTime.Now.AddDays(10);private async Task FocusStart() {await DateRangePickerRef.FocusStartAsync(); } async Task FocusEnd() { await DateRangePickerRef.FocusEndAsync(); } void OpenPicker() { DateRangePickerRef.Open(); } }

下一个步骤

• 使用日期范围选择器事件

另请参阅

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