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

【问题标题】：How to set 3 months date range in date picker?如何在日期选择器中设置 3 个月的日期范围？
【发布时间】：2013-11-19 03:46:21
【问题描述】：

我有从日期到现在。我想将我的 maxDate 设置为 3 个月取决于从日期选择。如果用户选择日期 01-01-2014，#to maxDate 应该是基于起始日期的下 3 个月，例如 (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);
        }
    });
});

给我一些建议来解决我的问题

【问题讨论】：

当您的问题与此插件无关时，请不要使用jquery-validate 标记您的问题。
@sparky 谢谢你的建议

标签： jquery validation date datepicker

【解决方案1】：

Fiddle DEMO

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

【讨论】：

它在第一次点击时工作......但是如果我点击同一页面中的其他地方然后我要再次点击，它不起作用......jsfiddle.net/a79EQ/1在这里看到它
首先从文本框点击。不要选择日期。单击同一页面的空白处。然后再次从文本框中单击。日期选择器未显示
嘿，如何仅根据起始日期更改（仅单月）更改截止日期月份选择。如果我单击从日期开始的 3 月 5 日，我将选择仅在当前日期更新 3 月 31 日
太棒了！！正是我需要的！

【解决方案2】：

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

这里是Documentation

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

这是你的结果....干杯....

【讨论】：

Puliyankudi 享受 +1
@Chelladurai 谢谢... +1
@Chelladurai，你能给我你的 jsfiddle 演示吗
@CJRamki 抱歉耽搁了伙计。 Here 是 FIDDLE