我正在一个新的领域工作并测试克隆。我相信它会在我的帮助下完全符合我的需求。主要思想是在选择了第二个日期（结束日期）之后，然后创建适当数量的开始和结束时间。例如，如果我有一个为期3天的研讨会，那么每天都有可能在不同的时间开始和结束。
我可以收到警告以产生一些结果......例如，我可以得到日期差异。
很难克隆开始和结束时间。
//HTML
<form action="#" method="post"><center>
<table width="75%" border="0" cellpadding="10">
<tr>
<td align="center">Workshop Title: <input name="workshoptitle" type="text" size="50" maxlength="100" /></td>
</tr>
<tr>
<td align="center">Workshop Description: <br /> <textarea name="workshopdescription" rows="5" cols="40" /></textarea></td>
</tr>
<tr>
<td align="center">Workshop Location:<br /> <textarea name="workshoplocation" cols="40" rows="4" /></textarea></td>
</tr>
<tr>
<td align="center">Start Date:<input type="text" class="field_name" size="10" id="startDate" name="startDate" />
End Date:<input type="text" size="10" id="endDate" name="endDate" class="field_name" />
Early Registration Deadline:<input type="text" class="field_name" size="10" id="earlyregexpdate" name="earlyregexpdate" /></td>
</tr>
<tr>
<td align="center">Start Time:<select name="startHour1" id="startHour1" class="clonedInput">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option selected="selected">9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<font size="+2">:</font>
<select name="startMinute1" id="startMinute1" class="clonedInput">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<select name="startampm1" id="startampm1" class="clonedInput">
<option>AM</option>
<option>PM</option>
</select>
End Time:<select name="endHour1" id="endHour1" class="clonedInput">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<font size="+2">:</font>
<select name="endMinute1" id="endMinute1" class="clonedInput">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<select name="endampm1" id="endampm1" class="clonedInput">
<option>AM</option>
<option selected="selected">PM</option>
</select></td>
</tr>
<tr>
<td align="center">Open Registration Date:<input type="text" class="field_name" size="10" id="displayDate" name="displayDate" />
Would you like to make this workshop available? - Yes
<input name="makeAvailable" type="checkbox" value="Y" /></td>
</tr>
<tr>
<td align="center">Number of Presenters: <select name="nbrOfSpeakers">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
</table>
</center>
<br /><br /><center><input name="submit" type="submit" value="Submit" />
<input name="reset" type="reset" value="Reset Form" />
<input name="cancel" type="submit" value="Cancel" />
</center>
</form>
的jQuery
$(document).ready(function() {
$('#display').hide();
//http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/
$('#startDate').datepicker({
dateFormat: 'M dd, yy',
minDate: '-6m',
maxDate: '6m',
showButtonPanel: true
});
$('#endDate').datepicker({
dateFormat: 'M dd, yy',
minDate: '-6m',
maxDate: '6m',
showButtonPanel: true
});
$('#earlyregexpdate').datepicker({
dateFormat: 'M dd, yy',
minDate: '-6m',
maxDate: '6m',
showButtonPanel: true,
beforeShow: function() {
$(function() {
$("#startDate").datepicker({
dateFormat: 'mm/dd/yyyy'
});
$("#endDate").datepicker({
dateFormat: 'mm/dd/yyyy'
});
});
//Total number of dates selected
var start_date = $('#startDate').datepicker('getDate');
var end_date = $('#endDate').datepicker('getDate');
var total_days = (end_date - start_date) / 1000 / 60 / 60 / 24;
for (i = 0; i < total_days; i++) {
var num = $('.clonedInput').length;
var newNum = Number(num + 1);
var startHour = $('#startHour' + num).clone().attr('id', 'name' + newNum);
var startMinute = $('#startMinute' + num).clone().attr('id', 'name' + newNum);
var startampm = $('#startampm' + num).clone().attr('id', 'name' + newNum);
var endHour = $('#endHour' + num).clone().attr('id', 'name' + newNum);
var endMinute = $('#endMinute' + num).clone().attr('id', 'name' + newNum);
var endampm = $('#endMinute' + num).clone().attr('id', 'name' + newNum);
startHour.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
startMinute.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
startampm.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
endHour.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
endMinute.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
endampm.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#startHour' + num + ':').after(endampm);
$('#startMinute' + num + ' ').after(endampm);
$('#startampm' + num + ' ').after(endampm);
$('#endHour' + num + ':').after(endampm);
$('#endMinute' + num + ' ').after(endampm);
$('#endampm' + num).after(endampm);
}
}
});
$('#displayDate').datepicker({
dateFormat: 'M dd, yy',
minDate: '-6m',
maxDate: '6m',
showButtonPanel: true
});
});
答案 0 :(得分：0)
你的最后一行，
$('#startHour' + num + ':').after(endampm);
...
似乎是错的。您可能想要的是
$('#startHour' + num + ':').insertAfter(endampm);
...