DatePicker with glDatePicker. date range with two inputs

Question

I'm using glDatePicker to generate a date range selection system.

You have a From date input text and a To input text.

Is there any way to pass the selected date of one instance of glDatePicker (From input) to another (To input) as selectableDateRange from value?

I've tried with this, but it's not working.

      <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 in advance!

score 4 · Accepted Answer · answered Jan 06 '13 at 16:33

Finally i solved.

I hope it helps someone.

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

I tried this and it does prevent you from using a date in the second field that occurs before the date in the first field. However it does not advance the second field to that date automatically when you click on it. How would you do that? — Maelish, Dec 31 '13 at 18:27

score 0 · Answer 2 · edited May 23 '17 at 12:27

I used the code from SauronZ answer, but discovered changing the number of days used to create the date range resulted in errors.

After hours of reading, I found a thread here on Stack that led me to the right answer ( https://stackoverflow.com/a/19691491/2288421)

I added the following function inside the $('#to').click function:

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

And then I called that function when generating the toLimit:

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

As you can see, I am setting my range to 91 days, but you could enter whatever number you wish.

Here is the full chunk of code that changed in case someone needs to see it:

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

DatePicker with glDatePicker. date range with two inputs

2 Answers2