日历日期选取器

日历日期选取器是一个下拉式控件，该控件已针对从日历视图中选取某个日期进行了优化，尤其是能够显示诸如星期几或丰富的日历信息等上下文信息。 你可以修改日历以提供其他上下文或限制可用日期。

这是正确的控件吗？

使用“日历日期选取器” ，让用户从上下文日历视图中选取某个日期。 将它用于选择约会或出发日期等事项。

若要让用户选取日历上下文不重要的已知日期，例如生日，请考虑使用日期选取器。

有关选择正确控件的详细信息，请参阅日期和时间控件文章。

示例

如果尚未设置日期，入口点将显示占位符文本；否则，它将显示选择的日期。 当用户选择该入口点时，日历视图将进行扩展以供用户选择日期。 日历视图将会覆盖其他 UI；它不会将其他 UI 推开。

UWP 和 WinUI 2

重要

本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请参阅 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

此控件的 API 存在于 Windows.UI.Xaml.Controls 命名空间中。

• UWP API：CalendarDatePicker 类、 Date 属性、 DateChanged 事件
• 打开 WinUI 2 库应用，查看 CalendarDatePicker 的实际操作。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式和模板。 WinUI 2.2 或更高版本包含此控件的新模板，该模板使用圆角。 有关详细信息，请参阅圆角半径。

创建日历日期选取器

• 重要 API：CalendarDatePicker 类、 Date 属性、 DateChanged 事件

打开 WinUI 3 库应用，查看 CalendarDatePicker 的实际操作。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

生成的日历日期选取器如下所示：

日历日期选取器具有用于选取日期的内部 CalendarView。 CalendarView 属性的子集（例如 IsTodayHighlighted 和 FirstDayOfWeek）存在于 CalendarDatePicker 上，并且会转发到内部 CalendarView 以供你修改。

但是，你无法更改内部 CalendarView 的 SelectionMode 以支持多项选择。 如果你需要让用户选取多个日期或需要日历始终可见，请考虑使用日历视图而非日历日期选取器。 有关如何修改日历屏幕的详细信息，请参阅日历视图文章。

选择日期

使用 Date 属性获取或设置选定的日期。 默认情况下，Date 属性设置为 null。 当用户在日历视图中选择某个日期时，此属性即已更新。 用户可清除该日期，方法是在日历视图中单击选择的日期以取消选择。

你可以在代码中像这样来设置日期。

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

当在代码中设置 Date 时，值会受到 MinDate 和 MaxDate 属性的限制。

• 如果 Date 小于 MinDate，则该值将设置为 MinDate。
• 如果 Date 大于 MaxDate，则该值将设置为 MaxDate。

可处理 DateChanged 事件，以在 Date 值更改时收到通知。

注意

有关日期值的重要信息，请参阅日期和时间控件一文中的 Datetime 和日历值。

设置标题和占位符文本

你可以将 Header（或标签）和 PlaceholderText（或水位线）添加到日历日期选取器，以向用户指示其用途。 若要自定义标题外观，可设置 HeaderTemplate 属性而非 Header。

默认占位符文本是“选择日期”。 你可以通过将 PlaceholderText 属性设置为空字符串来删除此文本，或提供自定义文本，如下所示。

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>

获取示例代码

• WinUI 库示例 - 以交互式格式查看所有 XAML 控件。

相关文章

• 日期和时间控件
• 日历视图
• 日期选取器
• 时间选取器