datepickerの使用方法について解説!!(プロパティ編)

Web技術

サイト管理人の’kai’です。( `・∀・´)ノヨロシク

今回は、”datepicker”のプロパティ設定について投稿していきます。

この記事を見れば、datepickerを用いたカレンダー表示を行う際に使用用途に合ったカスタマイズを行っていけます。

datepickerについて

先ずは、datepickerについて以下の画像が機能を利用して表示させたカレンダーになります。プロパティ設定やデザイン設定を施していますのでイメージとして持ってもらえればと思います。

プロパティについて

それでは、プロパティの設定について記載していきます。

以下のリストがプロパティの設定内容となります。

プロパティ名設定内容設定内容サンプル
currentTextボタンパネルの当日移動ボタンのテキスト名設定。
イメージ画像では表示していませんが、下部に枠を表示させて当日へ移動する機能を利用することが出来ます。その際の表示名となります。
‘今日’
closeTextボタンパネルの画面クローズボタンのテキスト名設定。
イメージ画像では表示していませんが、下部に枠を表示させてカレンダーを閉じる機能を利用することが出来ます。その際の表示名となります。
‘閉じる’
prevText前移動のテキスト名設定。
前月へ移動する際のボタンへマウスを当てた際に表示する名称を設定します。
‘<前’
nextText後移動のテキスト名設定。
次月へ移動する際のボタンへマウスを当てた際に表示する名称を設定します。
‘次>’
monthNames月の名称設定。[‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]
monthNamesShort月の省略名称設定。[‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]
dayNames曜日の名称設定。[‘日曜日’, ‘月曜日’, ‘火曜日’, ‘水曜日’, ‘木曜日’, ‘金曜日’, ‘土曜日’]
dayNamesShort曜日の省略名称設定。[‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’]
dayNamesMin曜日の最小名称設定。[‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’]
weekHeader週の名称設定。‘週’
yearSuffix年の名称設定。‘年’
dateFormat日付フォーマット設定。‘yy/mm/dd’
constrainInput日付フォーマットで入力制限を行うかどうかの設定。
連動しているテキストに入力しているフォーマットが指定の内容と合っているかチェックします。
true
showOnカレンダー表示方法の設定。
(button:ボタン ,focus:フォーカス ,both:両方)
‘both’
firstDay週初めの曜日設定。
(0:日曜日~6:土曜日)
0
showMonthAfterYear月表示を年表示の後ろに表示するかどうかの設定。true
showOtherMonths表示月以外の日付を選択出来るかの設定。
例えば、イメージ画像で言うと、7月を表示していて6/30や8/1を選択出来るかどうかの設定となります。
true
selectOtherMonths月のプルダウン表示の場合、表示月以外の日付を選択出来るかの設定。true
changeYear年をプルダウン表示に設定。true
changeMonth月をプルダウン表示に設定。true
numberOfMonthsカレンダー表示でまとめて表示する月数の設定。1
stepMonths前後移動のボタンで移動する月数の設定。カレンダーの表示数に合わせて変更することが適切です。1
showButtonPanelカレンダー下部にボタンパネルを表示するかどうかの設定。true
gotoCurrent当日移動の移動日付を選択値とするかの設定。true
defaultDate初期表示の日付を設定。
(日付指定、または、本日日付からの差異設定)
‘+1m +7d’
maxDate最大の日付を設定。
(日付指定、または、本日日付からの差異設定)
new Date(‘2020/3/31’)
minDate最小の日付を設定。
(日付指定、または、本日日付からの差異設定)
new Date(‘2019/4/1’)
hideIfNoPrevNext最大最小の日付を設定した場合、前後移動を制限するかどうかの設定。true
buttonImageボタンに表示する画像イメージの設定。‘../Content/img/calendar.jpg’
buttonTextボタンに表示する文言の設定。‘カレンダーから選択’
buttonImageOnlyボタンに画像を表示するかどうかの設定。true
durationカレンダーの表示速度設定。
(’slow’ ,’normal’ ,’fast’、または、数値の設定)
‘slow’
showAnimカレンダーのアニメーション設定。
(’show’ ,’slideDown’ ,’fadeIn’)
‘slideDown’

まとめ

“datepicker”のプロパティ設定についてまとめました。

使用用途に合わせてプロパティを設定していけば、より良いシステム開発を行っていけます。

システム開発の参考になればと思います。