日付を選択する際に便利な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イベントは発火しません。
