私は新しい分野で働いており、クローン作成をテストしています。助けがあれば、私が必要としているものとまったく同じように機能すると思います。主なアイデアは、2番目の日付（終了日）を選択した後、適切な数の開始時刻と終了時刻を作成することです。たとえば、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
});
});