syncfusion-aspnetcore-datepicker（同步融合 aspnetcore 日期选择器）

Implementing DatePicker in ASP.NET Core

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.

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

Key Features

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

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

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

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

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

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

Quick Start Example

ASP.NET Core Tag Helper Syntax:

// 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
    }
}

<!-- 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>

Common Patterns

Pattern 1: Date Range Selection (Birth Date)

<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

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

Pattern 3: Event-Driven Validation

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

Pattern 4: Readonly Display Mode

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

Key Properties and Attributes

Platform-Specific Notes

ASP.NET Core Tag Helper Syntax

• 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

Tag Helper vs 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

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

Event Handling

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

Next Steps

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

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