Blazor DateRange Picker组件概述

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

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

下载免费试用

创建Blazor日期范围选择器

1. 使用TelerikDateRangePicker标记，将组件添加到razor页面。
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); }

日期输入输入设置

DateRangePicker文本框是DateInput组件，提供各种参数配置键盘输入体验。设置涉及:

• 插入符号位置;
• 两位数的年份值;
• 自动更正无效的日期段。

看到日期输入键盘文档有关详细信息和示例。DateRangePicker存在具有相同行为的相同DateInput参数。

事件

Blazor Date Range Picker生成您可以处理和进一步自定义其行为的事件。阅读更多关于Blazor日期范围选择器事件…．

验证

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

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

头模板

DateRangePicker允许您自定义Calendar弹出头的呈现。如欲了解更多，请浏览模板文章．

自适应呈现

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

周数

日历弹出窗口可以在每行日期单元格上显示ISO周数。看到ShowWeekNumbers参数在下面。

DateRangePicker参数

Blazor Date Range Picker提供了允许您配置组件的各种参数。同时查看DateRangePicker的公共API．

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

用户体验

组件提供多个参数，用于控制插入符号的位置，两位数的年份值和文本框的自动更正行为。看到DateInput详细资料．

造型和外观

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

控件中，可以找到自定义日期范围选择器样式的更多选项外观的文章．

格式占位符

可以为每个日期格式段设置自定义字符串作为占位符。该特性可用于以下Telerik UI的Blazor组件:

• DateInput
• DatePicker
• DateRangePicker
• DateTimePicker
• TimePicker

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

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

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

DateRangePicker引用和方法

控件添加对组件实例的引用以使用日期范围选取器的方法．

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

下一个步骤

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

另请参阅

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