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

see the link example: [click here](https://stackoverflow.com/questions/833997/validate-that-end-date-is-greater-than-start-date-with-jquery) — Rafiqul Islam, Dec 14 '17 at 06:44
@RafiqulIslam: my `id` is generated dynamically. if u see my `addVendorRow()` function — Nad, Dec 14 '17 at 06:47

score 1 · Accepted Answer · answered Dec 14 '17 at 09:43

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>

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

1 Answers1