Добавляйте больше выбора даты по клику

У меня есть функция JS, которая создает новый HTML-код, когда я нажимаю кнопку, и я пытаюсь сделать так, чтобы при нажатии создавалось новое средство выбора даты. Я использую выбор даты.

Каждый раз, когда моя функция создает новый ввод, она добавляет число к конечному имени. Это по причинам, связанным с базой данных.

Итак, на данный момент в моем 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>

Я понимаю, что для того, чтобы средство выбора даты работало, оно должно получать ввод по имени

Вы хотите, чтобы все входные данные были датпикером?

— 16.12.2018 15:59

Да, каждый раз, когда я создаю ввод, это должен быть выбор даты

— 16.12.2018 16:01

javascript html dom datepicker

16.12.2018 15:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

139

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Идеально! Я знал, что нужно что-то подобное, но не мог сложить это воедино.

— 16.12.2018 16:15

16.12.2018 16:03