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

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

JavaScript学習日記 その0003-01 jQuery UIのDatepicker | 曜日ごとに色を変える、任意の座表に絶対配置する、インラインに配置する

制作 javascript

参考にさせて頂いたページ

絶対表示の位置変更について position()

jQuery UI Datepicker(カレンダー)表示位置の調整 | Eniod's Blog

jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル

.position() | jQuery UI API Documentation

jQuery UI の Position メソッドで要素の表示位置を指定する

Datepickerについて

Datepicker Widget | jQuery UI API Documentation

datepickerにおけるオプション(datepicker) | IT情報サイト - 明日はどっと混む

jQuery UI Datepicker(カレンダー)土・日・祝日の表示色の変更

はじめに

これまでなんとなく使ってきたけど、いざ配置場所を変えようしたり、曜日ごとに色を変えようと思ったらよくわからなかったので改めて学習した。

jQuery UI のDatepickerでカレンダーを表示して、positionで表示位置を調整したり、インラインで配置することで色々なデザインに対応できそう。

オプションの一覧についても、datepickerにおけるオプション(datepicker) | IT情報サイト - 明日はどっと混むに日本語で書いてあったのでありがたい。

こちらは公式でメソッドについても書いてある。 Datepicker Widget | jQuery UI API Documentation

サンプルコード

例として以下の通り。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );

    $( "#datepicker" ).datepicker({
      showOn: 'both',
      showAnim: 'fadeIn',
      numberOfMonths: 1,
      buttonImage: 'img/hoge.gif',
      buttonImageOnly: true,
      minDate: '0',
      maxDate: '+3m',
      dateFormat: 'yy/mm/dd',
      beforeShowDay: function(date){
        var calendar = $('#ui-datepicker-div');
          setTimeout(function() {
            calendar.position({
              my: 'left top', // カレンダーのここを
              at: 'center bottom',// ofで指定した要素のここに
              of: '#here'
            });
        }, 1);

        // 日曜日
        if (date.getDay() == 0) {
          return [true, 'sunday']; //[クリッカブルかどうか, クラス名]
        }
        // 土曜日
        if (date.getDay() == 6) {
          return [true, 'saturday'];
        }
        // 平日
        return [true, ''];
      }
    });

    $( "#datepicker2" ).datepicker({
      showOn: 'both',
      showAnim: 'fadeIn',
      numberOfMonths: 1,
      buttonImage: 'img/hoge.gif',
      buttonImageOnly: true,
      minDate: '0',
      maxDate: '+3m',
      dateFormat: 'yy/mm/dd',
      beforeShowDay: function(date){
        var calendar = $('#ui-datepicker-div');
          setTimeout(function() {
            calendar.position({
              my: 'left top', // カレンダーのここを
              at: 'center bottom',// ofで指定した要素のここに
              offset: '100px 30px',
              of: '#here2'
            });
        }, 1);

        // 日曜日
        if (date.getDay() == 0) {
          return [true, 'sunday']; //[クリッカブルかどうか, クラス名]
        }
        // 土曜日
        if (date.getDay() == 6) {
          return [true, 'saturday'];
        }
        // 平日
        return [true, ''];

      }
    });

    $( "#datepicker3" ).datepicker({
      onSelect: function(dateText, inst) {
        $("#date_val").val(dateText);
      }
    });

  });
  </script>
</head>
<body>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>日付: <input type="text" id="datepicker" /> <input type="text" id="datepicker2" /></p>
<br><br><br>

<span id="here">absolute1</span>
<br><br><br>

<span id="here2">absolute2</span>
<br><br><br><br><br><br><br><br><br><br><br><br>

<p>インライン配置されるカレンダー(絶対配置されない)</p>
<div id="datepicker3">
  <input id="date_val" type="text">
</div>
<p id="test"></p>
</body>
</html>

.position()のオプション

jQuery UI の Position メソッドで要素の表示位置を指定するによると、以下のようなオプションが設定できるらしい。

  • my
  • at
  • of
  • offset
  • collision
  • using

今回はここまで。