カレンダー、日付、時刻のコントロール

2025-08-22

日付と時刻のコントロールを使用すると、ユーザーがアプリで日付と時刻の値を表示および設定できるように、標準のローカライズされた方法が提供されます。この記事では、設計ガイドラインを提供し、適切なコントロールを選択するのに役立ちます。

WinUI 2 ギャラリーアプリを開き、動作中の日付と時刻のコントロールを確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得します。

WinUI 3 ギャラリーアプリを開き、動作中の日付と時刻のコントロールを表示する

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得する

どの日付または時刻コントロールを使用する必要がありますか?

選択できる日付と時刻のコントロールは 4 つあります。使用するコントロールは、シナリオによって異なります。この情報を使用して、アプリで使用する適切なコントロールを選択します。

コントロール	Example	Description
予定表ビュー		常に表示されるカレンダーから 1 つの日付または日付の範囲を選択する場合に使用します。
カレンダー日付選択		コンテキストカレンダーから 1 つの日付を選択する場合に使用します。
日付ピッカー		コンテキスト情報が重要でない場合に、1 つの既知の日付を選択するために使用します。
時間の選択		1 つの時間値を選択するために使用します。

予定表ビュー

CalendarView を使用すると、ユーザーは月、年、または 10 年ごとに移動できる予定表を表示および操作できます。ユーザーは、1 つの日付または日付の範囲を選択できます。ピッカー画面がなく、カレンダーは常に表示されます。

カレンダービューは、月ビュー、年ビュー、10 年ビューの 3 つの独立したビューで構成されています。既定では、月ビューが開いた状態で開始されますが、スタートアップビューとして任意のビューを指定できます。

ユーザーが複数の日付を選択できるようにする必要がある場合は、 CalendarView を使用する必要があります。
ユーザーが 1 つの日付のみを選択できるようにする必要があり、カレンダーを常に表示する必要がない場合は、 CalendarDatePicker コントロールまたは DatePicker コントロールの使用を検討してください。

カレンダー日付選択

CalendarDatePicker は、カレンダービューから 1 つの日付を選択するために最適化されたドロップダウンコントロールで、曜日やカレンダーの完全性などのコンテキスト情報が重要です。予定表を変更して、追加のコンテキストを提供したり、使用可能な日付を制限したりできます。

日付が設定されていない場合は、エントリポイントにプレースホルダーテキストが表示されます。それ以外の場合は、選択した日付が表示されます。ユーザーがエントリポイントを選択すると、カレンダービューが展開され、ユーザーは日付を選択できます。予定表ビューは他の UI をオーバーレイします。他の UI は邪魔になりません。

予定や出発日などを選択するには、カレンダーの日付ピッカーを使用します。

日付ピッカー

DatePicker コントロールは、特定の日付を選択するための標準化された方法を提供します。

エントリポイントには選択した日付が表示され、ユーザーがエントリポイントを選択すると、選択画面が中央から垂直方向に展開され、ユーザーが選択されます。日付ピッカーは他の UI をオーバーレイします。他の UI は邪魔になりません。

日付ピッカーを使用して、カレンダーのコンテキストが重要でない生年月日などの既知の日付をユーザーが選択できるようにします。

時間の選択

TimePicker は、予定や出発時刻などの 1 つの時間値を選択するために使用されます。これは、ユーザーまたはコードで設定された静的な表示ですが、現在の時刻を表示するように更新されることはありません。

エントリポイントには選択した時刻が表示され、ユーザーがエントリポイントを選択すると、選択画面が中央から垂直方向に展開され、ユーザーが選択されます。タイムピッカーは他の UI をオーバーレイします。他の UI は邪魔になりません。

タイムピッカーを使用して、ユーザーが 1 つの時間値を選択できるようにします。

日付または時刻コントロールを作成する

各日付と時刻コントロールに固有の情報と例については、次の記事を参照してください。

日付の選択と時刻の選択を一緒に使用する

この例では、 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 Calendar クラスを使用できますが、特定の実装は使用できません。たとえば、GregorianCalendar など)。

.NET では、DateTime という名前の型もサポートされています。 DateTimeOffset に暗黙的に変換できます。そのため、実際には DateTimeOffset である値を設定するために使用される .NET コードで "DateTime" 型が使用されている場合があります。 DateTime と DateTimeOffset の違いの詳細については、「 DateTimeOffset クラスの解説」を参照してください。

注

Windows ランタイム XAML パーサーには DateTime/DateTimeOffset オブジェクトとして文字列を日付に変換するための変換ロジックがないため、日付オブジェクトを取得するプロパティを XAML 属性文字列として設定することはできません。通常、これらの値はコードで設定します。もう 1 つの手法として、データオブジェクトまたはデータコンテキストで使用できる日付を定義し、データとして日付にアクセスできる {Binding} マークアップ拡張式を参照する XAML 属性としてプロパティを設定します。

サンプルコードを取得する

開発者向け (XAML)

フィードバック

このページはお役に立ちましたか?