行事曆、日期和時間控制項

日期和時間控制項可讓您透過標準的當地語系化方式，讓使用者在應用程式中檢視和設定日期和時間值。本文提供設計指導方針，並協助您挑選正確的控制項。

開啟 WinUI 2 資源庫應用程式，並查看運作中的日期和時間控制項。 WinUI 2 圖庫應用程式包含了大部分 WinUI 2 控制項、特性和功能的互動式範例。從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼。

WinUI 3 Gallery 應用程式包含大部分 WinUI 3 控制項、特性和功能的互動式範例。從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

您應該使用哪個日期或時間控制項？

有四個日期和時間控制項可供選擇;您使用的控制項取決於您的案例。使用此資訊來挑選要在應用程式中使用的正確控制項。

管理	Example	Description
行事曆檢視		用於從始終可見的日曆中挑選單個日期或一系列日期。
行事曆日期選擇器		用來從內容行事曆中挑選單一日期。
日期選擇器		當內容資訊不重要時，用於選擇單一已知日期。
時間選擇器		用來挑選單一時間值。

行事曆檢視

CalendarView 可讓使用者檢視行事曆並與之互動，他們可以依月、年或十年瀏覽。使用者可以選取單一日期或日期範圍。它沒有選擇器界面，而且行事曆總是可見的。

行事歷檢視是由 3 個不同的檢視所組成：月檢視、年檢視和十年檢視。依預設，它會從開啟的月份檢視開始，但您可以指定任何檢視作為啟動檢視。

如果您需要讓使用者選取多個日期，您必須使用 CalendarView。
如果您需要讓使用者只挑選單一日期，而且不需要行事曆一律可見，請考慮使用 CalendarDatePicker 或 DatePicker 控制項。

行事曆日期選擇器

CalendarDatePicker 是一個下拉式控制項，經過優化，可從行事曆檢視中挑選單一日期，其中內容資訊（例如星期幾或行事曆的完整性）很重要。您可以修改行事曆以提供其他內容，或限制可用的日期。

如果尚未設定日期，入口點將顯示佔位符文字；否則，它顯示所選日期。當使用者選取進入點時，行事曆檢視會展開供用戶選取日期。行事曆檢視覆蓋其他 UI；它不會妨礙其他用戶介面。

使用日曆日期選擇器來選擇約會或離開日期等操作。

日期選擇器

DatePicker 控制項提供選擇特定日期的標準化方式。

進入點會顯示所選日期，當使用者選擇進入點時，選取器介面會從中間垂直展開，供使用者進行選擇。日期選取器會重疊在其他 UI 上; 不會推開其他 UI。

使用日期選取器讓使用者選擇已知日期，例如出生日期，行事曆的內容並不重要。

時間選擇器

TimePicker 可用來選取約會或離開時間等項目的單一時間值。這是由使用者或程式碼中設定的靜態顯示，但不會更新以顯示目前時間。

進入點會顯示所選的時間，當使用者選取進入點時，選擇器介面會從中間垂直展開，讓使用者進行選取。時間選擇器會覆蓋其他 UI;它不會將其他 UI 推開。

使用時間選擇器讓使用者挑選單一時間值。

建立日期或時間控制項

請參閱這些文章，以取得每個日期和時間控制項的特定資訊和範例。

同時使用日期選擇器和時間選擇器

此範例示範如何使用和 DatePicker 一起讓TimePicker使用者選取其抵達日期和時間。您可以處理 SelectedDateChanged 和 SelectedTimeChanged 事件，以更新名為的單一 arrivalDateTime 執行個體。用戶還可以在設置日期和時間選擇器後清除它們。

日期選擇器、時間選擇器、按鈕和文字標籤。

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/>
    <StackPanel Orientation="Horizontal">
        <TimePicker x:Name="arrivalTimePicker" Header="Arrival time"
                MinuteIncrement="15"
                SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>
        <Button Content="Clear" Click="ClearDateButton_Click"
                VerticalAlignment="Bottom" Height="30" Width="54"/>
    </StackPanel>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void ArrivalTimePicker_SelectedTimeChanged(TimePicker sender, TimePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalTimePicker.SelectedTime != null)
        {
            arrivalDateTime = new DateTime(arrivalDateTime.Year, arrivalDateTime.Month, arrivalDateTime.Day,
                                           args.NewTime.Value.Hours, args.NewTime.Value.Minutes, args.NewTime.Value.Seconds);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ArrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            if (VerifyDateIsFuture((DateTimeOffset)arrivalDatePicker.SelectedDate) == true)
            {
                arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day,
                                               arrivalDateTime.Hour, arrivalDateTime.Minute, arrivalDateTime.Second);
                arrivalText.Text = arrivalDateTime.ToString();
            }
            else
            {
                arrivalDatePicker.SelectedDate = null;
                arrivalText.Text = "Arrival date must be later than today.";
            }
        }
    }

    private bool VerifyDateIsFuture(DateTimeOffset date)
    {
        if (date > DateTimeOffset.Now)
        {
            return true;
        }
        return false;
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDateTime = new DateTime();
        arrivalDatePicker.SelectedDate = null;
        arrivalTimePicker.SelectedTime = null;
        arrivalText.Text = string.Empty;
    }
}

Globalization

XAML 日期控制項支援 Windows 支援的每個行事曆系統。這些行事曆是在 Windows.Globalization.CalendarIdentifiers 類別中指定。每個控制項都會針對應用程式的預設語言使用正確的行事曆，或者您可以將 CalendarIdentifier 屬性設定為使用特定的行事曆系統。

時間選擇器控制項支援 Windows.Globalization.ClockIdentifiers 類別中指定的每個時鐘系統。您可以將 ClockIdentifier 屬性設定為使用 12 小時制或 24 小時制。屬性的類型是 String，但您必須使用對應至 ClockIdentifiers 類別靜態字串屬性的值。它們是：TwelveHour（字串“12HourClock”）和TwentyFourHour（字串“24HourClock”）。「12HourClock」是預設值。

DateTime 和 Calendar 值

XAML 日期和時間控制項中使用的日期物件會根據您的程式設計語言，具有不同的表示法。

C# 和 Visual Basic 會使用屬於 .NET 一部分的 System.DateTimeOffset 結構。
C++/CX 會使用 Windows：：Foundation：:D ateTime 結構。

一個相關的概念是 Calendar 類，它會影響日期在上下文中的解釋方式。所有 Windows 執行階段應用程式都可以使用 Windows.Globalization.Calendar 類別。 C# 和 Visual Basic 應用程式也可以使用 System.Globalization.Calendar 類別，其功能非常相似。（Windows 執行階段應用程式可以使用基底 .NET 行事曆類別，但不能使用特定實作，例如 GregorianCalendar。

.NET 也支援名為 DateTime 的類型，該類型可隱含地轉換為 DateTimeOffset。因此，您可能會看到 .NET 程式碼中使用 “DateTime” 類型，用來設定實際上是 DateTimeOffset 的值。如需 DateTime 與 DateTimeOffset 之間差異的詳細資訊，請參閱 DateTimeOffset 類別中的備註。

備註

採用日期物件的屬性無法設定為 XAML 屬性字串，因為 Windows 執行階段 XAML 剖析器沒有轉換邏輯，可將字串轉換成日期作為 DateTime/DateTimeOffset 物件。您通常會在程式碼中設定這些值。另一種可能的方法是定義可作為資料物件或資料內容中使用的日期，然後將屬性設定為 XAML 屬性，該屬性會參考 {Binding} 標記延伸運算式，以存取日期作為資料。

共用方式為

行事曆、日期和時間控制項

您應該使用哪個日期或時間控制項？

行事曆檢視

行事曆日期選擇器

日期選擇器

時間選擇器

建立日期或時間控制項

同時使用日期選擇器和時間選擇器

Globalization

DateTime 和 Calendar 值

取得範例程式碼

相關主題

對於開發人員 （XAML）

意見反應

其他資源

對於開發人員（XAML）