syncfusion-wpf-datepicker

Q: How do I install syncfusion-wpf-datepicker?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-datepicker in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-datepicker/ (personal) or .claude/skills/syncfusion-wpf-datepicker/ (project).

by syncfusionFrontend & Design

Implements the Syncfusion WPF DatePicker (SfDatePicker) control for touch-friendly date selection. Use this when adding date input controls, customizing date picker appearance, formatting date displays, or restricting date ranges in WPF applications. Covers installation, date formatting, styling, customization, value management, and event handling.

Installs: 155
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-datepicker

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-wpf-datepicker automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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

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

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

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

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

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

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

Quick Start

Basic DatePicker in 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#

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

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

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

Pattern 2: Restrict Date Range

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

Pattern 3: Allow Null with Watermark

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

Pattern 4: Inline Editing with Validation

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

Pattern 5: Custom Styling with Colors

<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

FAQ

What does the syncfusion-wpf-datepicker skill do?

How do I install syncfusion-wpf-datepicker?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-datepicker in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-datepicker/ (personal) or .claude/skills/syncfusion-wpf-datepicker/ (project).

Which AI agents can use syncfusion-wpf-datepicker?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-wpf-datepicker safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-wpf-datepicker?

It is published by syncfusion in syncfusion/wpf-ui-components-skills. It has 155 recorded installs.