行事曆、日期和時間控制項Calendar, date, and time controls

日期和時間控制項為您提供一個標準、當地語系化的方式,讓使用者在您的 app 中檢視以及設定日期和時間值。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. 使用此資訊,以選擇適合在您 app 中使用的控制項。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

行事曆檢視可讓使用者檢視行事曆並與其互動,以便依月份、年份或 10 年瀏覽行事曆。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. 每個控制項會針對您 app 的預設語言使用正確的行事曆,或者您也可以設定 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. 您可以設定 ClockIdentifier 屬性,以使用 12 小時制或 24 小時制的時鐘。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 與 Calendar 值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 執行階段 app 可使用.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 程式碼中看到用來設定值的 "DateTime" 類型,其實是 DateTimeOffset。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. 另一個可能的技術是定義可做為資料物件或在資料內容中使用的日期,然後將屬性設定為 XAML 屬性,參考可存取日期做為資料的 {Binding}標記延伸運算式。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)