syncfusion-aspnetcore-datepicker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing DatePicker in ASP.NET Core

在ASP.NET Core中实现DatePicker

The DatePicker is a graphical user interface control that allows users to select or enter a date value with advanced features like date range constraints, custom formatting, popup calendar, keyboard navigation, event handling, and globalization support. This skill guides you through implementing DatePicker in ASP.NET Core applications using Syncfusion's Tag Helper syntax.

DatePicker是一种图形用户界面控件，允许用户选择或输入日期值，具备日期范围约束、自定义格式化、弹出日历、键盘导航、事件处理和全球化支持等高级功能。本指南将引导你使用Syncfusion的Tag Helper语法在ASP.NET Core应用中实现DatePicker。

When to Use This Skill

何时使用本指南

Use this skill when you need to:

Create date input fields with calendar popup selection
Implement date range constraints (min/max dates)
Support custom date format patterns (yyyy-MM-dd, dd/MM/yyyy, etc.)
Accept user input in multiple date formats
Validate dates with strict mode enforcement
Respond to date selection and interaction events
Display dates in culture-specific formats
Support right-to-left languages (Arabic, Hebrew, Persian)
Style and customize the date picker appearance
Integrate DatePicker with ASP.NET Core model binding
Build booking systems, appointment schedulers, or registration forms
Implement accessible forms following WCAG 2.2 Level AA standards

当你需要完成以下需求时可使用本指南：

创建带日历弹窗选择功能的日期输入字段
实现日期范围约束（最小/最大日期）
支持自定义日期格式模式（yyyy-MM-dd、dd/MM/yyyy等）
接受多种日期格式的用户输入
通过严格模式强制执行日期验证
响应日期选择和交互事件
以特定文化格式显示日期
支持从右到左书写的语言（阿拉伯语、希伯来语、波斯语）
调整和自定义日期选择器的外观样式
将DatePicker与ASP.NET Core模型绑定集成
构建预订系统、预约调度器或注册表单
实现符合WCAG 2.2 Level AA标准的可访问表单

Key Features

核心功能

Feature	Use Case
Popup Calendar	Visual date selection with month/year navigation
Date Range	Min/max constraints with automatic validation
Custom Formats	Display dates as yyyy-MM-dd, dd/MM/yyyy, MM/dd/yyyy, etc.
Input Formats	Accept multiple input patterns for user entry flexibility
Strict Mode	Enforce strict date validation and restrict invalid entries
Keyboard Navigation	Arrow keys, Enter, Tab, Escape for accessibility
Events	Created, Change, Blur, Focus, Open, Close event handlers
Model Binding	Two-way binding with ASP.NET Core DateTime properties
Globalization	Support 150+ culture-specific date formats
Localization	Translate popup placeholders and button text
RTL Support	Right-to-left text direction for Arabic, Hebrew, Persian
Styling	CSS customization with theme integration (Fluent, Bootstrap)
Readonly State	Display-only mode without user interaction
Disabled State	Disable specific dates or entire date picker

功能	适用场景
弹出日历	带月份/年份导航的可视化日期选择
日期范围	带自动验证的最小/最大日期约束
自定义格式	以yyyy-MM-dd、dd/MM/yyyy、MM/dd/yyyy等格式显示日期
输入格式	接受多种输入模式，提升用户输入灵活性
严格模式	强制执行严格的日期验证，限制无效输入
键盘导航	支持方向键、Enter、Tab、Escape键，提升可访问性
事件	Created、Change、Blur、Focus、Open、Close事件处理程序
模型绑定	与ASP.NET Core DateTime属性的双向绑定
全球化	支持150+种特定文化的日期格式
本地化	翻译弹窗占位符和按钮文本
RTL支持	适配阿拉伯语、希伯来语、波斯语的从右到左文本方向
样式设置	支持CSS自定义与主题集成（Fluent、Bootstrap）
只读状态	仅展示模式，不允许用户交互
禁用状态	禁用特定日期或整个日期选择器

Documentation Navigation Guide

文档导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Prerequisites and system requirements
Installing Syncfusion.EJ2.AspNet.Core NuGet package
Adding Tag Helpers to _ViewImports.cshtml
Adding stylesheets and script resources via CDN
Registering the script manager
Creating your first DatePicker with Tag Helper
Binding to ASP.NET Core DateTime models
Tag Helper attributes and syntax reference

📄 阅读： references/getting-started.md

前置条件与系统要求
安装Syncfusion.EJ2.AspNet.Core NuGet包
向_ViewImports.cshtml添加Tag Helpers
通过CDN添加样式表和脚本资源
注册脚本管理器
使用Tag Helper创建你的第一个DatePicker
绑定到ASP.NET Core DateTime模型
Tag Helper属性与语法参考

Date Formats and Parsing

日期格式与解析

📄 Read: references/date-formats-and-parsing.md

Standard date format patterns (yyyy-MM-dd, dd/MM/yyyy)
Custom date format string construction
Input format acceptance patterns for flexible entry
Locale-specific date parsing and display
Format conversion examples with real-world patterns
Edge cases: month boundaries, leap years, DST
Date validation and error handling

📄 阅读： references/date-formats-and-parsing.md

标准日期格式模式（yyyy-MM-dd、dd/MM/yyyy）
自定义日期格式字符串构建
适配灵活输入的输入格式接受模式
特定区域的日期解析与显示
真实场景下的格式转换示例
边界情况：月份边界、闰年、夏令时
日期验证与错误处理

Date Ranges and Validation

日期范围与验证

📄 Read: references/date-ranges-and-validation.md

Setting minimum and maximum date constraints
Range validation with automatic boundary checking
Disabling specific dates or date ranges
Strict mode enforcement and validation behavior
Out-of-range date handling
Real-world validation patterns (birth date, appointment booking, contract dates)
Edge cases and boundary conditions

📄 阅读： references/date-ranges-and-validation.md

设置最小和最大日期约束
带自动边界检查的范围验证
禁用特定日期或日期范围
严格模式执行与验证行为
超范围日期处理
真实场景验证模式（出生日期、预约预订、合同日期）
边界情况与边界条件

Events and Interactions

事件与交互

📄 Read: references/events-and-interactions.md

Created event initialization and setup
Change event for date selection handling
Blur and Focus events for input state
Popup Open and Close events
Preventing popup close on date selection
Event handler parameters and data
Custom interaction patterns and workflows

📄 阅读： references/events-and-interactions.md

Created事件初始化与设置
用于日期选择处理的Change事件
对应输入状态的Blur和Focus事件
弹窗Open和Close事件
禁止选择日期后自动关闭弹窗
事件处理程序参数与数据
自定义交互模式与工作流

Globalization and Localization

全球化与本地化

📄 Read: references/globalization-localization.md

Culture-specific date formatting (en-US, de-DE, fr-FR, etc.)
CLDR data and locale configuration
RTL (right-to-left) language support
Multiple language date display
Regional calendar considerations
Timezone handling and date conversion
Dynamic culture switching in applications

📄 阅读： references/globalization-localization.md

特定文化的日期格式化（en-US、de-DE、fr-FR等）
CLDR数据与区域配置
RTL（从右到左）语言支持
多语言日期显示
区域日历注意事项
时区处理与日期转换
应用内动态文化切换

Styling and Appearance

样式与外观

📄 Read: references/styling-and-appearance.md

CSS class customization and styling patterns
Theme integration (Fluent, Bootstrap, Material, Tailwind)
Readonly and disabled state styling
Placeholder and label customization
Responsive popup positioning
Custom CSS classes for validation states
Accessibility and focus indicator styling

📄 阅读： references/styling-and-appearance.md

CSS类自定义与样式模式
主题集成（Fluent、Bootstrap、Material、Tailwind）
只读与禁用状态样式
占位符与标签自定义
响应式弹窗定位
适配验证状态的自定义CSS类
可访问性与焦点指示器样式

Quick Start Example

快速入门示例

ASP.NET Core Tag Helper Syntax:

csharp

// In your Razor Page or Controller View
public class BookingModel : PageModel
{
    [BindProperty]
    public DateTime AppointmentDate { get; set; }
    
    [BindProperty]
    public DateTime StartDate { get; set; }
    
    public void OnPost()
    {
        // Handle form submission with AppointmentDate
    }
}

html

<!-- In your Razor Page (.cshtml) -->
<form method="post">
    <!-- Basic DatePicker with default format -->
    <label>Select Appointment Date:</label>
    <ejs-datepicker asp-for="AppointmentDate" 
                     placeholder="Choose a date">
    </ejs-datepicker>
    
    <!-- DatePicker with date range (today to 30 days ahead) -->
    <label>Select Travel Start Date:</label>
    <ejs-datepicker id="startDatePicker"
                     asp-for="StartDate" 
                     min="@DateTime.Today" 
                     max="@DateTime.Today.AddDays(30)"
                     format="yyyy-MM-dd"
                     placeholder="mm/dd/yyyy">
    </ejs-datepicker>
    
    <button type="submit" class="e-btn">Book Appointment</button>
</form>

ASP.NET Core Tag Helper语法：

csharp

// 在你的Razor页面或控制器视图中
public class BookingModel : PageModel
{
    [BindProperty]
    public DateTime AppointmentDate { get; set; }
    
    [BindProperty]
    public DateTime StartDate { get; set; }
    
    public void OnPost()
    {
        // 处理携带AppointmentDate的表单提交
    }
}

html

<!-- 在你的Razor页面(.cshtml)中 -->
<form method="post">
    <!-- 带默认格式的基础DatePicker -->
    <label>选择预约日期：</label>
    <ejs-datepicker asp-for="AppointmentDate" 
                     placeholder="选择日期">
    </ejs-datepicker>
    
    <!-- 带日期范围的DatePicker（今天到未来30天） -->
    <label>选择行程开始日期：</label>
    <ejs-datepicker id="startDatePicker"
                     asp-for="StartDate" 
                     min="@DateTime.Today" 
                     max="@DateTime.Today.AddDays(30)"
                     format="yyyy-MM-dd"
                     placeholder="mm/dd/yyyy">
    </ejs-datepicker>
    
    <button type="submit" class="e-btn">预约提交</button>
</form>

Common Patterns

常用模式

Pattern 1: Date Range Selection (Birth Date)

模式1：日期范围选择（出生日期）

html

<ejs-datepicker id="birthDatePicker"
                 value="@DateTime.Today.AddYears(-25)"
                 min="@DateTime.Today.AddYears(-100)"
                 max="@DateTime.Today"
                 format="MM/dd/yyyy"
                 placeholder="MM/DD/YYYY">
</ejs-datepicker>

html

<ejs-datepicker id="birthDatePicker"
                 value="@DateTime.Today.AddYears(-25)"
                 min="@DateTime.Today.AddYears(-100)"
                 max="@DateTime.Today"
                 format="MM/dd/yyyy"
                 placeholder="MM/DD/YYYY">
</ejs-datepicker>

Pattern 2: Multi-Format Input Acceptance

模式2：多格式输入接受

html

<ejs-datepicker id="flexibleDatePicker"
                 format="yyyy-MM-dd"
                 input-formats="@new[] { 'yyyy-MM-dd', 'dd/MM/yyyy', 'MM-dd-yyyy' }"
                 placeholder="Enter date (yyyy-MM-dd or dd/MM/yyyy)">
</ejs-datepicker>

html

<ejs-datepicker id="flexibleDatePicker"
                 format="yyyy-MM-dd"
                 input-formats="@new[] { 'yyyy-MM-dd', 'dd/MM/yyyy', 'MM-dd-yyyy' }"
                 placeholder="输入日期（yyyy-MM-dd 或 dd/MM/yyyy）">
</ejs-datepicker>

Pattern 3: Event-Driven Validation

模式3：事件驱动验证

html

<ejs-datepicker id="validatedDatePicker"
                 change="onDateChange"
                 placeholder="Select date">
</ejs-datepicker>

<script>
function onDateChange(args) {
    if (args.value) {
        console.log('Selected Date:', args.value);
    }
}
</script>

html

<ejs-datepicker id="validatedDatePicker"
                 change="onDateChange"
                 placeholder="选择日期">
</ejs-datepicker>

<script>
function onDateChange(args) {
    if (args.value) {
        console.log('选中的日期：', args.value);
    }
}
</script>

Pattern 4: Readonly Display Mode

模式4：只读显示模式

html

<ejs-datepicker id="readonlyPicker"
                 value="@ViewData["SubmissionDate"]"
                 readonly="true"
                 format="MMMM dd, yyyy">
</ejs-datepicker>

html

<ejs-datepicker id="readonlyPicker"
                 value="@ViewData["SubmissionDate"]"
                 readonly="true"
                 format="MMMM dd, yyyy">
</ejs-datepicker>

Key Properties and Attributes

核心属性与特性

Property	Type	Description
`asp-for`	string	Binds to ASP.NET Core model property (DateTime)
`value`	DateTime	Initial selected date
`min`	DateTime	Minimum selectable date
`max`	DateTime	Maximum selectable date
`format`	string	Display date format pattern
`input-formats`	string[]	Accepted input format patterns
`placeholder`	string	Input placeholder text
`readonly`	bool	Disables date editing
`enabled`	bool	Enable/disable the component
`strict-mode`	bool	Enforce strict date validation
`start-view`	string	Initial calendar view (Month, Year, Decade)

属性	类型	描述
`asp-for`	string	绑定到ASP.NET Core模型属性（DateTime类型）
`value`	DateTime	初始选中日期
`min`	DateTime	最小可选日期
`max`	DateTime	最大可选日期
`format`	string	显示日期格式模式
`input-formats`	string[]	可接受的输入格式模式
`placeholder`	string	输入框占位符文本
`readonly`	bool	禁用日期编辑
`enabled`	bool	启用/禁用组件
`strict-mode`	bool	强制执行严格日期验证
`start-view`	string	初始日历视图（月、年、十年）

Platform-Specific Notes

平台特定说明

ASP.NET Core Tag Helper Syntax

ASP.NET Core Tag Helper语法

Use
```
asp-for
```
attribute for direct model binding (replaces
```
id
```
and
```
name
```
)
Hyphenated attributes map to C# properties (e.g.,
```
input-formats
```
→
```
InputFormats
```
)
Self-closing tags:
```
<ejs-datepicker />
```
or with content
Access via JavaScript using element ID

使用
```
asp-for
```
属性直接绑定模型（替代
```
id
```
和
```
name
```
）
连字符格式的属性映射到C#属性（例如
```
input-formats
```
→
```
InputFormats
```
）
自闭合标签：
```
<ejs-datepicker />
```
或带内容的标签
可通过元素ID在JavaScript中访问

Tag Helper vs HTML Helper

Tag Helper与HTML Helper对比

Tag Helpers (newer, recommended): Razor-like syntax, intellisense support
HTML Helpers (legacy): Manual JavaScript configuration
This skill focuses on Tag Helpers for ASP.NET Core best practices

Tag Helpers（更新、推荐）：类Razor语法，支持智能提示
HTML Helpers（ legacy）：需要手动配置JavaScript
本指南聚焦于符合ASP.NET Core最佳实践的Tag Helper用法

Model Binding

模型绑定

Use
```
asp-for
```
for automatic two-way binding
DateTime properties must be nullable
```
DateTime?
```
for optional dates
Server-side validation complements client-side DatePicker validation

使用
```
asp-for
```
实现自动双向绑定
可选日期需使用可空
```
DateTime?
```
类型
服务端验证可作为客户端DatePicker验证的补充

Event Handling

事件处理

Bind events using attribute syntax:
```
change="functionName"
```
Handler function receives
```
DatePickerEventArgs
```
parameter
Both client-side (JavaScript) and server-side validation supported

使用属性语法绑定事件：
```
change="functionName"
```
处理函数接收
```
DatePickerEventArgs
```
参数
同时支持客户端（JavaScript）和服务端验证

Next Steps

后续步骤

Start with: Getting Started - Set up your first DatePicker
Configure dates: Date Formats and Parsing - Custom formatting
Add validation: Date Ranges and Validation - Min/max constraints
Handle interactions: Events and Interactions - Respond to user actions
Go global: Globalization and Localization - Multi-language support
Polish UI: Styling and Appearance - Custom themes

Last Updated: March 2026
Framework Version: Syncfusion EJ2 24.1.48+
License: SEE LICENSE IN license

从这里开始： 入门指南 - 搭建你的第一个DatePicker
配置日期： 日期格式与解析 - 自定义格式化
添加验证： 日期范围与验证 - 最小/最大约束
处理交互： 事件与交互 - 响应用户操作
全球化适配： 全球化与本地化 - 多语言支持
优化UI： 样式与外观 - 自定义主题

最后更新： 2026年3月
框架版本： Syncfusion EJ2 24.1.48+
许可证： 详见license文件中的许可说明