javascript - 月と年のみの日付ピッカー

Question

ユーザーが日付ピッカーから月と年のみを選択できる日付ピッカーが必要であり、前の日付ピッカーから選択した月と年で次の日付ピッカーを制限する必要もあります..

誰でも私を助けることができますか？

Answer 1

ショーンの答えはかなり良いです。日の選択も無効にしたい場合は、別のアプローチを使用できます。このフィドルで結果を確認できます。

カレンダーは非表示になっているため、月と年しか選択できません。最初の日付ピッカーで日付を選択すると、2 番目の日付ピッカーの minDate が適応されます。

編集

jQuery datepicker は、dateformat が日付を提供しない場合、深刻な問題を抱えています。コードを変更して動作させました。唯一のことは、日付ピッカーを開くときに、日付を適切な形式に変換する必要があることです。新しいフィドルを見てください。

HTML:

<p>Date: <input type="text" id="first-datepicker"/></p>
<p>Date: <input type="text" id="second-datepicker"/></p>

CSS:

#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-current
{
    display: none !important;
}

ジャバスクリプト:

$('#first-datepicker').datepicker({
    changeYear: true,
    changeMonth: true,
    beforeShow: function (input, inst) {
        setMyDate(inst);
    },
    onClose: function (dateText, inst) {
        saveMyDate(inst);

        var secondDatePicker = $('#second-datepicker').data('datepicker');
        var dateSetted = secondDatePicker.input.data('date-setted');

        setMyDate(secondDatePicker);

        secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));     

        if (dateSetted == true) {
            saveMyDate(secondDatePicker);
        };
    }
});

$('#second-datepicker').datepicker({
    changeYear: true,
    changeMonth: true,
    beforeShow: function (input, inst) {
        setMyDate(inst);
    },
    onClose: function (dateText, inst) {
        saveMyDate(inst);
    }
});

function saveMyDate(inst) {
    inst.selectedDay = 1;
    inst.input.data('year', inst.selectedYear);
    inst.input.data('month', inst.selectedMonth);
    inst.input.data('day', inst.selectedDay );

    var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
    inst.input.datepicker('setDate', date );
    formatDate(inst, date);
    inst.input.data('date-setted', true);
};

function setMyDate(inst) {
    var dateSetted = inst.input.data('date-setted');

    if (dateSetted == true) {
        var year = inst.input.data('year');
        var month = inst.input.data('month');
        var day = inst.input.data('day');

        var date = new Date(year, month, day);
        inst.input.datepicker('setDate', date );
    };
};

function formatDate(inst, date) {
    var formattedDate = $.datepicker.formatDate('MM - yy', date);
inst.input.val(formattedDate);
};

Answer 2

jQuery datepickerを変更して、ユーザーが特定の日付のみを選択できるようにすることができます。この場合、月の最初に制限することができます。

$(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst
})

function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

オプションを変更して、日付を別の方法で表示することもできます。

$(".datepicker").datepicker({
    dateFormat: 'mm/yy'
});

2つを組み合わせると、次のようになります。

$(".datepicker").datepicker({
    beforeShowDay: disableDaysExceptFirst,
    dateFormat: 'mm/yy'
})

function disableDaysExceptFirst(date) {
    if (date.getDate() != 1) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

これを使用して、2番目の日付ピッカーを制限することもできます。

var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to

$("#myFirstDatePicker").datepicker({
    beforeShowDay: disableAllExceptCurrentMonth,
    dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});

function disableAllExceptCurrentMonth(date) {
    if (date.getMonth() != restrictedMonth) {
        return [false, date.getDate().toString() + "_day"];
    }
    return [true, ""];
}

Answer 3

この monthpicker jquery ウィジェットを使用できます: https://github.com/lucianocosta/jquery.mtz.monthpicker