日期選擇器只有月份和年份

Question

我想要一個日期選擇器，用戶只能從日期選擇器中選擇月份和年份，我還需要使用從前一個日期選擇器中選擇的月份和年份來限制下一個日期選擇器。

誰能幫我嗎？

Answer 1

肖恩的回答非常好，如果你也想禁用日期選擇，你可以使用不同的方法，你可以在這個小提琴中看到結果：

日歷是隱藏的，所以你只能選擇月份和年份。 在第一個日期選擇器中選擇日期時，第二個日期選擇器的 minDate 正在適應。

編輯

當 dateformat 不提供日期時，jQuery datepicker 會出現嚴重問題。 我更改了代碼以使其工作。 唯一的問題是在打開日期選擇器時，我必須將日期轉換為合適的格式。 看看新的小提琴。

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;
}

JAVASCRIPT：

$('#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

您可以使用這個monthpicker jquery 小部件： https ://github.com/lucianocosta/jquery.mtz.monthpicker

Answer 3

您可以修改 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'
});

將兩者結合起來，我們得到：

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

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

您還可以使用它來限制您的第二個日期選擇器：

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 4

如果您可以在 html5 中工作，我建議您對較新的瀏覽器使用新月份的輸入支持

只需使用並讓魔法發生。

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month

Answer 5

Datepicker 可以只顯示月份和年份而不使用 css

.ui-datepicker-calendar {
    display: none;
}?

你可以這樣做

var dp=$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

dp.on('changeMonth', function (e) {    
   //do something here
   alert("Month changed");
});

文檔在這里