SkillsAdd

syncfusion/maui-ui-components-skills

syncfusion-maui-date-picker

Implements Syncfusion .NET MAUI DatePicker (SfDatePicker) control for date selection.

First seen Mar 26, 2026

Installation

$ npx skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-date-picker
View on skills.sh ↗ GitHub repository ↗

Summary

  • Implements Syncfusion .NET MAUI DatePicker (SfDatePicker) control for date selection.
  • Use when implementing date pickers, adding date selection UI, or working with SfDatePicker control.
  • Covers date picker appearance customization (headers, footers, columns), date formatting (20+ predefined formats), date restrictions (min/max dates, blackout dates), and picker modes (Dialog, RelativeDialog).

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from syncfusion/maui-ui-components-skills · top by installs.

npx skills add syncfusion/maui-ui-components-skills
syncfusion-maui-parallax-view 166 syncfusion-maui-cartesian-charts 161 syncfusion-maui-listview 159 syncfusion-maui-button 158 syncfusion-maui-checkbox 157 syncfusion-maui-text-input-layout 156 syncfusion-maui-tab-view 156 syncfusion-maui-combobox 156 syncfusion-maui-picker 155 syncfusion-maui-datagrid 155

Browse all from syncfusion/maui-ui-components-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 60
Default branch master
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version34.1.29
More metadata
author
Syncfusion Inc
version
34.1.29

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,183 B
  • docs SUMMARY.md 429 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 155 installs

SKILL.md

Implementing Syncfusion .NET MAUI DatePicker (SfDatePicker)

Syncfusion .NET MAUI DatePicker (SfDatePicker) control allows you to select dates with a visually rich, customizable picker interface. The control supports dialog and drop-down modes, extensive customization options, date restrictions, formatting, localization, and accessibility features.

When to Use This Skill

Use this skill when you need to:

  • Implement date selection - Add date picker controls to .NET MAUI applications
  • Format dates - Display dates in various formats (20+ predefined options)
  • Restrict date selection - Set minimum/maximum dates, blackout specific dates
  • Customize appearance - Style headers, footers, column headers, selection views
  • Handle date events - Respond to date selection, dialog open/close, OK/Cancel actions
  • Configure picker modes - Use Dialog, RelativeDialog, or Default display modes
  • Add intervals - Set day/month/year intervals for selection
  • Enable accessibility - Support keyboard navigation and localization
  • Apply modern effects - Implement liquid glass effect (.NET 10+)

Component Overview

Key Capabilities:

  • Date Selection - Interactive date picker with day, month, year columns
  • Multiple Formats - 20+ predefined date formats (dd/MM/yyyy, MM/dd/yyyy, etc.)
  • Picker Modes - Dialog, RelativeDialog with customizable positions
  • Customization - Headers, footers, column headers, selection views, colors, fonts
  • Date Restrictions - Min/max dates, blackout dates collection
  • Intervals - Day, month, year intervals for custom date ranges
  • Events & Commands - SelectionChanged, dialog events, footer button events
  • Accessibility - Keyboard navigation, screen reader support, localization
  • Advanced - Text display modes (Fade, Shrink), liquid glass effect

Documentation and Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

  • Installation and NuGet package setup
  • Handler registration in MauiProgram.cs
  • Basic DatePicker implementation (XAML & C#)
  • Setting header, footer, height, width
  • SelectedDate property and clear selection

Date Formatting

📄 Read: [references/formatting.md](references/formatting.md)

  • 20+ predefined date formats
  • Format property usage
  • Common format patterns (ddMMyyyy, MMddyyyy, etc.)
  • Custom format examples

Picker Modes and Display

📄 Read: [references/picker-modes.md](references/picker-modes.md)

  • Dialog mode (popup display)
  • RelativeDialog mode (positioned relative to view)
  • 8 relative positions (AlignTop, AlignBottom, etc.)
  • IsOpen property for programmatic control
  • Custom popup size (PopupWidth, PopupHeight)

Customization and Styling

📄 Read: [references/customizations.md](references/customizations.md)

  • Header customization (text, divider, background, template)
  • Column header customization (day/month/year headers)
  • Footer customization (OK/Cancel buttons)
  • Selection view customization (corner radius, stroke, padding)
  • Column divider colors
  • Close button and icon
  • Column-specific text styles and widths
  • DataTemplateSelector support

Date Restrictions

📄 Read: [references/date-restrictions.md](references/date-restrictions.md)

  • MinimumDate property
  • MaximumDate property
  • BlackoutDates collection
  • Date range validation
  • Preventing selection beyond ranges

Intervals and Looping

📄 Read: [references/intervals-and-looping.md](references/intervals-and-looping.md)

  • DayInterval property
  • MonthInterval property
  • YearInterval property
  • EnableLooping for seamless navigation

Events and Commands

📄 Read: [references/events-and-commands.md](references/events-and-commands.md)

  • SelectionChanged event (NewValue, OldValue)
  • Dialog mode events (Opened, Closing, Closed)
  • Footer events (OkButtonClicked, CancelButtonClicked)
  • SelectionChangedCommand, AcceptCommand, DeclineCommand
  • Event handling patterns

Accessibility and Localization

📄 Read: [references/accessibility-localization.md](references/accessibility-localization.md)

  • Accessibility features for headers, footers, picker items
  • Keyboard navigation (Tab, Enter, Arrow keys)
  • Localization setup and resource files
  • CurrentUICulture configuration
  • Multilingual support

Advanced Features

📄 Read: [references/advanced-features.md](references/advanced-features.md)

  • Text display modes (Default, Fade, Shrink, FadeAndShrink)
  • Liquid glass effect integration
  • SfGlassEffectView setup
  • EnableLiquidGlassEffect property
  • Platform requirements (.NET 10, macOS 26+, iOS 26+)