syncfusion-wpf-datepicker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF DatePicker (SfDatePicker)

实现Syncfusion WPF DatePicker (SfDatePicker)

The SfDatePicker control allows users to select date values in a touch-friendly manner with a customizable dropdown date selector. This skill covers everything from basic setup to advanced customization and styling.

SfDatePicker控件允许用户通过可自定义的下拉日期选择器，以触控友好的方式选择日期值。本内容涵盖从基础设置到高级自定义和样式设置的所有内容。

When to Use This Skill

何时使用本技能

Basic date selection – Add a DatePicker control to your WPF application
Date formatting – Display dates in various formats (short date, long date, month-only, etc.)
Customizing the date selector – Modify cell templates, sizes, and spacing of the dropdown selector
Styling and appearance – Change colors, backgrounds, themes, and flow direction (RTL support)
Managing date values – Set, validate, and restrict date ranges; handle date change events
Advanced interactions – Inline editing, watermarks, focus-based updates, keyboard input
User-friendly UX – Implement null values, watermark text, and on-screen keyboard support

基础日期选择 – 在WPF应用中添加DatePicker控件
日期格式化 – 以多种格式显示日期（短日期、长日期、仅月份等）
自定义日期选择器 – 修改下拉选择器的单元格模板、大小和间距
外观与样式设置 – 更改颜色、背景、主题以及流向（支持RTL）
值与日期管理 – 设置、验证和限制日期范围；处理日期变更事件
高级交互 – 内联编辑、水印、基于焦点的更新、键盘输入
用户友好的UX – 实现空值、水印文本和屏幕键盘支持

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet installation and assembly references
Adding the control via Designer, XAML, or C# code
Setting initial date values
Handling date change events (ValueChanged)
Basic setup and initialization

📄 阅读： references/getting-started.md

NuGet安装和程序集引用
通过设计器、XAML或C#代码添加控件
设置初始日期值
处理日期变更事件（ValueChanged）
基础设置与初始化

Date Formatting

日期格式化

📄 Read: references/date-formatting.md

Display formatting using FormatString property
Selector formatting using SelectorFormatString
Common format specifiers and examples
Date display in various formats

📄 阅读： references/date-formatting.md

使用FormatString属性设置显示格式
使用SelectorFormatString设置选择器格式
常用格式说明符及示例
多种格式的日期显示

Date Selector Customization

日期选择器自定义

📄 Read: references/date-selector-customization.md

Understanding SfDateSelector structure
Customizing cell templates (day, month, year)
Adjusting cell sizes and spacing
Style-based customization
Visual template examples

📄 阅读： references/date-selector-customization.md

了解SfDateSelector结构
自定义单元格模板（日、月、年）
调整单元格大小和间距
基于样式的自定义
可视化模板示例

Appearance and Styling

外观与样式设置

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

Changing foreground and background colors
Accent colors and selected item styling
Right-to-left (RTL) flow direction
Built-in themes (SfSkinManager, ThemeStudio)
Watermark text and templates

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

更改前景色和背景色
强调色和选中项样式
从右到左（RTL）流向
内置主题（SfSkinManager、ThemeStudio）
水印文本和模板

Value and Date Management

值与日期管理

📄 Read: references/value-and-date-management.md

Setting date values programmatically
Handling null values
Watermark and placeholder text
Inline editing and keyboard input
Min/Max date range restrictions
Focus-based value updates

📄 阅读： references/value-and-date-management.md

以编程方式设置日期值
处理空值
水印和占位符文本
内联编辑和键盘输入
最小/最大日期范围限制
基于焦点的值更新

Features and Interaction

功能与交互

📄 Read: references/features-and-interaction.md

Inline editing mode
On-screen keyboard input scope
Date range validation
Localization support
Common workflows and best practices

📄 阅读： references/features-and-interaction.md

内联编辑模式
屏幕键盘输入范围
日期范围验证
本地化支持
常见工作流与最佳实践

Quick Start

快速开始

Basic DatePicker in XAML

XAML中的基础DatePicker

xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="DatePicker Sample">
    <Grid>
        <syncfusion:SfDatePicker x:Name="sfDatePicker" 
                                 Width="200"
                                 Value="3/19/2026"/>
    </Grid>
</Window>

xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="DatePicker Sample">
    <Grid>
        <syncfusion:SfDatePicker x:Name="sfDatePicker" 
                                 Width="200"
                                 Value="3/19/2026"/>
    </Grid>
</Window>

Basic DatePicker in C#

C#中的基础DatePicker

csharp

using Syncfusion.Windows.Controls.Input;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.Value = new DateTime(2026, 3, 19);
sfDatePicker.Width = 200;
this.Content = sfDatePicker;

csharp

using Syncfusion.Windows.Controls.Input;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.Value = new DateTime(2026, 3, 19);
sfDatePicker.Width = 200;
this.Content = sfDatePicker;

Handle Date Selection

处理日期选择

csharp

sfDatePicker.ValueChanged += (d, e) => 
{
    DateTime oldDate = (DateTime)e.OldValue;
    DateTime newDate = (DateTime)e.NewValue;
    Console.WriteLine($"Date changed from {oldDate:d} to {newDate:d}");
};

csharp

sfDatePicker.ValueChanged += (d, e) => 
{
    DateTime oldDate = (DateTime)e.OldValue;
    DateTime newDate = (DateTime)e.NewValue;
    Console.WriteLine($"Date changed from {oldDate:d} to {newDate:d}");
};

Common Patterns

常见模式

Pattern 1: Set Date Format

模式1：设置日期格式

xaml

<!-- Display as month only -->
<syncfusion:SfDatePicker FormatString="M" x:Name="sfDatePicker"/>

xaml

<!-- Display as month only -->
<syncfusion:SfDatePicker FormatString="M" x:Name="sfDatePicker"/>

Pattern 2: Restrict Date Range

模式2：限制日期范围

csharp

sfDatePicker.MinDate = new DateTime(2026, 1, 1);
sfDatePicker.MaxDate = new DateTime(2026, 12, 31);

csharp

sfDatePicker.MinDate = new DateTime(2026, 1, 1);
sfDatePicker.MaxDate = new DateTime(2026, 12, 31);

Pattern 3: Allow Null with Watermark

模式3：允许空值并设置水印

xaml

<syncfusion:SfDatePicker AllowNull="True" 
                         Value="{x:Null}"
                         Watermark="Select a date"
                         x:Name="sfDatePicker"/>

xaml

<syncfusion:SfDatePicker AllowNull="True" 
                         Value="{x:Null}"
                         Watermark="Select a date"
                         x:Name="sfDatePicker"/>

Pattern 4: Inline Editing with Validation

模式4：带验证的内联编辑

xaml

<syncfusion:SfDatePicker AllowInlineEditing="True" 
                         InputScope="Number"
                         x:Name="sfDatePicker"/>

xaml

<syncfusion:SfDatePicker AllowInlineEditing="True" 
                         InputScope="Number"
                         x:Name="sfDatePicker"/>

Pattern 5: Custom Styling with Colors

模式5：自定义颜色样式

xaml

<syncfusion:SfDatePicker Foreground="Blue"
                         Background="LightGray"
                         AccentBrush="Green"
                         x:Name="sfDatePicker"/>

xaml

<syncfusion:SfDatePicker Foreground="Blue"
                         Background="LightGray"
                         AccentBrush="Green"
                         x:Name="sfDatePicker"/>

Key Properties Reference

关键属性参考

Property	Type	Default	Purpose
Value	DateTime?	Current date	Selected date
FormatString	string	"d"	Display date format
SelectorFormatString	string	"M/d/yyyy"	Dropdown selector format
AllowNull	bool	false	Allow null values
Watermark	string	null	Placeholder text
MinDate	DateTime	Min value	Earliest selectable date
MaxDate	DateTime	Max value	Latest selectable date
AllowInlineEditing	bool	false	Enable inline date editing
ShowDropDownButton	bool	true	Show/hide dropdown button
DropDownHeight	double	Auto	Height of dropdown popup
Foreground	Brush	Black	Text color
Background	Brush	White	Control background
AccentBrush	Brush	Blue	Selected item highlight

属性	类型	默认值	用途
Value	DateTime?	当前日期	选中的日期
FormatString	string	"d"	日期显示格式
SelectorFormatString	string	"M/d/yyyy"	下拉选择器格式
AllowNull	bool	false	是否允许空值
Watermark	string	null	占位符文本
MinDate	DateTime	最小值	可选择的最早日期
MaxDate	DateTime	最大值	可选择的最晚日期
AllowInlineEditing	bool	false	是否启用内联日期编辑
ShowDropDownButton	bool	true	是否显示下拉按钮
DropDownHeight	double	Auto	下拉弹窗高度
Foreground	Brush	Black	文本颜色
Background	Brush	White	控件背景色
AccentBrush	Brush	Blue	选中项高亮色