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 |
的tabindexHTML元素的属性。控件的焦点，您可以使用它自定义表单中的输入的焦点顺序选项卡关键。 |
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; }