2 个具有最小和最大日期的依赖日期选择器答案

【问题标题】：2 dependent datepickers with min and max date2 个具有最小和最大日期的依赖日期选择器
【发布时间】：2019-06-02 07:27:13
【问题描述】：

我正在寻找一个带有 2 个日期选择器的表单。第一个选择的数据，必须是第二个的minDate，第二个的maxDate必须是minDate+10天。

例如：

选择的第一个日期：01/01/2019
在第二个字段中，我最多可以选择 01/10/2019 作为日期

这是我刚刚完成的小代码：

$(document).ready(function () {

    $("#from").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#from').datepicker('getDate');
            date2.setDate(date2.getDate() + 10);
            $('#to').datepicker('setDate', date2);
            //sets minDate to from date + 1
            $('#to').datepicker('option', 'minDate', date2);
        }
    });
    $('#to').datepicker({
        dateFormat: "dd-mm-yy",
        onClose: function () {
            var from = $('#from').datepicker('getDate');
            console.log(from);
            var to = $('#to').datepicker('getDate');
            if (to <= from) {
                var minDate = $('#to').datepicker('option', 'maxDate');
                $('#to').datepicker('setDate', minDate);
            }
        }
    });
});

【问题讨论】：

抱歉我忘记了
您到底在为什么而苦苦挣扎？
正如我所说，我希望他们之间有一个依赖关系。但是我的代码不是我想要的依赖
确保您的日期格式不匹配。您的 dateFormat 属性设置为 dd-M-yy 但您在解释中的示例日期似乎是 mm/dd/yyyy
我建议您不要为 from 字段设置最大日期，因为我遇到了类似的问题，并且会产生一些问题。假设您从 2019/01/07 中选择，而不是 to min 将是 2019/01/08；现在，如果您选择喜欢 2019/01/10，则从 2019/01/10 也将达到最大值。现在会有一个问题，因为您不能再设置 2019/01/10 之后的日期。

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

试试这个

$("#from_date").datepicker({
    format: 'yyyy/mm/dd',
    autoclose: true, 
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        var someDate = new Date(selected.date.valueOf());
        var numberOfDaysToAdd = 10;
	someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
        var dd = someDate.getDate();
	var mm = someDate.getMonth() + 1;
	var y = someDate.getFullYear();
	var someFormattedDate = y + '/'+ mm + '/'+ dd;

        $('#to_date').datepicker('setStartDate', minDate);
        $('#to_date').datepicker('setEndDate', someFormattedDate);
    });

$("#to_date").datepicker({     
    format: 'yyyy/mm/dd',
    autoclose: true,
    }).on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        var someDate = new Date(selected.date.valueOf());
        var numberOfDaysToAdd = 10;
	someDate.setDate(someDate.getDate() - numberOfDaysToAdd);
	var dd = someDate.getDate();
	var mm = someDate.getMonth() + 1;
	var y = someDate.getFullYear();
	var someFormattedDate = y + '/'+ mm + '/'+ dd;
        $('#from_date').datepicker('setStartDate', someFormattedDate);
        $('#from_date').datepicker('setEndDate', maxDate);
    });

<!-- Css Link -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<!-- js Link-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

From Date:-
<input type="text" name="" class="form-control" autocomplete="off" id="from_date" placeholder="Select Date">
<br>
<br>
To Date:-
<input type="text" name="" class="form-control" autocomplete="off" id="to_date" placeholder="Select Date">

【讨论】：

【解决方案2】：

如果您想将 to 日期从选定日期的 +1 天设置为选定日期的 +10 天，这应该有效：

 $("#from").datepicker({
    dateFormat: "dd-mm-yy",
    minDate: 0,
    onSelect: function (date) {
        var selectedDate = $('#from').datepicker('getDate').getDate();
        var minDate = new Date();
        // set min date
        minDate.setDate(selectedDate  + 1);
        var maxDate = new Date();
        // set max date
        maxDate.setDate(selectedDate  + 10);
        $('#to').datepicker('setDate', minDate );
        //sets minDate to from date + 1
        $('#to').datepicker('option', 'minDate', minDate );
        //sets maxDate to from date + 10
        $('#to').datepicker('option', 'maxDate', maxDate );
    }
});

【讨论】：

对不起，它对我不起作用。它不会打开“到”日期选择器

【解决方案3】：

感谢 GiuServ，我找到了解决方案。

这里是代码

$(document).ready(function () {
    $("#from").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#from').datepicker('getDate');
            var minDate = new Date();
            // set min date
            minDate.setDate(date2.getDate()  + 1);
            var maxDate = new Date();
            // set max date
            maxDate.setDate(date2.getDate()  + 10);
            //sets minDate to from date + 1
            $('#to').datepicker('option', 'minDate', minDate);
            $('#to').datepicker('option', 'maxDate', maxDate);
        }
    });
    $('#to').datepicker({
        dateFormat: "dd-mm-yy",
        onClose: function () {
            var from = $('#from').datepicker('getDate');
            console.log(from);
            var to = $('#to').datepicker('getDate');
            if (to <= from) {
                var minDate = $('#to').datepicker('option', 'minDate');
                $('#to').datepicker('setDate', minDate);
                var maxDate = $('#to').datepicker('option', 'maxDate');
                $('#to').datepicker('setDate', maxDate);
            }
        }
    });
});

【讨论】：