SxDatePicker (日期选择)
选择单个日期的输入组件。对齐 Microsoft Fluent UI Blazor DatePicker (v4.13.2) 的 API 结构,并说明 NextUI 当前实现状态。
使用场景
- 表单中的日期选择
- 过滤与检索的日期条件
- 时间范围中的起始日期
约束说明
ReadOnly 与 Disabled 都会阻止变更。
- 使用原生
input[type="date"],具体样式依赖浏览器。
行为说明
- 选择日期会触发
ValueChanged。
Min / Max 会约束可选范围。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Value |
DateTime? |
null |
当前选中的日期。 |
| Implemented |
Label |
string? |
null |
顶部标签文本。 |
| Implemented |
Placeholder |
string? |
null |
占位文案。 |
| Implemented |
Min |
DateTime? |
null |
允许选择的最小日期。 |
| Implemented |
Max |
DateTime? |
null |
允许选择的最大日期。 |
| Implemented |
ReadOnly |
bool |
false |
是否为只读状态。 |
| Implemented |
Autofocus |
bool |
false |
页面加载时自动获取焦点。 |
| Implemented |
AccessKey |
string? |
null |
快捷键。 |
| Implemented |
TabIndex |
int? |
null |
Tab 顺序。 |
| Implemented |
AriaLabel |
string? |
null |
辅助功能:aria-label。 |
| Implemented |
Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented |
Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented |
Disabled (继承) |
bool |
false |
是否禁用交互。 |
| Not Implemented |
Loading (继承) |
bool |
false |
加载状态(未应用)。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
ValueChanged |
EventCallback<DateTime?> |
日期改变时触发。 |
示例
<SxDatePicker @bind-Value="_date" Label="日期" />
参考设计 (References)