日期選擇器Date picker

日期選擇器為您提供一個標準化的方式,可以讓使用者利用觸控、滑鼠或鍵盤輸入來挑選當地語系化的日期值。The date picker gives you a standardized way to let users pick a localized date value using touch, mouse, or keyboard input.

日期選擇器的範例

取得 Windows UI 程式庫Get the Windows UI Library

WinUI 標誌

Windows UI 程式庫 2.2 或更新版本中有這個控制項使用圓角的新範本。Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. 如需詳細資訊,請參閱圓角半徑For more info, see Corner radius. WinUI 是 NuGet 套件,其中包含適用於 Windows 應用程式的新控制項和 UI 功能。WinUI is a NuGet package that contains new controls and UI features for Windows apps. 如需詳細資訊 (包括安裝指示),請參閱 Windows UI 程式庫For more info, including installation instructions, see Windows UI Library.

平台 API: DatePicker 類別Date 屬性Platform APIs: DatePicker class, Date property

這是正確的控制項嗎?Is this the right control?

使用日期選擇器可讓使用者挑選已知的日期,例如出生日期 (行事曆內容不重要)。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.

如需有關如何選擇正確日期控制項的詳細資訊,請參閱日期和時間控制項文章。For more info about choosing the right date control, see the Date and time controls article.

範例Examples

XAML 控制項庫XAML Controls Gallery
XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請按一下這裡開啟應用程式,並查看 DatePicker 的運作情形If you have the XAML Controls Gallery app installed, click here to open the app and see the DatePicker in action.

進入點會顯示所選的日期,當使用者選取進入點時,選擇器介面就會從中央垂直展開供使用者選取。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.

展開中的日期選擇器範例

建立日期選擇器Create a date picker

這個範例示範如何建立含有標頭的簡單日期選擇器。This example shows how to create a simple date picker with a header.

<DatePicker x:Name="birthDatePicker" Header="Date of birth"/>
DatePicker birthDatePicker = new DatePicker();
birthDatePicker.Header = "Date of birth";

產生的日期選擇器外觀如下:The resulting date picker looks like this:

日期選擇器的範例

注意  如需有關日期值的重要資訊,請參閱<日期和時間控制項>文章中的 DateTime 與 Calendar 值Note  For important info about date values, see DateTime and Calendar values in the Date and time controls article.

取得範例程式碼Get the sample code