仅带月份和年份的日期选择器 [英] Datepicker with month and year only

问题描述

我希望有一个日期选择器，用户只能从日期选择器中选择月份和年份，而且我还需要使用从前一个日期选择器中选择的月份和年份来限制下一个日期选择器.

I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..

有人可以帮我吗?

推荐答案

Sean的回答很不错，如果您也想禁用日期选择，则可以使用其他方法，您可以在这把小提琴:

Sean answer is pretty good, if you want to disable day selecting as well, you might use a different approach, you can see the result in this fiddle:

日历是隐藏的，因此您只能选择月份和年份.在第一个日期选择器中选择日期时，第二个日期选择器的minDate会适应.

Calendar is hidden, so you can only choose month and year. When selecting a date in first datepicker, minDate of second datepicker is getting adapted.

编辑

当dateformat不提供日期时，jQuery datepicker存在严重问题.我更改了代码以使其正常运行.唯一的事情是打开日期选择器时，我必须将日期转换为合适的格式.看看新的小提琴.

jQuery datepicker has seriously problems when dateformat doesn't provide a day. I changed th code to make it work. Only thing is when opening a datepicker, I have to convert the date to a suitable format. Have a look at the new fiddle.

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:

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

这篇关于仅带月份和年份的日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！