WinUI DatePicker (SfDatePicker)

When to Use This Skill

• Add date input controls to WinUI desktop applications
• Implement date pickers with dropdown calendar spinners
• Restrict date selection to specific ranges or block certain dates
• Support multiple calendar systems (Hebrew, Hijri, Persian, etc.)
• Customize date display and edit formats
• Implement localized date pickers with RTL support
• Create touch-friendly date selection interfaces
• Validate date input with custom rules
• Customize dropdown appearance and behavior
• Handle date selection events and validation

Component Overview

• Touch-friendly dropdown date spinner interface
• Multiple date format support (display and edit formats)
• Date range restrictions (MinDate, MaxDate)
• Blackout dates for blocking specific dates
• Multiple calendar types (Gregorian, Hebrew, Hijri, Persian, etc.)
• Localization and RTL support
• Mask and free-form editing modes
• Customizable dropdown UI and spinner cells
• Built-in validation and watermark text
• XAML and C# configuration support

Syncfusion.Editors.WinUI

Syncfusion.UI.Xaml.Editors

SfDatePicker

Documentation and Navigation Guide

Getting Started

• Installing Syncfusion.Editors.WinUI package
• Adding SfDatePicker to XAML and C# code
• Setting and getting selected date (SelectedDate property)
• Interactive date selection from dropdown
• Enabling null values (AllowNull property)
• Adding placeholder text (watermark)
• Configuring header and description
• Customizing header template
• Handling date changed events (SelectedDateChanged)

Date Restriction

• Setting minimum and maximum date ranges (MinDate, MaxDate)
• Blocking specific dates with BlackoutDates collection
• Dynamically disabling dates (DateFieldItemPrepared event)
• Blocking weekend dates programmatically
• Hiding submit buttons for immediate selection
• Canceling date changes (SelectedDateChanging event)
• Date validation patterns and error handling

Localization and Formatting

• Changing calendar type (CalendarIdentifier: Hebrew, Hijri, Persian, etc.)
• Setting flow direction for RTL languages
• Localizing with Language property
• Customizing display format (DisplayDateFormat)
• Formatting day, month, year fields (DayFormat, MonthFormat, YearFormat)
• Mask editing mode with auto-correction
• Free-form editing mode (EditMode)
• Showing/hiding clear button (ShowClearButton)

Dropdown Customization

• Customizing dropdown button UI (DropDownButtonTemplate)
• Hiding dropdown button (ShowDropDownButton)
• Changing dropdown alignment (DropDownPlacement)
• Opening dropdown programmatically (IsOpen property)
• Setting dropdown height (DropDownHeight)
• Controlling visible items count (VisibleItemsCount)

Dropdown Header Customization

• Adding hints in dropdown header (DropDownHeader)
• Showing/hiding dropdown header (ShowDropDownHeader)
• Customizing header UI (DropDownHeaderTemplate)
• Hiding column headers (ShowColumnHeaders)
• Header layout patterns

Spinner Customization

• Setting cell dimensions (ItemWidth, ItemHeight)
• Restricting cell width (MinItemWidth, MaxItemWidth)
• Styling spinner cells (ItemContainerStyle)
• Custom cell templates (ItemTemplate)
• Conditional cell appearance (ItemTemplateSelector)
• Customizing columns (DateFieldPrepared event)
• Formatting individual date fields
• Enabling date looping in spinner

Quick Start Example

Basic DatePicker Setup

<Window
    x:Class="DatePickerDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    
    <Grid>
        <editors:SfDatePicker 
            x:Name="datePicker"
            Header="Select Date"
            PlaceholderText="Choose a date"
            SelectedDate="2026-03-22"
            Width="250" 
            Height="75" />
    </Grid>
</Window>

using Syncfusion.UI.Xaml.Editors;

namespace DatePickerDemo
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Creating an instance of the Date Picker control
            SfDatePicker sfDatePicker = new SfDatePicker();
            this.Content = sfDatePicker;
        }
    }
}

Common Patterns

Pattern 1: Date Range Restriction

<editors:SfDatePicker 
    x:Name="datePicker"
    MinDate="2026-01-01"
    MaxDate="2026-12-31"
    Header="Select date within 2026" />

Pattern 2: Blocking Specific Dates

// In ViewModel or code-behind
public DateTimeOffsetCollection BlockedDates { get; set; }

public void InitializeBlockedDates()
{
    BlockedDates = new DateTimeOffsetCollection();
    BlockedDates.Add(new DateTimeOffset(new DateTime(2026, 12, 25))); // Christmas
    BlockedDates.Add(new DateTimeOffset(new DateTime(2026, 1, 1)));   // New Year
}

<editors:SfDatePicker 
    BlackoutDates="{Binding BlockedDates}" />

Pattern 3: Custom Date Format

<editors:SfDatePicker 
    DisplayDateFormat="MMMM dd, yyyy"
    DayFormat="{}{day.integer}"
    MonthFormat="{}{month.full}"
    YearFormat="{}{year.full}" />

Pattern 4: Localized DatePicker with Calendar Type

<editors:SfDatePicker 
    CalendarIdentifier="HebrewCalendar"
    Language="he-IL"
    FlowDirection="RightToLeft" />

Pattern 5: Null Value Support

<editors:SfDatePicker 
    AllowNull="True"
    SelectedDate="{x:Null}"
    PlaceholderText="Select a date" />

Pattern 6: Immediate Selection (No Submit Button)

<editors:SfDatePicker 
    ShowSubmitButtons="False" />

Key Properties Reference

Date Selection

SelectedDate

DateTimeOffset?

AllowNull

bool

Date Restriction

MinDate

DateTimeOffset

MaxDate

DateTimeOffset

BlackoutDates

DateTimeOffsetCollection

Formatting

DisplayDateFormat

string

DayFormat

string

MonthFormat

string

YearFormat

string

Localization

CalendarIdentifier

string

Language

string

Dropdown Configuration

DropDownHeader

object

ShowDropDownHeader

bool

ShowColumnHeaders

bool

ShowDropDownButton

bool

IsOpen

bool

DropDownHeight

double

VisibleItemsCount

int

Spinner Item Sizing

ItemWidth

double

ItemHeight

double

MinItemWidth

double

MaxItemWidth

double

UI Customization

PlaceholderText

string

Header

object

Description

object

ItemTemplate

DataTemplate

ItemTemplateSelector

DataTemplateSelector

ItemContainerStyle

Style

ShowClearButton

bool

ShowSubmitButtons

bool

Editing

EditMode

DateTimeEditMode

Events

SelectedDateChanged

SelectedDateChanging

DateFieldItemPrepared

DateFieldPrepared

Common Use Cases

Use Case 1: Appointment Scheduler

// Block weekends and restrict to business days
datePicker.DateFieldItemPrepared += (s, e) =>
{
    if (e.ItemInfo.DateTime.Value.DayOfWeek == DayOfWeek.Saturday ||
        e.ItemInfo.DateTime.Value.DayOfWeek == DayOfWeek.Sunday)
    {
        e.ItemInfo.IsEnabled = false;
    }
};

Use Case 2: Booking System

// Mark booked dates as unavailable
var bookedDates = GetBookedDatesFromDatabase();
datePicker.BlackoutDates = new DateTimeOffsetCollection();
foreach (var date in bookedDates)
{
    datePicker.BlackoutDates.Add(new DateTimeOffset(date));
}

Use Case 3: Birth Date Entry

<editors:SfDatePicker 
    Header="Date of Birth"
    MaxDate="{x:Bind CurrentDate}"
    MinDate="1920-01-01"
    DisplayDateFormat="MMMM dd, yyyy" />

Use Case 4: Multi-Language Application

// Set based on user's locale
datePicker.Language = currentUser.PreferredLanguage;
datePicker.CalendarIdentifier = currentUser.CalendarType;

Use Case 5: Custom Branded UI

<editors:SfDatePicker>
    <editors:SfDatePicker.DropDownButtonTemplate>
        <DataTemplate>
            <FontIcon Glyph="&#xE787;" Foreground="Blue" />
        </DataTemplate>
    </editors:SfDatePicker.DropDownButtonTemplate>
</editors:SfDatePicker>

Additional Resources

• NuGet Package: Syncfusion.Editors.WinUI
• Official Documentation: WinUI DatePicker Docs
• GitHub Examples: SyncfusionExamples/syncfusion-winui-tools-datepicker-examples