カレンダー作成関連メモ から 試行錯誤編：datetimepicker
DateTimePickerのdownload (zip).から入手。
私はzipを選択。datetimepicker-master.zip をダウンロードした
解凍した中のファイル、index.htmlを実行してみるとサンプルが並んでいるのでこれらのソースを参考にするのが手っ取り早い。
index.htmlと同じ階層にjquery.datetimepicker.jsがあるが、
$('#datetimepicker').datetimepicker({});
を使いたい場合、build/jquery.datetimepicker.full.jsを使わないとjavascriptエラーがおきる。
カレンダーでしてみること
・指定日をハイライトする
・指定日に紐付いた指定時間だけ表示させてみる
今回解凍した中で使用するファイルは以下のみ
- jquery.js
- build/jquery.datetimepicker.full.min.js （full.jsよりサイズが小さい）
- jquery.datetimepicker.css
サンプルを参考にソースを作る。このソースが基本。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.full.min.js"></script>
<title>カレンダーdatetimepicker</title>
<h1>カレンダーdatetimepicker</h1>
</head>
<body>
<input type="text" id="datetimepicker"/>
<script>
$('#datetimepicker').datetimepicker();
</script>
</body>
</html>
実行してみるとこんな感じ。
日本語化設定をする
$.datetimepicker.setLocale('ja'); //<-これを追加
$('#datetimepicker').datetimepicker();
指定日をハイライトにする
beforeShowDay:function(){}を使う。これは表示されるカレンダーの日をループしてくれる。
2016年6月 を表示している場合、5/29〜7/2まで カレンダーのマス目が対象になる。
その日ごとに設定をすることが可能。
たとえば、Json形式で指定したい日の配列をもたせて指定日だけハイライトにするような処理はこんな感じでできる
$.datetimepicker.setLocale('ja');
//指定したい日
var eventDates = ["2016/6/5","2016/6/10","2016/6/15","2016/6/20","2016/6/25","2016/6/30"];
$('#datetimepicker').datetimepicker({
beforeShowDay:function(date){ //dateにマス目5/29〜7/2の日付が入る
var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
for(var i=0; i<eventDates.length; i++){
if(eventDates[i] == d ){
return ["xdsoft_highlighted_mint"]; //背景のスタイルを返す
}else{
continue;
}
}
}
});
<気をつけたいこと>
日付の変換
マス目を舐めるdate変数は
「date = Sun May 29 2016 12:00:00 GMT+0900 (JST) {}」
こんな感じの値が入っているので、今回のように年月日を分解してヒットさせるなり、new Date()を使ってjsonデータを変換させるなりする必要がある。getDateなどを使う場合、一桁数字に注意
getDateなどは０埋め指定がないので、自分で用意しないとならない。
var day = ("0" + (date.getDate()) ).slice(-2); // 5->05 にするみたいな
指定日に紐付いた時間帯だけ表示する
onSelectDate:function(){}を使う。これは日を選択した時に実行してくれる。
たとえば、Json形式で時刻も含めた配列をもたせて指定日以外はリンクがでない。指定した時間だけ時間スクロールに出すような処理はこんな感じでできる
$.datetimepicker.setLocale('ja');
var eventDates = {"2016/6/5":["12:00","13:30"],"2016/6/10":["14:40"],"2016/6/15":["2:15","4:20"],"2016/6/20":["03:55","16:07"],"2016/6/25":["17:00"],"2016/6/30":["19:00"]};
$('#datetimepicker').datetimepicker({
beforeShowDay:function(date){
var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
if(eventDates[d]){
return [true,"xdsoft_highlighted_mint"]; //trueはリンクあり
}else{
return [false]; //falseはりんくなし、disable
}
},
onSelectDate:function( date ){
var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
this.setOptions({
allowTimes: eventDates[d] //["12:00","13:30"]と時間配列がくる
})
}
});
<改良点>
- 指定日を選択した時、時間帯スクロールがデフォルト一番上になってない。スクロールしきっているので指定時間が見えなくなってる。
応用
- 月を変更した時に動作をさせたい： onChangeMonth
- 時間を選択した時に動作させたい：onSelectTime
など、datepickerより少ないが、いろいろ用意はされている。
何が使えるのかはjquery.datetimepicker.full.jsの設定オプションをみてみるのが一番早い。