我的日期选择器在简单的代码中工作。 在插入新行<tr>
中使用它后,在单击中不起作用。 但是我可以在第一次单击<input/>
时获得该对象。单击其他input
并再次尝试单击以显示日期选择器的弹出窗口时,这是有效的。
我的jQuery:
$('#myTable tr:last').after("<tr><td align='center'style='background-color:"+rcolor+"'>"+rowCount+
"</td><td><input style='width:300px !important;' name='onvan' /></td>"+
"<td><input style='width:100px !important;' name='' id='startdate'/></td>"+
"<td><input style='width:100px !important;' name='' id='enddate'/></td>"+
"<td><input style='width:100px !important;' name='' id='' /></td>"+
"<td>"+
"<select name='visible'>"+
"<option></option>"+
"<option></option>"+
"<option></option>"+
"<option></option>"+
"<option></option>"+
"<option></option>"+
"</select></td>"+
"<td><select name='visible'><option value='1' >فعال</option><option value='0' >غیرفعال</option></select>"+
" <span id='saveToDb'><a href='#'>ذخیره</a></span> <span id='cancelToSave'><a href='#'>لفو</a></span></td>"+
"</tr>");
数据选取器:
$(function() {
$('#startdate').live('click', function() {
// alert( $(this));
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy/mm/dd',
minDate: '-3y',
maxDate: '+3y',
regional: 'fa',
onSelect: function (dateText, inst) {
var date = new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']).getGregorianDate();
var month= (date.getMonth()+1).toString();
if (month.length <2) month='0'+ month;
var day= date.getDate().toString();
if (day.length <2) day ='0'+ day;
$('#taTarikh').val(date.getFullYear() + '-' + month + '-' + day);
// alert($('#taTarikh').val());
}
});
});
});
有了.live('click',function(){});
,您通过第一次单击实现日期选择器,这就是为什么它在第二次单击时开始工作的原因。
您应该在创建对象后实现日期选择器。
$(function() {
$('#myTable tr:last').after("<tr><td align='center'style='background-color:yellow'>3</td><td><input style='width:300px !important;' name='onvan' /></td>" + "<td><input style='width:100px !important;' name='' id='startdate'/></td>" + "<td><input style='width:100px !important;' name='' id='enddate'/></td>" + "<td><input style='width:100px !important;' name='' id='' /></td>" + "<td>" + "<select name='visible'>" + "<option></option>" + "<option></option>" + "<option></option>" + "<option></option>" + "<option></option>" + "<option></option>" + "</select></td>" + "<td><select name='visible'><option value='1' >فعال</option><option value='0' >غیرفعال</option></select>" + " <span id='saveToDb'><a href='#'>ذخیره</a></span> <span id='cancelToSave'><a href='#'>لفو</a></span></td>" + "</tr>");
$("#startdate").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy/mm/dd',
minDate: '-3y',
maxDate: '+3y',
regional: 'fa',
onSelect: function(dateText, inst) {
var date = new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']).getGregorianDate();
var month = (date.getMonth() + 1).toString();
if (month.length < 2) month = '0' + month;
var day = date.getDate().toString();
if (day.length < 2) day = '0' + day;
$('#taTarikh').val(date.getFullYear() + '-' + month + '-' + day);
// alert($('#taTarikh').val());
}
});
});
演示:http://jsfiddle.net/BerkerYuceer/pBQFF/14/