[英]Validation for FromDate and ToDate not working for dynamic created controls of datepicker in jquery
我的要求是,我有两个日历datepicker控件。 FromDate
和ToDate
。 我想要的是,每当用户在FromDate
添加日期,然后他在ToDate
添加日期时。 ToDate不应小于FromDate
。 另外这里还有一件事。 在一行之后,我的日历控件是在add class
单击时动态生成的。 见我下面的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>
下面是我尝试过的datepicker代码,但它不起作用。
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格式)。 请参见下面的代码段,了解如何实现所需的功能
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.