Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

カレンダー作成関連メモ から 試行錯誤編: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

tagosaku324
LAPPの環境化でのWEb構築をメインにしています。 メイン以外にもいろいろ挑戦をしようと試みている最中ですので、まだまだ分からないことだらけです。 プログラマーとして小さな一歩を積み重ねたいと思っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした