Validation for FromDate and ToDate not working for dynamic created controls of datepicker in jquery

Question

My requirement is, I have two calendar datepicker controls. FromDate and ToDate . What I want is, Whenever a User add a date in FromDate and then he adds the date in ToDate . The ToDate should not be less than the FromDate . Also here one more thing is. After one rows, my calendar controls are dynamically generated on add class click. See my below html

<tr id="vendorlisttr1">
    <td>
        <div class="row noPadding vendorForm">
            <div class="vendorDaterow">
                <div class="vendorName" id="dvVendorNameData1">
                    <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span>
                </div>
                <div class="vendorFromDate">
                    <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
                <div class="vendorToDate">
                    <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
            </div>
            <div class="add">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>

        </div>
    </td>
</tr>

And below is the datepicker code which I tried for validaton but it's not working.

function addVendorRow() {
    var numItems = $('.vendorName').length;
    if (numItems != 6) {
        var tr2 = $("#vendorlisttr" + (numItems - 1) + "");
        var tr = "<tr id='vendorlisttr" + numItems + "'><td><div class='row noPadding vendorForm'><div class='vendorDaterow'><div class='vendorName' id='dvVendorNameData" + numItems + "'><label>SP Vender Name</label><span><input type='text' value='' name='nmVendorData" + "' id='txtVendorName" + numItems + "'/></span></div><div class='vendorFromDate'><label>From Date</label><span class='datepicker'><input type='text' value='' name='spFromDate" + "' id='spFromDate" + numItems + "' /><i class='fa fa-calendar' aria-hidden='true'></i></span></div><div class='vendorToDate'><label>To Date</label><span class='datepicker'><input type='text' value='' name='spToDate" + "' id='spToDate" + numItems + "' /><i class='fa fa-calendar' aria-hidden='true'></i></span></div><div class='minus'><i class='fa fa-minus' aria-hidden='true'></i></div></div></td></tr>"

        $(tr).insertAfter(tr2);
        $('#txtVendorName' + numItems).focus().autocomplete(autocompleteOptions);
        $('#spFromDate' + numItems).datepicker({
            dateFormat: 'dd/mm/yy',
            numberOfMonths: 2,
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate() + 1);
                $('#spToDate' + numItems).datepicker("option", "minDate", dt);
            }
        });

        $('#spToDate' + numItems).datepicker({
            dateFormat: 'dd/mm/yy',
            numberOfMonths: 2,
            onSelect: function (selected) {
                var dt = new Date(selected);
                dt.setDate(dt.getDate() - 1);
                $("#txtFrom").datepicker("option", "maxDate", dt);
            }
        });

    } else {
        jAlert(ValidationMessageConfig.MaxVendor, ValidationMessageConfig.Title);
    }
}

Please help me in validating.

update

Took reference from HERE

Answer 1

The dateformat you use for your datepicker is not parseable by default with javascript (dd/mm/yyyy will return invalid date as it's not a valid ISO format). Please see snippet below on how to achieve what you want

 $(document).ready(function(){ setDatepickers(0) $(".add").click(function(){ addVendorRow() }) }) function setDatepickers(numItems){ $('#spFromDate' + numItems).datepicker({ dateFormat: 'dd/mm/yy', numberOfMonths: 2, onSelect: function (selected) { var parsedDate = selected.split('/') var dt = new Date(); dt.setDate(parsedDate[0]) dt.setMonth(parseInt(parsedDate[1])-1) dt.setYear(parsedDate[2]) dt.setDate(dt.getDate() + 1); var newMinDate = dt.getDate()+"/"+(dt.getMonth()+1)+"/"+dt.getFullYear(); $('#spToDate' + numItems).datepicker("option", "minDate", newMinDate); } }); $('#spToDate' + numItems).datepicker({ dateFormat: 'dd/mm/yy', numberOfMonths: 2, onSelect: function (selected) { var parsedDate = selected.split('/') var dt = new Date(); dt.setDate(parsedDate[0]) dt.setMonth(parseInt(parsedDate[1])-1) dt.setYear(parsedDate[2]) dt.setDate(dt.getDate() - 1); var newMaxDate = dt.getDate()+"/"+(dt.getMonth()+1)+"/"+dt.getFullYear(); $('#spFromDate' + numItems).datepicker("option", "maxDate", newMaxDate); } }); } function addVendorRow() { var numItems = $('.vendorName').length; if (numItems != 6) { var tr2 = $("#vendorlisttr" + (numItems - 1) + ""); var tr = "<tr id='vendorlisttr" + numItems + "'><td><div class='row noPadding vendorForm'><div class='vendorDaterow'><div class='vendorName' id='dvVendorNameData" + numItems + "'><label>SP Vender Name</label><span><input type='text' value='' name='nmVendorData" + "' id='txtVendorName" + numItems + "'/></span></div><div class='vendorFromDate'><label>From Date</label><span class='datepicker'><input type='text' value='' name='spFromDate" + "' id='spFromDate" + numItems + "' /><i class='fa fa-calendar' aria-hidden='true'></i></span></div><div class='vendorToDate'><label>To Date</label><span class='datepicker'><input type='text' value='' name='spToDate" + "' id='spToDate" + numItems + "' /><i class='fa fa-calendar' aria-hidden='true'></i></span></div><div class='minus'><i class='fa fa-minus' aria-hidden='true'></i></div></div></td></tr>" $(tr).insertAfter(tr2); //$('#txtVendorName' + numItems).focus().autocomplete(autocompleteOptions); setDatepickers(numItems) } else { jAlert(ValidationMessageConfig.MaxVendor, ValidationMessageConfig.Title); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet"/> <table> <tr id="vendorlisttr0"> <td> <div class="row noPadding vendorForm"> <div class="vendorDaterow"> <div class="vendorName" id="dvVendorNameData0"> <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span> </div> <div class="vendorFromDate"> <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate0" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> <div class="vendorToDate"> <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate0" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> </div> <div class="add"> <i class="fa fa-plus" aria-hidden="true">+ add</i> </div> </div> </td> </tr> </table>