JQuery UI DatePickerで過去月を初期表示

DatePickerとは

• JQuery UI のプラグイン
• カレンダを表示して日付選択を可能にする
• オプションを使って色々設定・カスタマイズ可能

javascript

    // 基本
    // dateFormat:フォーマット指定（yyyy/mm/dd）
    // showOn:これを書いておくとボタンが表示される
    // buttonText:これを書いておくとボタンのテキストが表示される
    //    デフォルトは「...」
    $('#dateText').datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:     "button",
        buttonText: "選択"
    });

HTML

    <!-- これだけ -->
    <input  type="text" id="dateText">

特定の年月より過去の日付だけを表示させたい

• textboxの中に値が入っていれば、その日付のカレンダが表示されるが、下記のような仕様で制御したい
  • textboxの初期値は空、かつ、カレンダ入力時は特定の月のカレンダを初期表
  • しかも、それより未来の日付は入力させたくない

javascript

    // 「年月」で選択されているyyyy/mmより後の年月日は
    // カレンダに表示しないよう制御
    // 「年月」の年月の翌月の1日からマイナス1日することで
    // 「年月」の最終年月日を取得
    calDate = new Date($("#yearMonth").val() + "/01")
    calDate.setMonth(calDate.getMonth() + 1);
    calDate.setDate(calDate.getDate() - 1);

    // maxDate: 入力できる最大年月を指定
    // numberOfMonth: ついでに、カレンダを2か月分一気に表示
    // デフォルトでは当日以降のカレンダが表示されるが、
    // maxDateを指定しておけば、その月以前の複数の月が表示される
    $('#dateText').datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:     "button",
        buttonText: "選択",
        numberOfMonths: 2,
        maxDate: new Date(calDate)
    });

HTML

    <div id="oneOneLabel">年月</div>
    <select id="yearMonth" >
        <option value="2014/01">2014/01</option>
        <option value="2014/02">2014/02</option>
        <option value="2014/03">2014/03</option>
        <option value="2014/04">2014/04</option>
        <option value="2014/05">2014/05</option>
        <option value="2014/06" selected>2014/06</option>
    </select>

    <div id="oneTwoLabel">年月日</div>
    <input  type="text" id="dateText">

• これで、「年月」で選択された年月以前2か月をカレンダで表示するようになるはず。