CODEWITHSUNDEEP
jquerydatedatepicker
Slan
Slan

Reputation: 560

Multiple jquery Datepickers with min and max Ranges

I am trying to handle multiple Datepickers with start and end date ranges.

HTML

<div id="date1">
     <input id="datePicker[0]_StartDate" data-index="0" class="datepickerStart" type="text" name="datePicker[0].StartDate"/>
     <input id="datePicker[0]_EndDate" data-index="0" class="datepickerEnd" type="text" name="datePicker[0].EndDate"/>
</div> 
<div id="date2">
     <input id="datePicker[1]_StartDate" data-index="1" class="datepickerStart" type="text" name="datePicker[1].StartDate"/>
     <input id="datePicker[1]_EndDate" data-index="1" class="datepickerEnd" type="text" name="datePicker[1].EndDate"/>
</div>

Jquery

$(".datepickerStart").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker[" + index + "]_EndDate").datepicker("option", "minDate", selectedDate);
    }
});
$(".datepickerEnd").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker[" + index + "]_StartDate").datepicker("option", "maxDate", selectedDate);
    }
});

I am trying to set "index 0" Start date picker maximun range with "index 0" End date picker selected date and also trying to set index 0 End date picker minimum range with index 0 Start date picker selected date

and same process for the "Index 1" datepickers.

Please suggest some solution for this.Thanks

Upvotes: 1

Views: 897

Answers (1)

vijayP
vijayP

Reputation: 11512

Could you try with following code:

Found the problem. The other issue was with your element's id. They contains square brackets. So to deal with such id, we need to escape them by \\.

Fiddle link: http://jsfiddle.net/vijayP/pqhtt7gb/

JS Code:

$(".datepickerStart").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker\\[" + index + "\\]_EndDate").datepicker("option", "minDate", new Date(selectedDate));
    }
});
$(".datepickerEnd").datepicker({
    constrainInput: true,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    numberOfMonths: 1,
    onClose: function (selectedDate, obj) {
        var index = obj.input.data("index");
        $("#datePicker\\[" + index + "\\]_StartDate").datepicker("option", "maxDate", selectedDate);
    }
});

Upvotes: 1

Related Questions