【Material Design Toolkit】 DatePicker

 DatePickerは日付を選択するためのコントロールで、TimePickerとほぼ同じ動きをします。
 Material Design Toolkitでは2種類のスタイルが定義されていますが、そのうちの1つはフロートヒント機能をONにしただけなので見た目や使い方はほぼ同じです。
<StackPanel>
    <DatePicker SelectedDate="{Binding Date}" Margin="10"/>
    <DatePicker SelectedDate="{Binding Date2}" Margin="10"
                Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                materialDesign:HintAssist.Hint="日付"
                SelectedDateFormat="Long"
                IsTodayHighlighted="False"
                FirstDayOfWeek="Monday"
                DisplayDateStart="2017/7/1" DisplayDateEnd="2017/7/25"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign_DatePicker-1.png MaterialDesign_DatePicker-2.png
 TimePickerと同じような見た目で、日付テキストボックスとカレンダーボタンが表示されます。
 テキストボックスに日付を入力することもできますし、カレンダーから指定することもできます。
 SelectedDateFormatプロパティは日付テキストの書式設定でShort(デフォルト)の場合は「2017/07/01」の様に表示されます。
 Longの場合は「2017年7月2日」の様に表示されます。
 IsTodayHighlightedプロパティがTrueの場合はカレンダー表示時に今日の日付がハイライトされます。
 FirstDayOfWeekプロパティを変更するとカレンダーの週初めの曜日を変更できます。
 DisplayDateStartとDisplayDataEndはカレンダーに表示する範囲を指定できます。
 画像のカレンダーは7/1から7/25までを表示させるようにしているので、26日以降が非表示になっています。
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon