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
1---2name: syncfusion-maui-toolkit-date-time-picker3description: Implements Syncfusion .NET MAUI DateTimePicker (SfDateTimePicker) control. Use when implementing date and time selection, datetime pickers, or date-time input interfaces in .NET MAUI applications. Covers DateTimePicker setup, formatting dates/times, picker modes (dialog/relative), customization, date restrictions, intervals, events, localization, and accessibility.4---5
6# Implementing Date Time Pickers
7
8A 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.
9
10## When to Use This Skill
11
12Use this skill when you need to:
13- Add date and time selection to .NET MAUI apps
14- Implement appointment or booking systems
15- Create scheduling interfaces with time slots
16- Build forms requiring datetime input
17- Add calendar pickers with time selection
18- Implement date range restrictions
19- Customize picker appearance (headers, footers, themes)
20- Handle selection events and data binding
21- Support multiple date/time formats
22- Localize picker labels and buttons
23- Implement accessible datetime selection
24
25## Component Overview
26
27The **SfDateTimePicker** is a versatile picker control that allows users to select:
28- **Dates only** - Pick day, month, and year
29- **Times only** - Pick hours, minutes, and seconds
30- **Date and Time** - Combined selection
31- **Formatted display** - 18 date formats and 9 time formats
32- **Multiple display modes** - Inline, Dialog, or Relative Dialog
33- **Date restrictions** - Min/max dates and blackout times
34- **Custom intervals** - Skip days, months, hours, minutes
35- **Full customization** - Headers, footers, columns, selection views
36- **Localization** - Multi-language support
37
38## Documentation and Navigation Guide
39
40### Getting Started & Installation
41📄 **Read:** [references/getting-started.md](references/getting-started.md)
42- Installing Syncfusion.Maui.Toolkit NuGet package
43- Registering handler in MauiProgram.cs
44- Basic DateTimePicker implementation (XAML & C#)
45- Running your first application
46- Minimal working examples
47
48### Date and Time Formatting
49📄 **Read:** [references/formatting.md](references/formatting.md)
50- 18 predefined date formats (dd_MM_yyyy, yyyy_MM_dd, MMM_dd_yyyy, etc.)
51- 9 predefined time formats (h_mm_tt, HH_mm_ss, hh_mm_ss_tt, etc.)
52- Setting DateFormat and TimeFormat properties
53- Custom format configurations
54- Format selection best practices
55- Display format examples
56
57### Picker Modes and Display
58📄 **Read:** [references/picker-modes.md](references/picker-modes.md)
59- Default mode (inline display)
60- Dialog mode (popup with overlay)
61- RelativeDialog mode (positioned popup)
62- IsOpen property for programmatic control
63- 8 RelativePosition options (AlignTop, AlignBottom, AlignTopLeft, etc.)
64- Mode selection guidance by use case
65- Opening picker programmatically
66
67### Customization
68📄 **Read:** [references/customization.md](references/customization.md)
69- Header customization (text, divider color, templates)
70- HeaderTemplate and HeaderTemplateSelector
71- Column header styling
72- Footer customization (OK/Cancel buttons, text, visibility)
73- Selection view appearance
74- Background colors and text styles
75- DataTemplate and DataTemplateSelector examples
76- Advanced theming
77
78### Date Restrictions
79📄 **Read:** [references/date-restriction.md](references/date-restriction.md)
80- MinimumDate property (lower bound restrictions)
81- MaximumDate property (upper bound restrictions)
82- BlackoutDateTimes (blocking specific dates and times)
83- Validation rules
84- Use cases (holidays, unavailable periods, business hours)
85- Restriction patterns and best practices
86
87### Intervals
88📄 **Read:** [references/intervals.md](references/intervals.md)
89- Date intervals (DayInterval, MonthInterval, YearInterval)
90- Time intervals (HourInterval, MinuteInterval, SecondInterval, MilliSecondInterval)
91- Combining multiple intervals
92- Skip patterns for appointment booking
93- Time slot configurations (15 min, 30 min intervals)
94- Use cases and examples
95
96### Events
97📄 **Read:** [references/events.md](references/events.md)
98- SelectionChanged event (NewValue, OldValue)
99- Immediate vs confirmed selection (IsSelectionImmediate)
100- Dialog mode events (Opened, Closing, Closed)
101- Canceling selection in Closing event
102- Event handling patterns
103- Data binding with events
104- MVVM integration
105
106### Localization
107📄 **Read:** [references/localization.md](references/localization.md)
108- Localizable strings (Day, Month, Year, Hour, Minute, Second, OK, Cancel)
109- Setting CurrentUICulture
110- Creating resource files (.resx)
111- Adding translations for multiple languages
112- Resource file structure and naming
113- French, Spanish, and other language examples
114- Best practices for multi-language apps
115
116### Accessibility
117📄 **Read:** [references/accessibility.md](references/accessibility.md)
118- WCAG compliance features
119- Keyboard navigation support
120- Screen reader compatibility
121- Semantic properties and AutomationId
122- Focus management
123- Accessible date/time selection
124- Testing accessibility
125
gabrielmoreira