カレンダー試行錯誤編:datetimepicker

[カレンダー作成関連メモ](http://qiita.com/tagosaku324/private/63af3524c90aaa5c2c96) から　試行錯誤編：datetimepicker

[DateTimePicker](http://xdsoft.net/jqplugins/datetimepicker/)のdownload (zip).から入手。
私はzipを選択。datetimepicker-master.zip　をダウンロードした
>![スクリーンショット 2016-06-07 15.27.48.png](https://qiita-image-store.s3.amazonaws.com/0/39911/9aeb2c50-916d-fde7-d6e0-b6fc110d4240.png)

解凍した中のファイル、index.htmlを実行してみるとサンプルが並んでいるのでこれらのソースを参考にするのが手っ取り早い。
index.htmlと同じ階層に``jquery.datetimepicker.js``があるが、
```
$('#datetimepicker').datetimepicker({});
```
を使いたい場合、``build/jquery.datetimepicker.full.js``を使わないとjavascriptエラーがおきる。
![スクリーンショット 2016-06-07 16.24.24.png](https://qiita-image-store.s3.amazonaws.com/0/39911/7f3c24ae-82c1-5c36-f214-027296d8bbc3.png)


#カレンダーでしてみること
・指定日をハイライトする
・指定日に紐付いた指定時間だけ表示させてみる

今回解凍した中で使用するファイルは以下のみ
- jquery.js
- build/jquery.datetimepicker.full.min.js　（full.jsよりサイズが小さい）
- jquery.datetimepicker.css

サンプルを参考にソースを作る。このソースが基本。

```html:index.html
<!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>
```
実行してみるとこんな感じ。
![スクリーンショット 2016-06-07 16.32.16.png](https://qiita-image-store.s3.amazonaws.com/0/39911/a399e74b-b3f0-fa32-0ccd-9464bf5138cc.png)

### 日本語化設定をする

```js:index.html
$.datetimepicker.setLocale('ja');　　//<-これを追加 
$('#datetimepicker').datetimepicker();
```
![スクリーンショット 2016-06-07 17.00.02.png](https://qiita-image-store.s3.amazonaws.com/0/39911/b880e8bc-cdec-0b81-a3a1-440babbea480.png)

### 指定日をハイライトにする
``beforeShowDay:function(){}``を使う。これは表示されるカレンダーの日をループしてくれる。
2016年6月　を表示している場合、5/29〜7/2まで カレンダーのマス目が対象になる。
その日ごとに設定をすることが可能。

たとえば、Json形式で指定したい日の配列をもたせて指定日だけハイライトにするような処理はこんな感じでできる

```js:
$.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;
      }
    } 
  }     
});
```
![スクリーンショット 2016-06-07 17.41.46.png](https://qiita-image-store.s3.amazonaws.com/0/39911/94baeb16-2b61-f028-bc62-f2b025524329.png)

**<気をつけたいこと>**

- 日付の変換
マス目を舐める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形式で時刻も含めた配列をもたせて指定日以外はリンクがでない。指定した時間だけ時間スクロールに出すような処理はこんな感じでできる

```js:
$.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"]と時間配列がくる
    })          
  }
});
```
![スクリーンショット 2016-06-07 18.26.59.png](https://qiita-image-store.s3.amazonaws.com/0/39911/9a6f9609-5734-c90e-9d2a-1df10073bd88.png)

**<改良点>**

- 指定日を選択した時、時間帯スクロールがデフォルト一番上になってない。スクロールしきっているので指定時間が見えなくなってる。

### 応用
- 月を変更した時に動作をさせたい：　onChangeMonth
- 時間を選択した時に動作させたい：onSelectTime

など、datepickerより少ないが、いろいろ用意はされている。
何が使えるのかは``jquery.datetimepicker.full.js``の設定オプションをみてみるのが一番早い。



参考：[日付や時間を直感的に選択できるDateTimePicker](http://ascii.jp/elem/000/000/883/883101/)