日期和时间控件指南 - Windows apps
2025-06-17 07:12:50
日期和时间控件提供标准、本地化的方法,让用户在应用中查看和设置日期和时间值。 本文提供了设计指南,可帮助你选取正确的控件。
打开 WinUI 2 库应用并查看 DateAndTime 的操作。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用,或在 GitHub 上获取源代码。
打开 WinUI 3 库应用并查看 DateAndTime 的操作。
WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用,或在 GitHub 上获取源代码
应使用哪个日期或时间控件?
有四个日期和时间控件可供选择;使用的控件取决于你的方案。 使用此信息可以选取在应用中使用的正确控件。
控制
示例
说明
日历视图
用于从始终可见的日历中选取单个日期或日期范围。
日历日期选取器
用于从上下文日历中选择单个日期。
日期选取器
用于在上下文信息不重要时选取单个已知日期。
时间选择器
用于选取单个时间值。
日历视图
CalendarView 允许用户查看日历并与之交互,日历可以按月、年或十年导航。 用户可以选择单个日期或日期范围。 它没有选取器图面,日历始终可见。
日历视图由 3 个单独的视图组成:月视图、年份视图和十年视图。 默认情况下,它从月份视图打开开始,但你可以将任何视图指定为启动视图。
如果需要让用户选择多个日期,则必须使用 CalendarView。
如果需要让用户仅选取单个日期并且不需要日历始终可见,请考虑使用 CalendarDatePicker 或 DatePicker 控件。
日历日期选取器
CalendarDatePicker 是一个下拉式控件,该控件已针对从日历视图中选取某个日期进行了优化,尤其是能够显示诸如星期几或丰富的日历信息等上下文信息。 可以修改日历以提供其他上下文或限制可用日期。
如果尚未设置日期,入口点将显示占位符文本;否则,它将显示所选日期。 当用户选择入口点时,日历视图将展开供用户选择日期。 日历视图覆盖其他 UI;它不会以这种方式推送其他 UI。
将日历日期选取器用于选择约会或出发日期等内容。
日期选取器
DatePicker 控件提供了一种标准化的方式来选择特定日期。
入口点显示所选日期,当用户选择入口点时,选取器图面将从中间垂直展开,供用户选择。 日期选取器覆盖其他 UI;它不会以这种方式推送其他 UI。
使用日期选取器允许用户选取已知日期,例如出生日期,其中日历上下文不重要。
时间选择器
TimePicker 用于为约会或出发时间等内容选择单个时间值。 它是由用户或代码设置的静态显示,但它不会更新以显示当前时间。
入口点显示所选时间,当用户选择入口点时,选取器图面从中间垂直展开,供用户选择。 时间选取器覆盖其他 UI;它不会以这种方式推送其他 UI。
使用时间选取器让用户选取单个时间值。
创建日期或时间控件
有关特定于每个日期和时间控件的信息和示例,请参阅这些文章。
日历视图
日历日期选取器
日期选取器
时间选取器
将日期选取器和时间选取器结合使用
此示例演示如何结合使用 DatePicker 和 TimePicker,使用户能够选择其到达日期和时间。 可以处理 SelectedDateChanged 和 SelectedTimeChanged 事件以更新名为 arrivalDateTime 的单个 DateTime 实例。 用户还可以在设置日期和时间选取器后将其清除。
DayFormat="{}{day.integer} ({dayofweek.abbreviated})" SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/> MinuteIncrement="15" SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>