日付を選択する際に便利なDatePickerというコントロールがあります。
今回はこのDatePickerについてまとめてみました。
DatePickerの使い方

使い方は簡単で、以下のようにXamlに記述するのみです。
実際にどう動くのか?
Windows | Android | iPhone |
![]() | ![]() | ![]() |

特にプロパティを設定せずにDatePickerを配置するとこれらのように表示されます。iPhoneのカレンダーはいつも見ているUIなのでお馴染みなのですが、Androidのカレンダーはかっこいいですし、日付が選択しやすいですね。
DatePickerのPublicプロパティ一覧
DatePickerのプロパティをXamlで適用してみる
DateプロパティをXamlで使うとこんな感じ
Windows | Android | iPhone |
![]() | ![]() | ![]() |

Xaml側でDateTime.MaxValueとかの記述をどうすれば良いか知らなかったんですが、Date=”{x:Static x:DateTime.MaxValue}”というように書けば良いんですね、なるほど。
FormatプロパティをXamlで使うとこんな感じ
Windows | Android | iPhone |
![]() | ![]() | ![]() |

日付形式じゃなくても表示されますね。
日本式の年/月/日でDatePickerを表示したい場合はFormatプロパティを使用しましょう。また、使用できる書式指定文字列は以下の通りです。
書式指定文字列 | 説明 |
---|---|
y | 1 桁の年 (2001 年の場合は “1”)。 |
yy | 年の最後の 2 桁 (2001 の場合は “01”)。 |
yyyy | 完全な年 (2001 の場合は “2001”)。 |
M | 数字で表示する 1 桁または 2 桁の月。 |
MM | 数字で表示する 2 桁の月。値が 1 桁の場合、前に 0 が付きます。 |
MMM | 3 文字の月の省略形。 |
MMMM | 完全な月の名前。 |
d | 1 桁または 2 桁の日付。 |
dd | 2 桁の日付。日付値が 1 桁の場合、前に 0 が付きます。 |
ddd | 3 文字の曜日の省略形。 |
dddd | 完全な曜日名。 |
MaximumDate, MinimumDateプロパティをXamlで使うとこんな感じ
Windows | Android | iPhone |
![]() | ![]() | ![]() |

設定したMaximumDateよりも未来の日付を設定してもMaximumDateが設定されるのにゃ~。

加えて、設定した最大日付・最小日付を超えた日付を選択できたとしても、設定した最大・最小日付の日付に設定されるのにゃ~。

iPhoneは動作が恐ろしい程遅かったので画像でゆるしてにゃ~。
TextColorプロパティをXamlで使うとこんな感じ
Windows | Android | iPhone |
![]() | ![]() | ![]() |

TextColorプロパティに色を設定すると、表示されている日付の色が変えられます。Transparentで文字の色を透明に指定できますが、この色を設定するメリットは一つもないですね。
コードビハインドでDatePickerを設定してみる

コードビハインドに以下のコードを書いてみるのにゃ~。


表示のされ方は前述しているので、Windowsでの表示のされ方のみを載せておくにゃ~。
DatePickerのPublicイベント一覧
DatePickerのDateSelectedイベントを使用してみる

Xamlに以下のように記述してください。

また、コードビハインドには以下のメソッドを追加してください。


そうすると、DatePickerの値が変わると同時にDateSelectedイベントが発火することが確認できます。また、現状と同じ値を選択してもDateSelectedイベントは発火しません。