jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法

フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」で表示されるカレンダーのコードは、</body>の直前に挿入されます。

※ui-datepicker-divというIDが付いている箇所がカレンダーのソースです。

カレンダーが挿入される位置を変えることで、表示位置や装飾を調整したいこともあるかと思います。

そんな時のために、jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法をご紹介したいと思います。

jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法

※jQuery UI Datepickerの導入手順については、こちらの記事をご参照ください。

カレンダーを任意の場所に挿入するには、beforeShowオプションの中でappendを使います。beforeShow内に記述した処理は、カレンダーが表示される直前に実行されます。

まず、HTML側でカレンダーを挿入する要素を用意しておきましょう。

<div class="datepicker-show"></div>

その上で、jQuery UI Datepickerを実行するためのスクリプトを以下のように変更します。

<script>
$(function() {
  $('#datepicker').attr('readonly', 'readonly');
  $('#datepicker').datepicker({
    showOn: 'both',
    buttonImageOnly: true,
    beforeShow: function() { //任意の場所にカレンダーを挿入
      $('.datepicker-show').append($('#ui-datepicker-div'));
    }
  });
});
</script>

以下の部分が該当の箇所です。カレンダーを表示する時に、.datepicker-showにカレンダーの要素全体を挿入しています。

beforeShow: function() {
  $('.datepicker-show').append($('#ui-datepicker-div'));
}

ソースを確認すると、ちゃんと.datepicker-showの中に#ui-datepicker-divが入っていることがわかります。

あとがき

かなり簡単ですね。任意の場所にカレンダーを挿入したい時は、ぜひお試しください。