HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

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

jQuery UI Datepicker(カレンダー)表示の位置は通常テキストボックスの下に表示されます。
このサンプルではデフォルトの表示位置を jQuery Position を使って変更する方法をご紹介します。

Datepicker の左下(left bottom)をテキストボックスの左上(left top)に表示

日付:

Datepicker の右上(right top)をテキストボックスの右下(right bottom)に表示

日付:

コード


$(function() {
    // 1番目のカレンダー
    $("#datepicker").datepicker({
        showOn: "button",
        beforeShow: function(input, inst) {
            var calendar = inst.dpDiv;
            setTimeout(function() {
                calendar.position({
                    my: 'left bottom',
                    at: 'left top',
                    of: input
                });
            }, 1);
        }
    });
    // 2番目のカレンダー
    $("#datepicker2").datepicker({
        showOn: "button",
        beforeShow: function(input, inst) {
            var calendar = inst.dpDiv;
            setTimeout(function() {
                calendar.position({
                    my: 'right top',
                    at: 'right bottom',
                    of: input
                });
            }, 1);
        }
    });
});
	

HTMLコード


<p>Datepicker の左下(left bottom)をテキストボックスの左上(left top)に表示</p>
<div>
	<p>日付: <input type="text" id="datepicker"/></p>
</div>

<p>Datepicker の右上(right top)をテキストボックスの右下(right bottom)に表示</p>
<div style="margin-left:100px;">
	<p>日付: <input type="text" id="datepicker2"/></p>
</div>