Blazor DateInput概述
的Blazor Date输入组件允许用户输入日期。开发人员可以控制日期的格式。如果用户输入不匹配所需的模式,则不接受该值。如果输入可以被解析,它将被自动更正。
Date Input组件是为Blazor的Telerik UI,一个具有100个本地组件的专业级UI库,用于构建现代和功能丰富的应用程序。想要试用它,请注册一个30天的免费试用。
创建Blazor DateInput
- 添加
TelerikDateInput
标记到你的剃须刀页面。 - 绑定一个
DateTime
对象添加到组件 - 可选地,提供自定义
格式
,最小值
而且马克斯
值
基本数据输入自定义格式,最小和最大
@dateInputValue
@code {DateTime dateInputValue {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 Input允许最终用户通过单击呈现的箭头来更改所选值。您可以通过嵌套设置递增和递减步骤DateInputSteps
标记及其参数。阅读更多关于Blazor日期输入增量步骤…
事件
Blazor Date Input生成您可以处理和进一步定制其行为的事件。阅读更多关于Blazor日期输入事件….
验证
您可以通过使用内置验证来确保组件值是可接受的。阅读更多关于输入验证的信息….
输入参数
属性 | 类型及默认值 | 描述 |
---|---|---|
自动完成 |
字符串 |
的自动完成 的HTML属性输入 . |
DebounceDelay |
int ( 150 ) |
从最后输入的符号到值更新之间的时间(以毫秒为单位)。使用它来平衡客户端性能和数据库查询的数量。 |
启用 |
保龄球 |
定义如果DateInput 启用了 |
格式 |
字符串 |
用户输入的日期格式必须匹配。欲知详情,请浏览支持的格式篇文章。 |
Id |
字符串 |
的id 的HTML属性输入 |
占位符 |
字符串 |
的占位符 属性输入 元素。如果组件被绑定到可空DateTime对象-,则会出现占位符DateTime吗? ,但如果组件被绑定到不可空DateTime对象的默认值,则不会被呈现。当输入没有聚焦时,占位符值将显示出来。一旦用户聚焦它开始输入,格式占位符(默认或定制一个)将覆盖占位符,以指示输入日期的格式。 |
TabIndex |
int |
的tabindex HTML元素的属性。控件的焦点,您可以使用它自定义表单中的输入的焦点顺序选项卡 关键。 |
ValidateOn |
ValidationEvent 枚举( 输入 ) |
将触发验证的事件(如果启用了验证)。更多信息请访问简单输入的验证模式 |
价值 |
DateTime 或DateTime吗? |
的值DateInput .支持双向绑定。 |
造型和外观
以下参数使您能够自定义Blazor DateInput的外观:
属性 | 类型及默认值 | 描述 |
---|---|---|
类 |
字符串 |
将在上呈现的CSS类输入 元素 |
宽度 |
字符串 |
的宽度DateInput |
中可以找到定制日期输入样式的更多选项外观的文章.
格式占位符
的FormatPlaceholder
参数允许您设置自定义字符串作为每个DateTime段的占位符,并可用于以下Telerik UI for Blazor组件:
- DateInput
- DatePicker
- DateTimePicker
- DateRangePicker
- TimePicker
设置FormatPlaceholder
,使用< *组件* FormatPlaceholder >
嵌套的标签。它允许你通过使用以下参数设置格式占位符:
一天
月
一年
小时
一分钟
第二个
工作日
缺省情况下,所有参数的值为零
,它应用完整格式说明符。
DateTime和null DateTime
组件的行为将取决于它所绑定的字段类型,这可能导致不同的用户体验和它将输出的值:
绑定到空日期时间
- 当value为
零
- - -格式
显示为占位符。 - 修改部件时,如果没有定义部件,则保留该值
零
. - 当提供了所有值时,值会发生变化。
- 删除任何部分时,整个值变为
零
,整个输入返回到格式占位符。当一个或多个段被删除时,该值不再是有效日期,因此默认为零
. - 当在一个
EditForm
,如果字段上没有属性,且值被删除,则不会显示验证错误。
绑定到一个非空日期时间
- 当该值为undefined时,默认为
0001-01-01
,因此组件将其作为一个值。 - 修改部件时,如果没有定义某些部件,则绑定值不变。
- 当提供了所有值时,值会发生变化。
- 删除输入的焦点段后,只有该部分切换到格式占位符,而不是整个值。
- 当在一个
EditForm
,如果字段上没有属性,且该值被删除,则显示验证错误。
组件引用
@using TelerikDateInput @ref="theDateInput" @bind-Value="@dateInputValue"> @code {DateTime dateInputValue {get;设置;} = DateTime.Now;//组件的类型取决于值的类型//在本例中它是DateTime,但它也可以是DateTime?Telerik.Blazor.Components。TelerikDateInput theDateInput; }