如何在日期选择器中设置三个月的日期范围？

Question

我这里有一个��始日期和结束日期。我想根据用户选择的起始日期来设置我的最大日期为3个月。如果用户选择了起始日期01-01-2014，#to的最大日期应该是基于起始日期后的三个月，如(01-04-2014)。

$(function () {
    $("#from").datepicker({
        minDate: "dateToday",
        changeMonth: true,
        dateFormat: 'dd-mm-yy',

        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#to").datepicker({
        minDate: "dateToday",
        changeMonth: true,
        dateFormat: 'dd-mm-yy',
        maxDate: selectedDate + "+3M", //I want to set condition like this

        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});

请给我一些解决我的问题的建议。

- CJ Ramki

---

请不要在与此插件无关的问题上标记 [tag:jquery-validate]。 - Sparky

@sparky 感谢您的建议。 - CJ Ramki

Answer 1

演示 Fiddle

$(function () {
    $("#from").datepicker({
        minDate: "dateToday",
        changeMonth: true,
        dateFormat: 'dd-mm-yy',
        onClose: function (selectedDate, instance) {
            if (selectedDate != '') { //added this to fix the issue
                $("#to").datepicker("option", "minDate", selectedDate);
                var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
                date.setMonth(date.getMonth() + 3);
                console.log(selectedDate, date);
                $("#to").datepicker("option", "minDate", selectedDate);
                $("#to").datepicker("option", "maxDate", date);
            }
        }
    });
    $("#to").datepicker({
        minDate: "dateToday",
        changeMonth: true,
        dateFormat: 'dd-mm-yy',
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});

- Tushar Gupta - curioustushar

---

它在第一次点击时有效...但是如果我在同一页的其他地方点击，然后再次点击，它就不起作用了...在这里查看：http://jsfiddle.net/a79EQ/1/ - CJ Ramki

首先点击“从”文本框，不要选择日期。然后在同一页的空白处单击。接着再次点击“从”文本框，此时日期选择器不会显示。 - CJ Ramki

嗨，如何根据起始日期的更改仅更改截止日期的月份选择（仅单个月）？如果我选择3月5日作为起始日期，那么我只能选择更新截止日期为3月31日。 - Nisanth

太棒了！！正是我所需要的！！ - Scanner

Answer 2

$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true
    });
});

这里是文档。

$("#startDate").datepicker({
    minDate: 0,
    onSelect: function(selected) {
        var date = new Date(selected);
    date.setMonth(date.getMonth()+3);
        $("#endDate").datepicker("option","maxDate", date);
    }
});

这是你的结果，伙计……干杯……

- Marikkani Chelladurai

---

享受Puliyankudi的+1。 - bgs

@Chelladurai，你能给我你的jsfiddle演示吗？ - CJ Ramki

@CJRamki 抱歉耽误了，伙计。这里是FIDDLE。 - Marikkani Chelladurai