当我把它放在javascript代码中时，我的日期时间选择器没有用，但是当它的外部javascript它工作正常。如果有人可以解决这个问题，或者可以告诉我如何以类似的方式访问javascript代码之外的日期时间选择器。在下面的代码中，我基于选择框选择事件动态添加表单元素。
function addToFilter(divName)
{
var val= document.getElementById('filter').value;
var newdiv = document.createElement('div');
switch(val)
{
case 'mcus':
newdiv.innerHTML = "Multi company use case  : "+
"<select id='mcuc_selection'>"+
"<option value='select'>--select--</option><option value='ags'>AGS</option><option value='agl'>AGL</option><option value='nafn'>NAFN</option></select>"+
" <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'>"+
"<hr style='width:700px; margin-left:0px;'>";
break;
case 'oc':
newdiv.innerHTML = "Order Condition : <select id='oc_selection'><option value='select'>--select--</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select> <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
case 'ot':
newdiv.innerHTML = "Order Type : <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
case 'dt':
newdiv.innerHTML = "Date&Time :"+
"<div id='startDate' class='input-append date'>"+
"<label>Start Date&Time: </label>"+
"<input type='text' style='width:200px; height:15%'></input>"+
"<span class='add-on' style='height:26px'>"+
"<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+
"</span>"+
"</div>"+
"<div id='endDate' class='input-append date' style='margin-left:400px; margin-top:-30px'>"+
"<label>End Date&Time: </label>"+
"<input type='text' style='width:200px; height:15%'></input>"+
"<span class='add-on' style='height:26px'>"+
"<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+
"</span>"+
"</div>"+
" <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
}
document.getElementById(divName).appendChild(newdiv);
}
$('#startDate').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss PP',
language: 'en',
pick12HourFormat: true
});
$('body').click(function (evt) {
$(".startDate, .dropdown-menu").css("display","none");
});
$('#endDate').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss PP',
language: 'en',
pick12HourFormat: true
});
$('body').click(function (evt) {
$(".endDate, .dropdown-menu").css("display","none");
});
答案 0 :(得分：0)
首先，你不能拥有两个具有相同id的元素，当你为startDate添加datetime选择器时addToFilter函数和第二行中的endDate将被复制，所以它不会在任何地方工作方式
其次，在视图中推送HTML元素时需要调用datetime选择器
所以你的代码将成为
function addToFilter(divName)
{
var val= document.getElementById('filter').value;
var newdiv = document.createElement('div');
switch(val)
{
case 'mcus':
newdiv.innerHTML = "Multi company use case  : "+
"<select id='mcuc_selection'>"+
"<option value='select'>--select--</option><option value='ags'>AGS</option><option value='agl'>AGL</option><option value='nafn'>NAFN</option></select>"+
" <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'>"+
"<hr style='width:700px; margin-left:0px;'>";
break;
case 'oc':
newdiv.innerHTML = "Order Condition : <select id='oc_selection'><option value='select'>--select--</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select> <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
case 'ot':
newdiv.innerHTML = "Order Type : <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
case 'dt':
newdiv.innerHTML = "Date&Time :"+
"<div class='startDatePicker input-append date'>"+
"<label>Start Date&Time: </label>"+
"<input type='text' style='width:200px; height:15%'></input>"+
"<span class='add-on' style='height:26px'>"+
"<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+
"</span>"+
"</div>"+
"<div class='endDatePicker input-append date' style='margin-left:400px; margin-top:-30px'>"+
"<label>End Date&Time: </label>"+
"<input type='text' style='width:200px; height:15%'></input>"+
"<span class='add-on' style='height:26px'>"+
"<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+
"</span>"+
"</div>"+
" <img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>";
break;
}
document.getElementById(divName).appendChild(newdiv);
bindDatePickers($('#'+divName))
}
function bindDatePickers(element) {
$($(element).find('.startDatePicker')).datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss PP',
language: 'en',
pick12HourFormat: true
});
$($(element).find('.endDatePicker')).datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss PP',
language: 'en',
pick12HourFormat: true
});
}
$('body').click(function (evt) {
$(".startDate, .dropdown-menu").css("display","none");
});
$('body').click(function (evt) {
$(".endDate, .dropdown-menu").css("display","none");
});