syncfusion-aspnetcore-timepicker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core TimePicker

The TimePicker is an intuitive input component that allows users to select a time value from a popup list or type it directly. It supports time ranges, strict mode, masking, globalization, RTL, accessibility, and rich customization options.

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

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet package installation and setup
Tag helper registration and script/style references
Basic TimePicker rendering with
```
<ejs-timepicker>
```
Setting value, min, and max time
Configuring time format and step interval
TimePickerFor model binding

📄 阅读： references/getting-started.md

NuGet包安装与设置
标签助手注册及脚本/样式引用
使用
```
<ejs-timepicker>
```
渲染基础TimePicker
设置值、最小和最大时间
配置时间格式和步长间隔
TimePickerFor模型绑定

Time Range

时间范围

📄 Read: references/time-range.md

Setting min and max time boundaries with
```
Min
```
and
```
Max
```
Behavior when value is out-of-range
Two-TimePicker range selection (start/end time)
Enabling/disabling end time based on start time selection
Business hours selection pattern

📄 阅读： references/time-range.md

使用
```
Min
```
和
```
Max
```
设置最小和最大时间边界
值超出范围时的行为
双TimePicker范围选择（开始/结束时间）
根据开始时间选择启用/禁用结束时间
营业时间选择模式

Strict Mode

严格模式

📄 Read: references/strict-mode.md

Enabling
```
StrictMode
```
to enforce valid time entry
Clamping out-of-range values to min/max
Default (non-strict) mode with error class indication
Null behavior for invalid values in non-strict mode

📄 阅读： references/strict-mode.md

启用
```
StrictMode
```
以强制输入有效时间
将超出范围的值限制在最小/最大值内
默认（非严格）模式下的错误类提示
非严格模式下无效值的空值行为

Globalization

全球化

📄 Read: references/globalization.md

Setting culture with
```
Locale
```
property
Loading CLDR data for non-English cultures
L10n placeholder localization
RTL support with
```
EnableRtl
```
for Arabic, Hebrew
German and Arabic culture examples

📄 阅读： references/globalization.md

使用
```
Locale
```
属性设置文化
为非英语文化加载CLDR数据
L10n占位符本地化
使用
```
EnableRtl
```
支持阿拉伯语、希伯来语的RTL布局
德语和阿拉伯语文化示例

Time Masking

时间掩码

📄 Read: references/time-masking.md

Enabling masked input with
```
EnableMask
```
Mask pattern based on format string
Custom mask placeholder with
```
MaskPlaceholder
```
(hour, minute, second)
Keyboard navigation within masked segments

📄 阅读： references/time-masking.md

使用
```
EnableMask
```
启用掩码输入
基于格式字符串的掩码模式
使用
```
MaskPlaceholder
```
自定义掩码占位符（小时、分钟、秒）
掩码分段内的键盘导航

Style and Appearance

样式与外观

📄 Read: references/style-appearance.md

CSS customization using
```
CssClass
```
property
Available CSS class targets (wrapper, icon, popup, list items)
Customizing input, popup button, popup list, hover/active states
Full-screen popup mode on mobile with
```
FullScreenMode
```
Wrapper height, font-size, background-color overrides

📄 阅读： references/style-appearance.md

使用
```
CssClass
```
属性进行CSS自定义
可用的CSS类目标（包装器、图标、弹窗、列表项）
自定义输入框、弹窗按钮、弹窗列表、悬停/激活状态
移动端全屏弹窗模式（
```
FullScreenMode
```
）
覆盖包装器高度、字体大小、背景颜色

Accessibility

可访问性

📄 Read: references/accessibility.md

WCAG 2.2 AA compliance details
WAI-ARIA attributes: aria-haspopup, aria-selected, aria-disabled, etc.
Full keyboard interaction table
Screen reader support
RTL, color contrast, mobile device support

📄 阅读： references/accessibility.md

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

How-To Guides

操作指南

📄 Read: references/how-to.md

Client-side form validation using FormValidator
CSS customization with custom class names
TimePickerFor rendering with model binding and form POST

📄 阅读： references/how-to.md

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

API Reference

API参考

📄 Read: references/api.md

All properties with types, defaults, and descriptions
All events (Change, Open, Close, Focus, Blur, Cleared, ItemRender, Created, Destroyed)
CSS class reference table
MaskPlaceholder sub-properties
Complete tag helper attribute syntax

📄 阅读： references/api.md

所有属性的类型、默认值和描述
所有事件（Change、Open、Close、Focus、Blur、Cleared、ItemRender、Created、Destroyed）
CSS类参考表
MaskPlaceholder子属性
完整的标签助手属性语法

Quick Start

快速开始

1. Install NuGet package:

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper in

~/Pages/_ViewImports.cshtml

cshtml

@addTagHelper *, Syncfusion.EJ2

3. Add CSS and script in

~/Pages/Shared/_Layout.cshtml

html

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

4. Add Script Manager at end of

<body>

html

<ejs-scripts></ejs-scripts>

5. Render the TimePicker:

cshtml

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

1. 安装NuGet包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在
~/Pages/_ViewImports.cshtml
中注册标签助手：

cshtml

@addTagHelper *, Syncfusion.EJ2

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

html

<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>
末尾添加脚本管理器：

html

<ejs-scripts></ejs-scripts>

5. 渲染TimePicker：

cshtml

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

Common Patterns

常见模式

TimePicker with Value, Min, and Max

带值、最小和最大时间的TimePicker

cshtml

@{
    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>

cshtml

@{
    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>

Custom Format and Step

自定义格式和步长

cshtml

@{
    var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>

cshtml

@{
    var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>

Strict Mode

严格模式

cshtml

<ejs-timepicker id="timepicker"
    value="@ViewBag.value"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-timepicker>

cshtml

<ejs-timepicker id="timepicker"
    value="@ViewBag.value"
    min="@ViewBag.minVal"
    max="@ViewBag.maxVal"
    strictMode="true">
</ejs-timepicker>

Masked Input

掩码输入

cshtml

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

cshtml

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

RTL (Right-to-Left)

RTL（从右到左）

cshtml

<ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>

cshtml

<ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>