DatePicker Inputs

DatePicker はポップアップカレンダーを使って日付を選択できるコントロールです。選択可能な日付範囲の制限、週の始まりの曜日設定、日付の表示フォーマット変更をサポートしています。

概要

WPF の DatePicker は、テキストボックスとポップアップカレンダーを組み合わせた日付入力コントロールです。ユーザーはカレンダーをクリックして日付を選択するか、テキストボックスに直接入力できます。

SelectedDate プロパティは DateTime?（null 許容）型です。未選択の場合は null になります。MVVM では DateTime? 型の ViewModel プロパティに TwoWay バインドします。

DisplayDateStart と DisplayDateEnd を設定することで、選択可能な日付範囲を制限できます。例えば、過去の日付を選択不可にする場合は DisplayDateStart="{x:Static sys:DateTime.Today}" のように設定します。

FirstDayOfWeek でカレンダーの週始まり曜日を変更できます。日本語ロケールでは月曜始まりにしたい場合が多く、FirstDayOfWeek="Monday" と設定します。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。アプリ上でリアルタイムに各プロパティを変更してその動作を確認できます。

プロパティ	設定値	説明
`SelectedDate`	`DateTime?`	現在選択されている日付を取得・設定します。MVVM では ViewModel の `DateTime?` プロパティに `Mode=TwoWay` でバインドするのが標準パターンです。ユーザーがテキストフィールドの内容を消去すると `SelectedDate` が null になります。はまりやすいポイント：バインド先が null 非許容の `DateTime` プロパティの場合、null が返るとバインドエラーになります。DatePicker のバインドには必ず `DateTime?`（null 許容型）を使用してください。
`DisplayDate`	`DateTime`	カレンダーに表示する月を設定します。DatePicker を開いた時に特定の月へプログラムから自動スクロールしたい場合（例：契約開始月に移動）に使用します。`SelectedDate` とは独立して動作し、`DisplayDate` を変えてもカレンダーの表示月が移動するだけです。はまりやすいポイント：`DisplayDate` を変更しても `SelectedDate` は変わりません。あくまでカレンダーの「見えている月」を変えるだけのため、日付を選択させたい場合は別途 `SelectedDate` を設定する必要があります。
`DisplayDateStart / DisplayDateEnd`	`DateTime?`	選択・表示可能な日付の開始・終了を設定します。例えば今日から 1 年後までの予約受付フォームなら `DisplayDateStart=Today, DisplayDateEnd=Today+1年` と組み合わせます。範囲外の日付はカレンダー上でグレーアウトされクリックできなくなります。はまりやすいポイント：これらのプロパティはカレンダー UI での表示・選択を制限しますが、ユーザーがテキストボックスに範囲外の日付を直接入力すると `SelectedDate` がその値になってしまう場合があります。入力検証は ViewModel 側でも別途実装してください。
`FirstDayOfWeek`	`DayOfWeek`	カレンダーに表示する週の始まりの曜日を設定します。文化的に日本では月曜始まり、米国では日曜始まりが一般的です。設定するとカレンダーの一番左の列の曜日が変わります。はまりやすいポイント：このプロパティは WPF レベルの設定で OS のロケール設定を自動的には参照しません。日本語アプリで月曜始まりにしたい場合は明示的に `FirstDayOfWeek="Monday"` を設定する必要があります。
`IsDropDownOpen`	`bool`	カレンダーポップアップが現在開いているかどうかを制御します。フィールドにフォーカスが当たった時にカレンダーを自動的に開くなど、プログラムから開閉を制御する場面に使用します。はまりやすいポイント：DatePicker が完全にレンダリングされる前にプログラムからドロップダウンを開こうとすると、レイアウトの問題が発生することがあります。開く処理は `Loaded` イベント以降で行ってください。
`IsTodayHighlighted`	`bool`	カレンダー上で今日の日付をハイライト表示するかどうかを制御します。デフォルトは True で、今日の日付に下線や色が付きます。過去のデータ入力など「今日」に特別な意味がない場面では `false` にしてハイライトを消すとスッキリした見た目になります。はまりやすいポイント：ハイライトを消しても今日の日付はクリックして選択できる有効な日付のままです。ハイライトの有無は見た目のみであり、選択可能かどうかとは無関係です。
`SelectedDateFormat`	`Short / Long`	テキストボックスに表示される日付のフォーマットを設定します。`Short` の表示例はロケールにより異なり（en-US では「1/15/2026」、ja-JP では「2026/01/15」）、`Long` はより詳細な形式で表示されます。はまりやすいポイント：`Long` フォーマットはロケール依存のため、ターゲットロケール以外では意図しない表示になる可能性があります。特定のフォーマットを確実に表示したい場合は IValueConverter を使った独自変換を検討してください。

XAML 使用例

<DatePicker SelectedDate="{Binding BirthDate, Mode=TwoWay}"
             DisplayDateStart="{Binding MinDate}"
             DisplayDateEnd="{Binding MaxDate}"
             FirstDayOfWeek="Monday"
             IsTodayHighlighted="True"
             SelectedDateFormat="Short"
             Width="160" />

主な使用例

生年月日入力 — 年齢制限のある登録フォームで DisplayDateStart/End で選択範囲を制限します。
予約・スケジュール入力 — 宿泊予約や会議予約で日付を選択する UI に使用します。
フィルター条件の日付範囲 — 開始日と終了日を 2 つの DatePicker で指定する期間フィルターを実装します。
締め切り設定 — タスクや案件の締め切り日を設定する入力フォームに使用します。
帳票の対象日付 — 月次レポートや集計表の対象年月を選択する入力に使用します。

ヒントとベストプラクティス

null チェックを必ず実装 — SelectedDate は null 許容型のため、バインド先の ViewModel で未選択（null）の場合の処理を必ず実装します。
BlackoutDates で選択不可日を指定 — 祝日や休業日を選択不可にする場合は BlackoutDates コレクションに CalendarDateRange を追加します。
日付範囲のバリデーション — 開始日・終了日を 2 つの DatePicker で入力するフォームでは、開始日 ≤ 終了日であることを ViewModel 側でチェックします。UI ではエラーメッセージを表示して利用者に知らせます。
ブラックアウト日付の設定 — 特定の日付を選択不可にするには BlackoutDates.Add(new CalendarDateRange(startDate, endDate)) を使います。休業日や祝日をリストから動的に追加できます。
FirstDayOfWeek をロケールに合わせる — アプリのターゲット地域に応じて週の始まりを適切に設定します。
テキスト入力の検証 — ユーザーが直接テキスト入力した場合も SelectedDate が正しく更新されます。無効な日付文字列は SelectedDate が null になります。
カスタムフォーマットには Converter を使用 — SelectedDateFormat では Short/Long のみ選べます。独自の書式が必要な場合は IValueConverter で変換します。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で DatePicker のソースコードを見る →