Kitalpha
Kitalpha

Reputation: 547

2 jQuery calendars, updating the second calendar based on the first calendars date

$(function(){
    $('#datepicker').datepicker({

        dateFormat: 'dd/mm/yy',
        minDate: 'today',
        onSelect: function(dateText, inst) { 
            $('#handout').val(dateText);
        }


    });
});

$(function(){
    $('#datepicker2').datepicker({

        dateFormat: 'dd/mm/yy',
        minDate: 'today',
        onSelect: function(dateText, inst) { 
            $('#handin').val(dateText);
            $('#datepicker').val("");
            $('#datepicker').datepicker({'option','minDate', newDate});

        }
    });
});

I have 2 jQuery calendars, I want to restrict the 2nd calendars date range based on the first calendars selection. So if the first calendar selects 10/07/2014, then the 2nd calendar will update to reflect that no date prior to that date may be selected. I thought the code above in datepicker2 onSelect function would handle this however it doesn't seem to.

FIXED WITH THIS SOLUTION:

Fixed it with the following:

    $(function(){
        $('#datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: 'today',
            onSelect: function(dateText, inst) { 
                $('#handout').val(dateText);
                $( "#datepicker2" ).datepicker( "option", "minDate", dateText );
            }
        });
    });

    $(function(){
        $('#datepicker2').datepicker({
            dateFormat: 'dd/mm/yy',
            onSelect: function(dateText, inst) { 
                $('#handin').val(dateText);
                $( "#datepicker" ).datepicker( "option", "maxDate", dateText );
            }
        });
    });

Refer to: http://jqueryui.com/datepicker/#date-range

Upvotes: 0

Views: 1897

Answers (1)

Hemal Bhalodia
Hemal Bhalodia

Reputation: 19

You can find answer in following example by SirDerpington.

here is two text boxes.

<input type="text" id="dt1" readonly="readonly">
<input type="text" id="dt2" readonly="readonly">

Here is jquery datepicker initializer.

$("#dt1").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 0,
    onSelect: function (date) {
        var date2 = $('#dt1').datepicker('getDate');
        date2.setDate(date2.getDate() + 1);
        $('#dt2').datepicker('setDate', date2);
        //sets minDate to dt1 date + 1
        $('#dt2').datepicker('option', 'minDate', date2);
    }
});
$('#dt2').datepicker({
    dateFormat: "dd-M-yy",
    onClose: function () {
        var dt1 = $('#dt1').datepicker('getDate');
        var dt2 = $('#dt2').datepicker('getDate');
        //check to prevent a user from entering a date below date of dt1
        if (dt2 <= dt1) {
            var minDate = $('#dt2').datepicker('option', 'minDate');
            $('#dt2').datepicker('setDate', minDate);
        }
    }
});

Please see example in jsfiddle.

Upvotes: 1

Related Questions