HARD DAY'S NIGHT別館

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

jQuery UI Datepicker(カレンダー)サイズの変更 サンプル

jQuery UI Datepicker(カレンダー)サイズを変更する方法をご紹介します。

Datepicker のフォントサイズを小さくすることでカレンダーが小さくなります。

インライン表示

日付:


ボタンクリックで表示

日付:

コード


$(function() {
    // インライン表示
    $("#datepicker").datepicker({
        onSelect: function(dateText, inst) {
            $("#date_val").val(dateText);
        }
    });

    // ボタンクリックで表示
    $("#datepicker2").datepicker({
        showOn: "both",
        // カレンダー表示時、下の div 枠を高さを高くしてカレンダーで隠れ内容にする
        beforeShow: function(input, inst) {
            $("#dummy").animate({ height: '+=120' }, 500);
        },
        // 下の div 枠を高さを戻す
        onClose: function() {
            $("#dummy").animate({ height: '-=120' }, 500);
        }
    });
});
	

HTMLコード


<style>
    /* Datepicker のフォントサイズを小さくする */
    div.ui-datepicker {
        font-size: 70%;
    }
    #dummy {
        height:10px;
    }
</style>

<p>インライン表示</p>
<div>
    <div id="datepicker"/>
    <div>日付: <input type="text" id="date_val"/></div>
</div>
<br/>
<br/>
<p>ボタンクリックで表示</p>
<div>
    <p>日付: <input type="text" id="datepicker2"/></p>
</div>
<div id="dummy">
</div>