SxDateRangePicker (日期范围选择)
NextUI 扩展组件。提供两个日期选择器的联动,用于选择起止时间。
使用场景
- 过滤或查询的起止日期
- 报表周期选择
- 任务或活动有效期配置
约束说明
Disabled 为真时,开始与结束日期不可编辑。
- 组件内部通过两个
SxDatePicker 组合实现。
行为说明
- 修改开始/结束日期会触发对应的
StartValueChanged / EndValueChanged。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
StartValue |
DateTime? |
null |
起始日期值(支持双向绑定)。 |
| Implemented |
EndValue |
DateTime? |
null |
结束日期值(支持双向绑定)。 |
| Implemented |
Label |
string? |
null |
顶部标签文字。 |
| Implemented |
Disabled |
bool |
false |
是否整体禁用。 |
| Implemented |
Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented |
Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
StartValueChanged |
EventCallback<DateTime?> |
起始日期改变时触发。 |
| Implemented |
EndValueChanged |
EventCallback<DateTime?> |
结束日期改变时触发。 |
示例
<SxDateRangePicker @bind-StartValue="_start"
@bind-EndValue="_end"
Label="有效期" />
参考设计 (References)