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

DatePicker のインライン表示

jQuery UI の DatePicker がインライン表示できることに全然気づいていなかったのでメモ。
とりあえず2か月分のカレンダーをインラインで表示するサンプルを書いてみました。
カレンダーで選択された日付を hidden 要素にセットしてみました。

<html>
<head>
  <title>DatePicker インライン表示</title>
  <link href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>&#160;
</head>
<body>
  <div id="datepicker"></div>
  <input type="hidden" id="selectedValue" />
  <button type="button" id="btnShow">選択された日付を表示する</button>

  <script type="text/javascript">
  $(document).ready(function() {
    $("#datepicker").datepicker({
      numberOfMonths: 2,
      onSelect: function(dateText, inst) { $("#selectedValue").val(dateText); }
    });
    $("#btnShow").click(function() { alert($("#selectedValue").val()); });
  });
  </script>
</body>
</html>

上の HTML をブラウザで表示するとこんな感じ。

日付を選択してボタンを押すとこんな感じ。