CODEWITHSUNDEEP
javascripthtmldomdatepicker
Connor
Connor

Reputation: 349

Add more date pickers on click

I have a JS function which creates new HTML when I click on a button and I'm trying to make it so creates a new date picker on click. Here the date picker I'm using.

Every time my function creates a new input it adds a number onto the end name. This is for database related reasons.

So at the moment in my HTML the name for input is DropOffDate1 but when i click on the button and create a new input the name is DropOffDate2 then I click again and it will be DropOffDate3 and so on. Basically input name autoincrement.

The reason I'm explaining this is that the Datapicker function looks for an input name of DropOffDate1.

('input[name="DropOffDate1"]')

However, since when I create a new input the name changes to DropOffDate2 the function can no longer find the input name.

I hope this makes sense.

I also have a feeling it's not working because of the date picker code executing on page load and once it loaded there's nothing telling it to excuse the code again.

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>

I realise that in order for the date picker to work it has to get the input by the name

Upvotes: 1

Views: 370

Answers (1)

Just code
Just code

Reputation: 13801

What you need is common function like this, which will handle all the daterangepicker initialization as this is the event you need to bind the dynamically you can create common function which will handle this.

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>

Upvotes: 1

Related Questions