mcpField
S
syncfusion-aspnetcore-timepicker

syncfusion-aspnetcore-timepicker

github.com/syncfusion开发044 次安装2 周前更新
代码仓库

关于 syncfusion-aspnetcore-timepicker

Syncfusion ASP.NET Core TimePicker 是用于 ASP.NET Core 的时间输入组件，支持从弹出列表选择或直接输入。它提供时间范围、严格校验、遮罩输入、本地化、RTL 和无障碍配置，适合构建时间选择表单的开发者。

主要功能

  1. 01弹出列表选择或直接输入时间
  2. 02设置最小值、最大值与步进间隔
  3. 03严格模式校验及遮罩输入
  4. 04支持本地化与 RTL
  5. 05键盘操作与屏幕阅读器支持

适用场景

  1. 01构建预约时间输入表单
  2. 02限制可选时间为营业时段
  3. 03按地区格式显示时间
  4. 04为表单提供键盘可访问输入

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-timepicker

安装后在 Claude Code 中输入/syncfusion-aspnetcore-timepicker确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
timepicker-accessibility.md
timepicker-api.md
timepicker-getting-started.md
timepicker-globalization.md
timepicker-how-to.md
timepicker-masking.md
timepicker-range.md
timepicker-strict-mode.md
timepicker-style-appearance.md

详细介绍

Syncfusion ASP.NET Core TimePicker

TimePicker 是一款直观的输入组件，允许用户从弹出列表中选择时间值，或直接输入时间。它支持时间范围、严格模式、输入掩码、本地化、RTL、无障碍功能以及丰富的自定义选项。

导航指南

入门

📄 阅读： references/getting-started.md

  • 安装和配置 NuGet 包
  • 注册 Tag Helper 并引用脚本和样式
  • 使用 <ejs-timepicker> 渲染基本的 TimePicker
  • 设置 value、min 和 max 时间
  • 配置时间格式和步进间隔
  • TimePickerFor 模型绑定
时间范围

📄 阅读： references/time-range.md

  • 使用 Min 和 Max 设置最小和最大时间边界
  • 处理超出范围的值
  • 使用两个 TimePicker 选择范围（开始/结束时间）
  • 根据开始时间选择启用或禁用结束时间
  • 营业时间选择模式
严格模式

📄 阅读： references/strict-mode.md

  • 启用 StrictMode，确保输入的时间有效
  • 将超出范围的值限制在最小值/最大值
  • 默认（非严格）模式会通过错误类进行提示
  • 非严格模式下无效值的处理方式
本地化

📄 阅读： references/globalization.md

  • 使用 Locale 属性设置区域性
  • 为非英语区域性加载 CLDR 数据
  • 本地化 L10n 占位符
  • 使用 EnableRtl 支持阿拉伯语、希伯来语的 RTL 布局
  • 德语和阿拉伯语区域性示例
时间输入掩码

📄 阅读： references/time-masking.md

  • 使用 EnableMask 启用输入掩码
  • 根据格式字符串设置掩码模式
  • 使用 MaskPlaceholder 自定义掩码占位符（小时、分钟、秒）
  • 在掩码字段间进行键盘导航
样式和外观

📄 阅读： references/style-appearance.md

  • 使用 CssClass 属性自定义 CSS
  • 可用的 CSS 类选择目标（包装器、图标、弹出窗口、列表项）
  • 自定义输入框、弹出按钮、弹出列表以及悬停/活动状态
  • 在移动设备上使用 FullScreenMode 启用全屏弹出模式
  • 覆盖包装器高度、字体大小和背景颜色
无障碍功能

📄 阅读： references/accessibility.md

  • WCAG 2.2 AA 合规性详情
  • WAI-ARIA 属性：aria-haspopup、aria-selected、aria-disabled 等
  • 完整的键盘交互表
  • 屏幕阅读器支持
  • RTL、颜色对比度和移动设备支持
操作指南

📄 阅读： references/how-to.md

  • 使用 FormValidator 进行客户端表单验证
  • 使用自定义类名自定义 CSS
  • 使用模型绑定和表单 POST 渲染 TimePickerFor
API 参考

📄 阅读： references/api.md

  • 所有属性及其类型、默认值和说明
  • 所有事件（Change、Open、Close、Focus、Blur、Cleared、ItemRender、Created、Destroyed）
  • CSS 类参考表
  • MaskPlaceholder 子属性
  • 完整的 Tag Helper 属性语法

快速开始

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染 TimePicker：

<ejs-timepicker id="timepicker"></ejs-timepicker>

常见模式

设置 Value、Min 和 Max 的 TimePicker
@{
    var minVal = new DateTime(2022, 05, 07, 1, 00, 00);
    var maxVal = new DateTime(2022, 05, 07, 11, 00, 00);
    var value  = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" value="value" min="minVal" max="maxVal"></ejs-timepicker>
自定义格式和步进
@{
    var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>
严格模式
<ejs-timepicker id="timepicker"
    value="@ViewBag.value"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-timepicker>
带掩码的输入
<ejs-timepicker id="timepicker" enableMask="true"></ejs-timepicker>
RTL（从右到左）
<ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>

评论

支持 Markdown