日付を選択する際に便利なDatePickerというコントロールがあります。

今回はこのDatePickerについてまとめてみました。

DatePickerの使い方

かりまたかりまた

使い方は簡単で、以下のようにXamlに記述するのみです。

実際にどう動くのか?

WindowsAndroidiPhone
かりまたかりまた

特にプロパティを設定せずにDatePickerを配置するとこれらのように表示されます。iPhoneのカレンダーはいつも見ているUIなのでお馴染みなのですが、Androidのカレンダーはかっこいいですし、日付が選択しやすいですね。

DatePickerのPublicプロパティ一覧

Dateプロパティ
Formatプロパティ
MaximumDateプロパティ
MinimumDateプロパティ
TextColorプロパティ

DatePickerのプロパティをXamlで適用してみる

DateプロパティをXamlで使うとこんな感じ

WindowsAndroidiPhone

 

かりまたかりまた

Xaml側でDateTime.MaxValueとかの記述をどうすれば良いか知らなかったんですが、Date=”{x:Static x:DateTime.MaxValue}”というように書けば良いんですね、なるほど。

FormatプロパティをXamlで使うとこんな感じ

WindowsAndroidiPhone

 

かりまたかりまた

日付形式じゃなくても表示されますね。

日本式の年/月/日でDatePickerを表示したい場合はFormatプロパティを使用しましょう。また、使用できる書式指定文字列は以下の通りです。

書式指定文字列説明
y1 桁の年 (2001 年の場合は “1”)。
yy年の最後の 2 桁 (2001 の場合は “01”)。
yyyy完全な年 (2001 の場合は “2001”)。
M数字で表示する 1 桁または 2 桁の月。
MM数字で表示する 2 桁の月。値が 1 桁の場合、前に 0 が付きます。
MMM3 文字の月の省略形。
MMMM完全な月の名前。
 d 1 桁または 2 桁の日付。
 dd 2 桁の日付。日付値が 1 桁の場合、前に 0 が付きます。
 ddd 3 文字の曜日の省略形。
 dddd 完全な曜日名。

MaximumDate, MinimumDateプロパティをXamlで使うとこんな感じ

WindowsAndroidiPhone

 

りんちゃんりんちゃん

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

りんちゃんりんちゃん

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

りんちゃんりんちゃん

iPhoneは動作が恐ろしい程遅かったので画像でゆるしてにゃ~。

TextColorプロパティをXamlで使うとこんな感じ

WindowsAndroidiPhone

 

かりまたかりまた

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

コードビハインドでDatePickerを設定してみる

りんちゃんりんちゃん

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


りんちゃんりんちゃん

表示のされ方は前述しているので、Windowsでの表示のされ方のみを載せておくにゃ~。

DatePickerのPublicイベント一覧

DateSelectedイベント

DatePickerのDateSelectedイベントを使用してみる

かりまたかりまた

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


かりまたかりまた

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


かりまたかりまた

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