javascript - FromDate 和 ToDate 的验证不适用于 jquery 中动态创建的日期选择器控件

Question

我的要求是，我有两个日历日期选择器控件。 FromDate 和 ToDate。我想要的是，每当用户在 FromDate 中添加日期，然后在 ToDate 中添加日期。 ToDate 不应小于 FromDate。这里还有一件事。一行之后，我的日历控件将在单击“添加类”时动态生成。请参阅我下面的 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>

下面是我尝试验证的日期选择器代码，但它不起作用。

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);
    }
}

请帮我验证。

更新

引用HERE

Answer 1

默认情况下，您用于日期选择器的日期格式无法使用 javascript 进行解析(dd/mm/yyyy 将返回无效日期，因为它不是有效的 ISO 格式)。请参阅下面的代码片段，了解如何实现您想要的目标

$(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>