読者です 読者をやめる 読者になる 読者になる

jQuery datePicker をインライン + 複数選択で使う

jQuery

仕事で複数選択できるカレンダーが必要になり、jQuery プラグインdatePickerを使ってみましたが、バグなのか中々うまく行きませんでしたが何とか動くようになりました。


jQueryプラグインのカレンダー(date picker)は幾つかありますが、複数選択できそうなのは datePicker だけのようです(他にあるんかも?)

ただし、datePickerをインラインで使うと、データ追加後の再表示でカレンダーのヘッダー部分が残るバグがありました。
これは、カレンダーのdivをempty()にする事で回避できましたが、未だにJavascriptには不慣れなのでだいぶ時間を使ってしまいました ^^);

それ以外にも、選択した日付の取得で、たまに NaN が取得されるなどの問題もあります。なぜかなぁ・・・・

出来たサンプルコード

選択した日付を cookieに保存するようになっています。

<html>
<head>
<script type="text/javascript" src="./firebug.js"></script>
<script type="text/javascript" src="./jquery-1.2.6.js"></script>
<script type="text/javascript" src="./date.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>
<script type="text/javascript" src="./jquery.datePicker-2.1.1.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./datePicker.css">
</head>
<body>
<div id="datepicker"></div>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('#datepicker')
      .datePicker({
        inline:true,
        selectMultiple:true
        });
    getDatesCookie($('#datepicker'));
    $('#datepicker').empty().dpDisplay();
  });

getDatesCookie = function(obj) {
  dates = $.cookie('dates').split(',');
  for (i in dates) {
    obj.dpSetSelected(dates[i]);
  }
}

setDatesCookie = function(dates) {
  s = ''
  d = new Date();
  for (i in dates) {
    if (s != '')  s += ',';
    if (! isNaN(dates[i])) {
      d.setTime(dates[i]);
      s += d.asString();
    }
  }
  $.cookie('dates', s); 
}
</script>

<input type="button" value="Set cookie" onClick="setDatesCookie($('#datepicker').dpGetSelected());">
<input type="button" value="Clear cookie" onClick="$.cookie('dates', '');">
</body>
</html>