日历、日期和时间控件Calendar, date, and time controls

日期和时间控件向你提供了标准的本地化方法,可供用户在你的应用中查看并设置日期和时间值。Date and time controls give you standard, localized ways to let a user view and set date and time values in your app. 本文提供设计指南,并帮助你选取正确的控件。This article provides design guidelines and helps you pick the right control.

重要的 APICalendarView 类CalendarDatePicker 类DatePicker 类TimePicker 类Important APIs: CalendarView class, CalendarDatePicker class, DatePicker class, TimePicker class

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果已安装 XAML 控件库应用,请单击此处打开此应用,了解这些控件的实际应用If you have the XAML Controls Gallery app installed, click here to open the app and see these controls in action.

应使用哪个日期或时间控件?Which date or time control should you use?

有四个日期和时间控件可供选择;要使用的控件取决于你的方案。There are four date and time controls to choose from; the control you use depends on your scenario. 使用此信息来选取要在你的应用中使用的正确控件。Use this info to pick the right control to use in your app.

控制Control 示例Example 描述Description
日历视图Calendar view 日历视图示例 用于从始终可见的日历中选取一个日期或日期范围。Use to pick a single date or a range of dates from an always visible calendar.
日历日期选取器Calendar date picker 日历日期选取器的屏幕截图。 用于从上下文日历中选取一个日期。Use to pick a single date from a contextual calendar.
日期选取器Date picker 日期选取器示例 用于在上下文信息不重要时选取一个已知日期。Use to pick a single known date when contextual info isn't important.
时间选取器Time picker 时间选取器示例 用于选取一个时间值。Use to pick a single time value.

日历视图Calendar view

CalendarView 让用户查看可按月份、年份或十年期浏览的日历,并与之交互。CalendarView lets a user view and interact with a calendar that they can navigate by month, year, or decade. 用户可选择单个日期或一组日期。A user can select a single date or a range of dates. 它没有选取器图面,并且日历始终可见。It doesn't have a picker surface and the calendar is always visible.

日历视图由 3 种单独视图构成:月份视图、年份视图和十年期视图。The calendar view is made up of 3 separate views: the month view, year view, and decade view. 默认情况下,它通过打开月视图启动,但你可以将其他视图指定为启动视图。By default, it starts with the month view open, but you can specify any view as the startup view.

三个日历视图的屏幕截图,其中分别显示月视图、年视图和十年视图。

  • 如果需要允许用户选择多个日期,则必须使用 CalendarViewIf you need to let a user select multiple dates, you must use a CalendarView.
  • 如果需要让用户仅选取单个日期并且不需要日历始终可见,请考虑使用 CalendarDatePickerDatePicker 控件。If you need to let a user pick only a single date and don't need a calendar to be always visible, consider using a CalendarDatePicker or DatePicker control.

日历日期选取器Calendar date picker

CalendarDatePicker 是一个下拉式控件,该控件已针对从日历视图中选取某个日期进行了优化,尤其是能够显示诸如星期几或丰富的日历信息等上下文信息。CalendarDatePicker is a drop down control that's optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. 你可以修改日历以提供其他上下文或限制可用日期。You can modify the calendar to provide additional context or to limit available dates.

如果尚未设置日期,入口点将显示占位符文本;否则,它将显示选择的日期。The entry point displays placeholder text if a date has not been set; otherwise, it displays the chosen date. 当用户选择该入口点时,日历视图将进行扩展以供用户选择日期。When the user selects the entry point, a calendar view expands for the user to make a date selection. 日历视图将会覆盖其他 UI;它不会将其他 UI 推开。The calendar view overlays other UI; it doesn't push other UI out of the way.

日历日期选取器的屏幕截图,其中显示了空的“选择日期”文本框,并通过其下方的日历填充了一个日期。

  • 日历日期选取器可用于选择约会或出发日期等事项。Use a calendar date picker for things like choosing an appointment or departure date.

日期选取器Date picker

DatePicker 控件提供了一种用于选择特定日期的标准化方法。The DatePicker control provides a standardized way to choose a specific date.

入口点显示选定的日期,当用户选择该入口点时,会从中间垂直展开一个选取器图面以供用户进行选择。The entry point displays the chosen date, and when the user selects the entry point, a picker surface expands vertically from the middle for the user to make a selection. 日期选取器会覆盖其他 UI;它不会将其他 UI 推开。The date picker overlays other UI; it doesn't push other UI out of the way.

日期选取器展开示例

  • 使用日期选取器以使用户选取日历上下文不重要的已知日期,例如生日。Use a date picker to let a user pick a known date, such as a date of birth, where the context of the calendar is not important.

时间选取器Time picker

TimePicker 用于为约会或出发时间等事项选择一个时间值。The TimePicker is used to select a single time value for things like appointments or a departure time. 它是由用户或使用代码设置的静态显示方式,但不会更新以显示当前时间。It's a static display that is set by the user or in code, but it doesn't update to display the current time.

入口点显示选定的时间,当用户选择该入口点时,会从中间垂直展开一个选取器图面以供用户进行选择。The entry point displays the chosen time, and when the user selects the entry point, a picker surface expands vertically from the middle for the user to make a selection. 时间选取器会覆盖其他 UI;它不会将其他 UI 推开。The time picker overlays other UI; it doesn't push other UI out of the way.

时间选取器展开示例

  • 使用时间选取器使用户可以选取单个时间值。Use a time picker to let a user pick a single time value.

创建一个日期或时间控件Create a date or time control

有关特定于每个日期和时间控件的信息和示例,请参阅以下这些文章。See these articles for info and examples specific to each date and time control.

全球化Globalization

XAML 日期控件支持 Windows 支持的各种日历系统。The XAML date controls support each of the calendar systems supported by Windows. 这些日历均在 Windows.Globalization.CalendarIdentifiers 类中指定。These calendars are specified in the Windows.Globalization.CalendarIdentifiers class. 每个控件均使用与应用的默认语言对应的正确日历,还可以设置 CalendarIdentifier 属性以使用特定的日历系统。Each control uses the correct calendar for your app's default language, or you can set the CalendarIdentifier property to use a specific calendar system.

时间选取器控件支持在 Windows.Globalization.ClockIdentifiers 类中指定的每个时钟系统。The time picker control supports each of the clock systems specified in the Windows.Globalization.ClockIdentifiers class. 若要使用 12 小时制时钟或 24 小时制时钟,可以设置 ClockIdentifier 属性。You can set the ClockIdentifier property to use either a 12-hour clock or 24-hour clock. 该属性的类型是字符串,但必须使用对应于 ClockIdentifiers 类的静态字符串属性的值。The type of the property is String, but you must use values that correspond to the static string properties of the ClockIdentifiers class. 如下所示:TwelveHour(字符串“12HourClock”)和TwentyFourHour(字符串“24HourClock”)。These are: TwelveHour (the string "12HourClock")and TwentyFourHour (the string "24HourClock"). “12HourClock”是默认值。"12HourClock" is the default value.

DateTime 和日历值DateTime and Calendar values

XAML 日期和时间控件中所使用的日期对象具有不同的表示形式,具体取决于你的编程语言。The date objects used in the XAML date and time controls have a different representation depending on your programming language.

相关概念是 Calendar 类,它对在上下文中解释日期的方式产生影响。A related concept is the Calendar class, which influences how dates are interpreted in context. 所有 Windows 运行时应用都可以使用 Windows.Globalization.Calendar 类。All Windows Runtime apps can use the Windows.Globalization.Calendar class. C# 和 Visual Basic 应用还可以使用 System.Globalization.Calendar 类,该类具有非常类似的功能。C# and Visual Basic apps can alternatively use the System.Globalization.Calendar class, which has very similar functionality. (Windows 运行时应用可使用 .NET 日历基类而非诸如 GregorianCalendar 的特定实现。)(Windows Runtime apps can use the base .NET Calendar class but not the specific implementations; for example, GregorianCalendar.)

.NET 还支持名为 DateTime 的类型,该类型可隐式转换为 DateTimeOffset.NET also supports a type named DateTime, which is implicitly convertible to a DateTimeOffset. 因此,可能会看到要在 .NET 代码中用于设置实际上是 DateTimeOffset 的值的“DateTime”类型。So you might see a "DateTime" type being used in .NET code that's used to set values that are really DateTimeOffset. 有关 DateTime 和 DateTimeOffset 之间的区别的详细信息,请参阅 DateTimeOffset 类中的“备注”。For more info on the difference between DateTime and DateTimeOffset, see Remarks in the DateTimeOffset class.

备注

获取日期对象的属性不可以设置为 XAML 属性字符串,因为 Windows 运行时 XAML 解析器不具有用于将字符串转换为日期(作为 DateTime/DateTimeOffset 对象)的转换逻辑。Properties that take date objects can't be set as a XAML attribute string, because the Windows Runtime XAML parser doesn't have a conversion logic for converting strings to dates as DateTime/DateTimeOffset objects. 通常使用代码设置这些值。You typically set these values in code. 另一个可行的方法是定义可用作数据对象或在数据上下文中可用的日期,然后将该属性设置为引用 {Binding} 标记扩展表达式的 XAML 属性,以便可以将该日期作为数据访问。Another possible technique is to define a date that's available as a data object or in the data context, then set the property as a XAML attribute that references a {Binding} markup extension expression that can access the date as data.

获取示例代码Get the sample code

面向开发人员 (XAML)For developers (XAML)