今回はWEBサイトのフォームなどの日付入力をサポートしてくれるjQueryで動くカレンダー『DateTimePicker』です。
日付を選択する項目などで、第一希望何月何日の何時〜、第二希望何月何日の何時〜のような箇所をタップ or クリックするとカレンダーが立ち上がり、ワンプッシュで日付が入力されるという、とても便利な機能です。
デフォルトでも十分役に立つスケジュールカレンダーですが、「土日は選択できる時間を変えたい！」「水曜日は定休日なので選択できないようにしたい！」などの希望がある場合はjQueryのカスタマイズが必要になります。
今回は以下の４点を対応してみましたので、備忘録として記載しておきます。
『過去の日付が選べないように』
『日曜日も選べないように』
『時間帯を10時〜18時の間で選択できるように』
『土曜日は14時まで』
これはデフォルトのカレンダーです。
過去の日付も日曜日も選択できてしまいます。
先月と来月の日付は薄いグレーになっていますが、クリックすると選択できてしまいます。
選べる時間も24時間対応サービス精神旺盛です。
フォームを設置したhtmlのscript部分に、以下のスクリプトを記述をします。
$(‘input#pickdate’).datetimepicker({
format: ‘Y-m-d H:s’,
//過去の日付を選択できないようにする記述。
minDate: 0,
//日曜日は選択できないようにしますよ ここから
beforeShowDay: function(date) {
if(date.getDay() == 0) {//0は日曜日を指します。
return [false];
} else {
return [true];
}
},
//平日は8時〜18時まで。土曜日は8時〜14時まで。それぞれ1時間毎に選択 ここから
allowTimes: new Date().getDay() == 6 ? [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′] : [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′, ’15:00′, ’16:00′, ’17:00′, ’18:00′],//6は土曜日
onChangeDateTime:function(dp,$input){
if (dp.getDay() == 6) {//6は土曜日を指します。
this.setOptions({
allowTimes: [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′]
});
} else {
this.setOptions({
allowTimes: [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′, ’15:00′, ’16:00′, ’17:00′, ’18:00′]
});
}
}
});
過去の日付と日曜日が選択できなくなりました！
デフォルトのカレンダーを同じようなグレー文字ですが、選択できません。
対応した日が7/7でしたので、7/6以降がグレー文字になっています。
土曜日を選択すると、選択できる時間帯が14時までになっています。
DateTimePicker
こちらからダウンロード可能です。
また、ページ下の方に、色々とオプションに使えるデータがあります。
また他にもいろんな方が色んな方法で設置の仕方を掲載してくれているので、そちらも参考にすると、なんとかできることがあります。
当日から二日後から選択できるように、記述を追記しました。
１〜６行目辺りを追記しています。
var d = new Date();//二日後から開始セット
d.setDate(d.getDate() + 2);//二日後から開始セット
$(‘input#schedule’).datetimepicker({
dateFormat: ‘yy/mm/dd (DD)’,//日付のフォーマット
minDate : ‘-1969/12/30′,//二日後からしか選べない
defaultDate: d,//二日後から開始セット
beforeShowDay: function(date) {
if(date.getDay() == 0) {
return [false];
} else {
return [true];
}
},
allowTimes: new Date().getDay() == 6 ? [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′] : [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′, ’15:00′, ’16:00′, ’17:00′, ’18:00′],
onChangeDateTime:function(dp,$input){
if (dp.getDay() == 6) {
this.setOptions({
allowTimes: [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′]
});
} else {
this.setOptions({
allowTimes: [’10:00′, ’11:00′, ’12:00′, ’13:00′, ’14:00′, ’15:00′, ’16:00′, ’17:00′, ’18:00’]
});
}
}
});
規模の大小に関わらず、
ゼロからの制作 〜 既存ホームページのリニューアルまで、
「見せ方の提案が欲しい！」「費用を抑えて欲しい！」「早く納品して欲しい！」など、
状況に応じたオリジナルプランをご用意します。
works IDのホームページ制作、小回りが利きます。
