FromDate和ToDate的验证不适用于jquery中动态创建的datepicker控件

问题描述

我的要求是，我有两个日历日期选择器控件. FromDate和ToDate.我想要的是，只要用户在FromDate中添加日期，然后他在ToDate中添加日期. ToDate不应小于FromDate.另外还有一件事.在排成一行之后，单击add class会动态生成我的日历控件.见我下面的html

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>

下面是我为validaton尝试过的日期选择器代码，但是它不起作用.

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

请帮助我进行验证.

更新

从这里

推荐答案

默认情况下，您无法使用javascript解析用于日期选择器的dateformat(dd/mm/yyyy将返回无效日期，因为它不是有效的ISO格式).请查看下面的代码段，了解如何实现所需的目标

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>

这篇关于FromDate和ToDate的验证不适用于jquery中动态创建的datepicker控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！