Question

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

您有一个From日期输入文本和一个To输入文本。

有没有办法将glDatePicker（From input）的一个实例的选定日期从值传递到另一个（To input）作为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);

Thnx提前！

Answer 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>

Answer 2

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

经过几个小时的阅读，我在Stack上发现了一个线程，让我得到了正确答案（https://stackoverflow.com/a/19691491/2288421）

我在$（'＃to'）中添加了以下函数。单击函数：

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

使用glDatePicker的DatePicker。日期范围有两个输入

2 个答案: