16
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

カレンダー作成関連メモ から 試行錯誤編:datetimepicker

DateTimePickerのdownload (zip).から入手。
私はzipを選択。datetimepicker-master.zip をダウンロードした

スクリーンショット 2016-06-07 15.27.48.png

解凍した中のファイル、index.htmlを実行してみるとサンプルが並んでいるのでこれらのソースを参考にするのが手っ取り早い。
index.htmlと同じ階層にjquery.datetimepicker.jsがあるが、

$('#datetimepicker').datetimepicker({});

を使いたい場合、build/jquery.datetimepicker.full.jsを使わないとjavascriptエラーがおきる。
スクリーンショット 2016-06-07 16.24.24.png

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

今回解凍した中で使用するファイルは以下のみ

  • jquery.js
  • build/jquery.datetimepicker.full.min.js (full.jsよりサイズが小さい)
  • jquery.datetimepicker.css

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

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

日本語化設定をする

index.html
$.datetimepicker.setLocale('ja');  //<-これを追加 
$('#datetimepicker').datetimepicker();

スクリーンショット 2016-06-07 17.00.02.png

指定日をハイライトにする

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;
      }
    } 
  }     
});

スクリーンショット 2016-06-07 17.41.46.png

<気をつけたいこと>

  • 日付の変換
    マス目を舐めるdate変数は
    「date = Sun May 29 2016 12:00:00 GMT+0900 (JST) {}」
    こんな感じの値が入っているので、今回のように年月日を分解してヒットさせるなり、new Date()を使ってjsonデータを変換させるなりする必要がある。

  • getDateなどを使う場合、一桁数字に注意
    getDateなどは0埋め指定がないので、自分で用意しないとならない。

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"]と時間配列がくる
    })          
  }
});

スクリーンショット 2016-06-07 18.26.59.png

<改良点>

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

応用

  • 月を変更した時に動作をさせたい: onChangeMonth
  • 時間を選択した時に動作させたい:onSelectTime

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

参考:日付や時間を直感的に選択できるDateTimePicker

16
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?