javascript - 日期时间选择器在 Javascript 代码中不起作用

Question

当我将日期时间选择器放在 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 &nbsp: "+ 
        "<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>"+ 
        "&nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <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> &nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> &nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"+
        "<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:&nbsp;</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>"+
        "&nbsp;<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");
});	

Answer 1

首先，在 addToFilter 函数中，当您从第二行为 startDate 和 endDate 添加日期时间选择器时，不能有两个具有相同 id 的元素，它将被复制，因此它不会以任何方式工作

其次，当您将 HTML 元素推送到 View 中时，需要调用日期时间选择器

所以你的代码将变成

function addToFilter(divName)
{
  var val= document.getElementById('filter').value;
  var newdiv = document.createElement('div');
  switch(val)
  {
    case 'mcus': 
      newdiv.innerHTML = "Multi company use case &nbsp: "+ 
        "<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>"+ 
        "&nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <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> &nbsp;<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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> &nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"+
        "<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:&nbsp;</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>"+
        "&nbsp;<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");
});