Question

我有一个JS函数，当我单击按钮时，它会创建新的HTML，而我试图这样做，因此在单击时创建了一个新的日期选择器。这里是我正在使用的date picker。

每次我的函数创建一个新输入时，它都会在结束名称上添加一个数字。这是由于数据库相关的原因。

因此，目前在我的HTML中，输入名称为 DropOffDate1 ，但是当我单击按钮并创建新输入时，名称为 DropOffDate2 ，然后我再次单击它将是 DropOffDate3 ，依此类推。基本上输入名称自动递增。

我要解释的原因是Datapicker函数正在查找DropOffDate1的输入名称。

（'input [name =“ DropOffDate1”]'）

但是，由于创建新输入时，名称更改为DropOffDate2，因此该函数无法再找到输入名称。

我希望这是有道理的。

我还感觉到它是不起作用的，因为在页面加载时执行了日期选择器代码，并且一旦加载它，就没有任何告诉它重新使用代码的理由。

codpen

var room = 1;
function add_fields() {
  room++;
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  divtest.innerHTML =
    '<div class="control-group">' +
    "<label>Date</label>" +
    '<div class="controls">' +
    '<input type="text" name="DropOffDate' +
    room +
    ' " class="input-border" />' +
    "</div>" +
    "</div>";

  objTo.appendChild(divtest);
}

$(function() {
  $('input[name="DropOffDate1"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});

<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">
  </script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js">
  </script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js">
  </script>
  
  <link rel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

      
      <label>Date</label>
      <input type="text" name="DropOffDate1" class="input-border" />
      <div id="text">
        <input type="button" id="more_fields" class="btn mt-3 mb-2" onclick="add_fields();" value="Add More" />
        <div id="room_fileds">
        </div>
      </div>

我意识到，要使日期选择器正常工作，必须使用名称

进行输入

Answer 1

您需要的是这样的通用函数，它将处理所有daterangepicker初始化，因为这是您需要动态绑定的事件，因此您可以创建通用函数来处理此事件。

function assignDatePicker(elementToAdd) {
  $('input[name='+elementToAdd+']').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
}

var room = 1;
function add_fields() {
  room++;
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  var name = "DropOffDate"+    room;
  divtest.innerHTML =
    '<div class="control-group">' +
    "<label>Date</label>" +
    '<div class="controls">' +
    '<input type="text" name="' +
    name +
    '" class="input-border" />' +
    "</div>" +
    "</div>";

  objTo.appendChild(divtest);  
  assignDatePicker(name);
  
}

function assignDatePicker(elementToAdd) {
  $('input[name='+elementToAdd+']').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
}

assignDatePicker("DropOffDate"+    room);

<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js">
  </script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js">
  </script>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js">
  </script>
  
  <link rel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

      
      <label>Date</label>
      <input type="text" name="DropOffDate1" class="input-border" />
      <div id="text">
        <input type="button" id="more_fields" class="btn mt-3 mb-2" onclick="add_fields();" value="Add More" />
        <div id="room_fileds">
        </div>
      </div>

点击添加更多日期选择器

1 个答案: