HARD DAY'S NIGHT別館

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

jQuery UI Datepicker(カレンダー)簡単サンプル2

[...] ボタンをクリックすると2ヶ月分カレンダーが表示されます。日付を選ぶとテキストボックスに入力されます。

日付:

コード


$(function() {

/*
    $("#datepicker").datepicker({
        showOn: 'button',           // ボタンをクリックでカレンダー表示
        autoSize: true,             // テキストボックスのサイズ自動調整
        dateFormat: 'yy-mm-dd',     // 日付フォーマット 例:2011-06-24
        numberOfMonths: [1,2],      // 2ヶ月分を表示
        showButtonPanel: true,      // カレンダーの下部にボタンパネル表示
        duration: 'slow',           // 表示を遅く
        showAnim: 'fade',           // fade アニメーションで表示
        maxDate: '+1y',             // 最大1年先の日付が選択可能
        minDate: '-1y',             // 過去1年まで日付が選択可能
    });
*/
    $("#datepicker").datepicker();
    $("#datepicker").datepicker("option", "showOn", 'button');
    $("#datepicker").datepicker("option", "autoSize", 'true');
    $("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd');
    $("#datepicker").datepicker("option", "numberOfMonths", [1,2]);
    $("#datepicker").datepicker("option", "showButtonPanel", 'true');
    $("#datepicker").datepicker("option", "duration", 'slow');
    $("#datepicker").datepicker("option", "showAnim", 'fade');
    $("#datepicker").datepicker("option", "maxDate", '+1y');
    $("#datepicker").datepicker("option", "minDate", '-1y');
});
	

HTMLコード


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