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>