组件/日期选择器

Blazor日期选择器概述

的Blazor Date Picker组件允许用户从可视化的公历日期中选择日期日历或者输入日期输入只接受日期。您可以控制输入的日期格式、用户如何在日历中导航，以及用户不能选择哪些日期。

Telerik UI的Blazor忍者形象

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

下载免费试用

创建Blazor日期选择器

  1. 使用TelerikDatePicker标记，将组件添加到razor页面。

  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日期选择增量步骤…

事件

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

验证

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

头模板

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

自适应呈现

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

日期选择器参数

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

属性 类型及默认值 描述
AdaptiveMode AdaptiveMode枚举
（没有一个）		 的自适应模式组件的。
自动完成 字符串
（“关闭”）		 的自动完成的HTML属性输入．
BottomView CalendarView枚举
（月）		 定义用户可以导航到的弹出式日历中最底部的视图。
DebounceDelay int
（150）		 从最后输入符号到值更新之间的时间(以毫秒为单位)。使用它来平衡客户端性能和数据库查询数量。
DisabledDates < DateTime列表> 不能选择的日期列表。
启用 保龄球 指定是否允许在输入中输入并单击按钮。
格式 字符串 DatePicker的DateInput格式。阅读更多关于支持的数据格式在Telerik DateInput Blazor UI篇文章。
Id 字符串 的id属性上的<输入/ >元素。用它来附加一个<标签= " " >对输入。
马克斯 DateTime 用户可以选择的最晚日期。
最小值 DateTime 用户可以选择的最早日期。
TabIndex int ? 映射到tabindexHTML元素的属性。控件聚焦表单中的输入的顺序可以使用它自定义选项卡关键。
标题 字符串 在弹出窗口(动作表)头部呈现的标题文本。仅适用于以下情况AdaptiveMode设置为汽车．
占位符 字符串 映射到占位符HTML元素的属性。的占位符如果组件绑定到可以为空DateTime对象-DateTime吗?．如果组件绑定到非空DateTime对象的默认值，则不会呈现该对象。当输入没有被聚焦时，将显示占位符值。一旦用户聚焦它开始输入，格式占位符(默认或定制一个)将覆盖占位符，以指示输入日期的格式。
ValidateOn ValidationEvent枚举
（输入）		 配置将触发验证的事件(如果启用了验证)。欲知详情，请浏览简单输入的验证模式．
价值 DateTime或DateTime吗? 组件的当前值。支持双向绑定。
视图 CalendarView枚举
（月）		 将显示在弹出式日历中的当前视图。

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

造型和外观

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

属性 类型及默认值 描述
类 字符串 在包装元素上呈现的自定义CSS类。
PopupClass 字符串 一个额外的CSS类，用于自定义日期选择器下拉菜单的外观。
PopupHeight 字符串 定义DatePicker的弹出窗口的高度。默认为汽车．
PopupWidth 字符串 定义DatePicker弹出窗口的宽度。默认为汽车．
宽度 字符串 定义DatePicker的宽度。默认为280 px．

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

格式占位符

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

  • DateInput
  • DatePicker
  • DateTimePicker
  • DateRangePicker
  • TimePicker

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

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

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

DatePicker引用和方法

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

方法 描述
关闭 关闭日历弹出窗口。
FocusAsync 集中显示日期选择器文本框。总是等待这个调用，正如它所依赖的JSInterop．
NavigateTo 导航到指定的日期和视图。该方法期望DateTime而且CalendarView参数。
开放 打开日历弹出窗口。
刷新 重新渲染弹出的日历。 
 焦点DatePicker 打开DatePicker日历 @code{//组件类型取决于值类型私有TelerikDatePicker DatePickerRef {get;设置;} private DateTime DatePickerValue {get;设置;} = DateTime.Now;private async任务FocusPicker(){等待DatePickerRef.FocusAsync();}私有无效OpenPicker() {DatePickerRef.Open();}}

下一个步骤

另请参阅

在本文中
相关文章
找不到你需要的帮助? 改进这篇文章
Baidu
map