使用Jquery比较两个日期N次 [英] Comparing two dates N times using Jquery
问题描述
在这里使用了一个名为[0]的字段......但实际上我将它们与索引中的+1([1],[2]等)克隆...同样从[0]开始。从[0]开始日期到[0]结束日期。
我将比较这两个结束日期的日期不得少于开始日期。
这里前两个代码块正常工作,因为每个代码块都是一行。但是,无论何时我试图将其设置为'N'行,它都不起作用,即最后一块代码无法工作。
In here one field named to[0] is used...but actually I have them 'N' times with the +1 in index (to[1],to[2] etc)..which are generating due to cloning... same goes for from[0]. from[0] is start date and to[0] is end date. I am comparing these two dates for end date not to be less than the start date. Here first 2 blocks of code are working properly because each is for one row. But whenever I am trying to make it for 'N' rows, it isn't working i.e. the last block of code isn't working.
我没有找到选择这些元素的方法,因为名称是动态生成的...
I am not getting a way for selecting these element since the name are generating dynamically...
Jquery代码是:
Jquery Code Is:
$(document).ready(function() {
$("input[name='to[0]']").blur( function() {
if ($("input[name='to[0]']").val() != 'To' && $("input[name='from[0]']").val() != 'From') {
var a1 = $("input[name='from[0]']").val();
var b1 = $("input[name='to[0]']").val();
alert(b1);alert(a1);
if (a1 > b1) {
alert("Invalid Date Range!\nStart Date cannot be after End Date!");
}
}
});
$("input[name='to[1]']").blur( function() {
if ($("input[name='to[1]']").val() != 'To' && $("input[name='from[1]']").val() != 'From') {
var a1 = $("input[name='from[1]']").val();
var b1 = $("input[name='to[1]']").val();
alert(b1);alert(a1);
if (a1 > b1) {
alert("Invalid Date Range!\nStart Date cannot be after End Date!");
}
}
});
$("td.date").click( function() {
var n = $('#table2 tbody>tr').length - 2;
var r=2;
$("td.date>input:first").next().blur( function() {
while(r<n) {
if ($("input[name='to[r]']").val() != 'To' && $("input[name='from[r]']").val() != 'From') {
var a1 = $("input[name='from[r]']").val();
var b1 = $("input[name='to[r]']").val();
alert(b1);alert(a1);
if (a1 > b1) {
alert("Invalid Date Range!\nStart Date cannot be after End Date!");
}
}
r++;
}
});
});
HTML是..
<td width="15%" align="center" >
<input class="f" style="width:70px" type="text" size="12" name="from[0]" value="From" readonly="readonly" />
<a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
</td>
<td width="15%" align="center" >
<input style="width:70px" class="f" type="text" size="12" name="to[0]" value="To" readonly="readonly" />
<a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
</td>
<td width="15%" align="center" class="date" >
<input style="width:70px" type="text" size="12" name="from[1]" value="From" readonly="readonly" />
<a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
</td>
<td width="15%" align="center" class="date" >
<input style="width:70px" class="f" type="text" size="12" name="to[1]" value="To" readonly="readonly" />
<a class="datepicker" href="#"><img alt="Pick a date" src="js/date.gif" border="0" width="17" height="16" /></a>
</td>
包含来自[1]和[1]的td的最后一行被克隆,之后克隆最后一行...
last row which contains td for from[1] and to[1] is getting cloned and after that last row gets cloned...
推荐答案
只需更改您的选择器,那么您就不需要复制代码。试试看:
Just change your selector, then you don't need to duplicate the code. Try this:
//^= means name starts with, so we are selecting all inputs with that matcher
$("input[name^='to['").blur( function() {
//first we get the name in a variable (just for shortness)
var thisName = $(this).prop("name");
//we then get the numbered index, by splitting the id of the current item
var index = thisName.substring(thisName.indexOf("[") + 1).replace("]", "");
//based on the index, we now can get the corresponding "from" field
var correspondingFromField = $("input[name='from[" + index + "]']");
//now we just do your logic:
if ($(this).val() != 'To' && correspondingFromField.val() != 'From') {
var a1 = correspondingFromField.val();
var b1 = $(this).val();
alert(b1);alert(a1);
if (a1 > b1) {
alert("Invalid Date Range!\nStart Date cannot be after End Date!");
}
}
});
这篇关于使用Jquery比较两个日期N次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!