DatePickerで「年月」に合わせてカレンダを制御

「年月」に合わせてカレンダを制御

• http://qiita.com/fujimohige/items/77321c15fb89a822806d
• 前に書いた↑の内容があまりにアレなので、「年月」と連動するよう変更

javascript

$(function() {
    // カレンダ制御
    setDatePicker();
});

// 年月が変更されて、整合が取れなくなったらカレンダクリア
function changeYearMonth() {
    if( $("#oneOneData").val() != $("#dateText").val().substring(0,7)) {
        $("#dateText").val("");

        // カレンダリフレッシュ
        $('#dateText').datepicker("destroy");
        setDatePicker();

    }
};

function setDatePicker() {

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

    // datePickerのメイン制御
    $('#dateText').datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:     "button",
        buttonText: "選択",
        numberOfMonths: 1,
        minDate: minCal,
        maxDate: maxCal
    });

}


// 月度と年月日の整合性チェック
function checkDate() {
    var vDate = $("#dateText").val();
    if (vDate == "" ) {
        // 年月日がクリアされた場合は何もしない
    } else {
        if (vDate.substring(0,7) != $('#oneOneData').val()) {
            // 月度と年月日が不整合の場合はメッセージを表示（入力値のクリアは行わない）
            alert("年月と年月日が揃っていません");
        }
    }
}

HTML

    <div id="oneOneLabel">年月</div>
    <select id="oneOneData" onchange="changeYearMonth();">
        <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" selected>2014/05</option>
    </select>

    <div id="oneTwoLabel">年月日</div>
    <div id="hoge">
        <input type="text" id="dateText" onchange="checkDate();"  >
    </div>

• jsの作法がいまだに全くわかりません。