Implementing Date Time Pickers

A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI DateTimePicker (SfDateTimePicker) control. This component provides a flexible way to select dates, times, or both with extensive customization options.

When to Use This Skill

Use this skill when you need to:

• Add date and time selection to .NET MAUI apps
• Implement appointment or booking systems
• Create scheduling interfaces with time slots
• Build forms requiring datetime input
• Add calendar pickers with time selection
• Implement date range restrictions
• Customize picker appearance (headers, footers, themes)
• Handle selection events and data binding
• Support multiple date/time formats
• Localize picker labels and buttons
• Implement accessible datetime selection

Component Overview

The SfDateTimePicker is a versatile picker control that allows users to select:

• Dates only - Pick day, month, and year
• Times only - Pick hours, minutes, and seconds
• Date and Time - Combined selection
• Formatted display - 18 date formats and 9 time formats
• Multiple display modes - Inline, Dialog, or Relative Dialog
• Date restrictions - Min/max dates and blackout times
• Custom intervals - Skip days, months, hours, minutes
• Full customization - Headers, footers, columns, selection views
• Localization - Multi-language support

Documentation and Navigation Guide

Getting Started & Installation

📄 Read: references/getting-started.md

• Installing Syncfusion.Maui.Toolkit NuGet package
• Registering handler in MauiProgram.cs
• Basic DateTimePicker implementation (XAML & C#)
• Running your first application
• Minimal working examples

Date and Time Formatting

📄 Read: references/formatting.md

• 18 predefined date formats (dd_MM_yyyy, yyyy_MM_dd, MMM_dd_yyyy, etc.)
• 9 predefined time formats (h_mm_tt, HH_mm_ss, hh_mm_ss_tt, etc.)
• Setting DateFormat and TimeFormat properties
• Custom format configurations
• Format selection best practices
• Display format examples

Picker Modes and Display

📄 Read: references/picker-modes.md

• Default mode (inline display)
• Dialog mode (popup with overlay)
• RelativeDialog mode (positioned popup)
• IsOpen property for programmatic control
• 8 RelativePosition options (AlignTop, AlignBottom, AlignTopLeft, etc.)
• Mode selection guidance by use case
• Opening picker programmatically

Customization

📄 Read: references/customization.md

• Header customization (text, divider color, templates)
• HeaderTemplate and HeaderTemplateSelector
• Column header styling
• Footer customization (OK/Cancel buttons, text, visibility)
• Selection view appearance
• Background colors and text styles
• DataTemplate and DataTemplateSelector examples
• Advanced theming

Date Restrictions

📄 Read: references/date-restriction.md

• MinimumDate property (lower bound restrictions)
• MaximumDate property (upper bound restrictions)
• BlackoutDateTimes (blocking specific dates and times)
• Validation rules
• Use cases (holidays, unavailable periods, business hours)
• Restriction patterns and best practices

Intervals

📄 Read: references/intervals.md

• Date intervals (DayInterval, MonthInterval, YearInterval)
• Time intervals (HourInterval, MinuteInterval, SecondInterval, MilliSecondInterval)
• Combining multiple intervals
• Skip patterns for appointment booking
• Time slot configurations (15 min, 30 min intervals)
• Use cases and examples

Events

📄 Read: references/events.md

• SelectionChanged event (NewValue, OldValue)
• Immediate vs confirmed selection (IsSelectionImmediate)
• Dialog mode events (Opened, Closing, Closed)
• Canceling selection in Closing event
• Event handling patterns
• Data binding with events
• MVVM integration

Localization

📄 Read: references/localization.md

• Localizable strings (Day, Month, Year, Hour, Minute, Second, OK, Cancel)
• Setting CurrentUICulture
• Creating resource files (.resx)
• Adding translations for multiple languages
• Resource file structure and naming
• French, Spanish, and other language examples
• Best practices for multi-language apps

Accessibility

📄 Read: references/accessibility.md

• WCAG compliance features
• Keyboard navigation support
• Screen reader compatibility
• Semantic properties and AutomationId
• Focus management
• Accessible date/time selection
• Testing accessibility