mcpField
S
syncfusion-maui-toolkit-date-time-picker

syncfusion-maui-toolkit-date-time-picker

github.com/syncfusion设计与 UI3944 次安装7 周前更新
代码仓库

关于 syncfusion-maui-toolkit-date-time-picker

此技能指导开发者在 .NET MAUI 应用中实现和定制 Syncfusion SfDateTimePicker，支持日期、时间或两者的选择。它涵盖格式、显示模式、限制、间隔、事件、本地化和无障碍配置。

主要功能

  1. 01选择日期、时间或日期时间
  2. 02使用预设及自定义格式
  3. 03配置内嵌、对话框和相对对话框模式
  4. 04设置日期时间范围及禁用时段
  5. 05配置日期和时间间隔
  6. 06定制外观、事件与本地化

适用场景

  1. 01为预约和预订应用添加日期时间选择
  2. 02创建带有指定间隔的排期界面
  3. 03限制可选日期或不可用时段
  4. 04构建支持多语言及无障碍操作的输入界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-date-time-picker

安装后在 Claude Code 中输入/syncfusion-maui-toolkit-date-time-picker确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
accessibility.md
customization.md
date-restriction.md
events.md
formatting.md
getting-started.md
intervals.md
localization.md
picker-modes.md

详细介绍

实现日期时间选择器

一份全面的指南，介绍如何实现和自定义 Syncfusion .NET MAUI DateTimePicker (SfDateTimePicker) 控件。此组件提供灵活的方式来选择日期、时间或两者，并支持丰富的自定义选项。

何时使用此技能

在以下情况下使用此技能：

  • 在 .NET MAUI 应用中添加日期和时间选择功能
  • 实现预约或预订系统
  • 创建带时间段的日程安排界面
  • 构建需要输入日期时间的表单
  • 添加支持选择时间的日历选择器
  • 实现日期范围限制
  • 自定义选择器外观（页眉、页脚、主题）
  • 处理选择事件和数据绑定
  • 支持多种日期/时间格式
  • 本地化选择器标签和按钮
  • 实现无障碍日期时间选择功能

组件概览

SfDateTimePicker 是一种多功能选择器控件，允许用户选择：

  • 仅日期 - 选择日、月和年
  • 仅时间 - 选择小时、分钟和秒
  • 日期和时间 - 组合选择
  • 格式化显示 - 18 种日期格式和 9 种时间格式
  • 多种显示模式 - 内联、对话框或相对对话框
  • 日期限制 - 最小/最大日期和禁用时间
  • 自定义间隔 - 跳过指定的天、月、小时和分钟
  • 全面自定义 - 页眉、页脚、列和选择视图
  • 本地化 - 支持多种语言

文档与导航指南

入门与安装

📄 阅读： references/getting-started.md

  • 安装 Syncfusion.Maui.Toolkit NuGet 包
  • 在 MauiProgram.cs 中注册处理程序
  • 基本的 DateTimePicker 实现（XAML 和 C#）
  • 运行你的第一个应用
  • 最小可用示例
日期和时间格式

📄 阅读： references/formatting.md

  • 18 种预定义日期格式（dd_MM_yyyy、yyyy_MM_dd、MMM_dd_yyyy 等）
  • 9 种预定义时间格式（h_mm_tt、HH_mm_ss、hh_mm_ss_tt 等）
  • 设置 DateFormat 和 TimeFormat 属性
  • 自定义格式配置
  • 格式选择最佳实践
  • 显示格式示例
选择器模式和显示

📄 阅读： references/picker-modes.md

  • 默认模式（内联显示）
  • 对话框模式（带遮罩层的弹出窗口）
  • RelativeDialog 模式（定位弹出窗口）
  • 用于程序化控制的 IsOpen 属性
  • 8 种 RelativePosition 选项（AlignTop、AlignBottom、AlignTopLeft 等）
  • 根据使用场景选择模式的指南
  • 以编程方式打开选择器
自定义

📄 阅读： references/customization.md

  • 页眉自定义（文本、分隔线颜色、模板）
  • HeaderTemplate 和 HeaderTemplateSelector
  • 列标题样式
  • 页脚自定义（确定/取消按钮、文本、可见性）
  • 选择视图外观
  • 背景颜色和文本样式
  • DataTemplate 和 DataTemplateSelector 示例
  • 高级主题设置
日期限制

📄 阅读： references/date-restriction.md

  • MinimumDate 属性（下限限制）
  • MaximumDate 属性（上限限制）
  • BlackoutDateTimes（阻止特定日期和时间）
  • 验证规则
  • 使用场景（节假日、不可用时段、营业时间）
  • 限制模式和最佳实践
间隔

📄 阅读： references/intervals.md

  • 日期间隔（DayInterval、MonthInterval、YearInterval）
  • 时间间隔（HourInterval、MinuteInterval、SecondInterval、MilliSecondInterval）
  • 组合多个间隔
  • 用于预约的跳过模式
  • 时间段配置（15 分钟、30 分钟间隔）
  • 使用场景和示例
事件

📄 阅读： references/events.md

  • SelectionChanged 事件（NewValue、OldValue）
  • 即时选择与确认后选择（IsSelectionImmediate）
  • 对话框模式事件（Opened、Closing、Closed）
  • 在 Closing 事件中取消选择
  • 事件处理模式
  • 使用事件进行数据绑定
  • MVVM 集成
本地化

📄 阅读： references/localization.md

  • 可本地化字符串（Day、Month、Year、Hour、Minute、Second、OK、Cancel）
  • 设置 CurrentUICulture
  • 创建资源文件（.resx）
  • 为多种语言添加翻译
  • 资源文件结构和命名
  • 法语、西班牙语及其他语言示例
  • 多语言应用的最佳实践
无障碍

📄 阅读： references/accessibility.md

  • 符合 WCAG 的功能
  • 支持键盘导航
  • 兼容屏幕阅读器
  • 语义属性和 AutomationId
  • 焦点管理
  • 无障碍日期/时间选择
  • 无障碍测试

评论

支持 Markdown