带有 glDatePicker 的 DatePicker。具有两个输入的日期范围答案

【问题标题】：DatePicker with glDatePicker. date range with two inputs带有 glDatePicker 的 DatePicker。具有两个输入的日期范围
【发布时间】：2013-01-05 18:23:36
【问题描述】：

我正在使用 glDatePicker 生成日期范围选择系统。

你有一个从日期输入文本和一个到输入文本。

有没有办法将 glDatePicker 的一个实例（从输入）的选定日期作为值的 selectableDateRange 传递给另一个（到输入）？

我试过这个，但它不起作用。

      <input type="text" id="from" />
</p>
<p> To:
  <input type="text" id="to" />
</p>
<script type="text/javascript">


var today = new Date();
var datelimit = new Date(today);
datelimit.setDate(today.getDate() + 31);

var to = $('#to').glDatePicker(true);


$('#from').glDatePicker({
    showAlways: false,
    allowMonthSelect: true,
    allowYearSelect: true,
    prevArrow: '',
    nextArrow: '',
    selectedDate: today,
    selectableDateRange: [{
        from: today,
        to: datelimit
    }, ],
    onClick: function (target, cell, date, data) {
        target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate());

        //Cambio la fecha del #to
        var toFrom = new Date(date);
        var toLimit = new Date();
        toLimit.setDate(toFrom.getDate() + 31);
        $.extend(to.options,
            {
                selectableDateRange: [{
                from: toFrom,
                to: toLimit
            }, ],
            });
            to.render();

        if (data != null) {
            alert(data.message + '\n' + date);
        }
    }
}).glDatePicker(true);

提前谢谢！

【问题讨论】：

标签： jquery datepicker date-range

【解决方案1】：

我终于解决了。

我希望它对某人有所帮助。

<!DOCTYPE html>
<html>
<head>
<link href="styles/glDatePicker.default.css" rel="stylesheet" type="text/css">
</head>
<body>
<p> From:
<input type="text" id="from" />
</p>
<p> To:
<input type="text" id="to" />
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="glDatePicker.min.js"></script> 
<script type="text/javascript">


var today = new Date();
var datelimit = new Date(today);
datelimit.setDate(today.getDate() + 31);



$('#from').glDatePicker({
    showAlways: false,
    allowMonthSelect: true,
    allowYearSelect: true,
    prevArrow: '',
    nextArrow: '',
    selectedDate: today,
    selectableDateRange: [{
        from: today,
        to: datelimit
    }, ],
    onClick: function (target, cell, date, data) {
        target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate());

        if (data != null) {
            alert(data.message + '\n' + date);
        }
    }
}).glDatePicker(true);


var to = $('#to').glDatePicker(
{
    showAlways: false,
    onClick: function (target, cell, date, data) {
        target.val(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate());

        if (data != null) {
            alert(data.message + '\n' + date);
        }
    }
}).glDatePicker(true);

$('#to').click(function() {
    var fechaFrom = new Date($("#from").val());
    var toLimit = new Date();
    toLimit.setDate(fechaFrom.getDate() + 31);
    to.options.selectableDateRange = [{
        from: fechaFrom,
        to: toLimit
    }, ],
    to.options.showAlways = false;
    to.render();
});


</script>
</body>
</html>

【讨论】：

我试过了，它确实阻止了您在第二个字段中使用在第一个字段中的日期之前出现的日期。但是，当您单击它时，它不会自动将第二个字段提前到该日期。你会怎么做？

【解决方案2】：

我使用了 SauronZ answer 中的代码，但发现更改用于创建日期范围的天数会导致错误。

经过几个小时的阅读，我在 Stack 上找到了一个帖子，让我找到了正确的答案 (https://stackoverflow.com/a/19691491/2288421)

我在 $('#to').click 函数中添加了以下函数：

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(date.getDate() + days);
    return result;
}

然后我在生成 toLimit 时调用了该函数：

var tempDate = new Date($('#from').val());
toLimit = addDays(tempDate, 91);

如您所见，我将范围设置为 91 天，但您可以输入任何您想要的数字。

以下是更改的完整代码块，以防有人需要查看：

$('#to').click(function() {
    var fechaFrom = new Date($("#from").val());
    var toLimit = new Date();

    /**** ADDED FUNCTION TO ALLOW ADDING OF ANY NUMBER OF DAYS ****/
    function addDays(date, days) {
        var result = new Date(date);
         result.setDate(date.getDate() + days);
        return result;
    }

    var tempDate = new Date($('#from').val());

    toLimit = addDays(tempDate, 91);
    to.options.selectableDateRange = [{
        from: fechaFrom,
        to: toLimit
    }, ],
    to.options.showAlways = false;
    to.render();
});

【讨论】：