日付の選択コントロールDate picker

DatePicker は、ユーザーがタッチ、マウス、またはキーボード入力を使ってローカライズされた日付値を選択できる標準化された方法です。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 は、Windows アプリの新しいコントロールと UI 機能が含まれる NuGet パッケージです。WinUI is a NuGet package that contains new controls and UI features for Windows apps. インストール手順などについて詳しくは、「Windows UI Library (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