Daterangepicker on dynamically created input field

Question

I use daterangerpicker github link . I would llike to create new input fields with javascript, when you press a button. How can I get the daterangepicker script to work? I'm not a javascript expert, sorry for my dumb script :(

This isn't working:

<script type='text/javascript'>
function add()
{

  var randnum = Math.floor((Math.random() * 100) + 1); 
  var cont_div = document.getElementById('content');

  var text = document.createElement('div');
  var plus_row = '<p><label>day:';
  plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" id="new_'+randnum+'_date" size="60" value="">';
  plus_row += '</label></p>';  
  plus_row += '<script type="text/javascript">';
  plus_row += "$('#new_"+randnum+"_date').dateRangePicker(";
  plus_row += "{autoClose: true,separator: ' - ',startOfWeek: 'monday',singleDate : false,timePicker: true,timePickerIncrement: 30,";
  plus_row += "startDate: '2016-01-01',language: 'en',format: 'YYYY-MM-DD HH:mm',showShortcuts: false,time: {enabled: true} });"; 
  plus_row += "$('#new_"+randnum+"_date').data().daterangepicker.updateCalendars();";
  plus_row += "</scr"+"ipt>";
  text.innerHTML = plus_row;
  cont_div.appendChild(text);

}

<body>

  <p>Please select a date
      <div id="content">

        <p><label>day:              
          <input style="width:300px;" name="date1" type="text" id="date1" size="60" value="">
        </label></p>


     <input type="button" id="more" onclick="add();" value="+">
    </div>
  </p>

<script type="text/javascript">
  $('#date1').dateRangePicker(
    { autoClose: true,
    separator: ' - ',
    startOfWeek: 'monday',
    singleDate : false,
    timePicker: true,
    timePickerIncrement: 30,
    startDate: '2016-01-01',
    language: 'en',
    format: 'YYYY-MM-DD HH:mm',
    showShortcuts: false,
    time: 
    {
    enabled: true
    } 
  });

  </script>

I tried in other ways: with class (every input in one class) but not working

$('.date_class').dateRangePicker(
plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" class="date_class" size="60" value="">';

without the script part:

plus_row += '<script type="text/javascript">'; ... plus_row += "</scr"+"ipt>";

Thank you so much for your help!

Answer 1

your code should be like:

script.js

 $(function(){

$('#date1').dateRangePicker(
    { autoClose: true,
    separator: ' - ',
    startOfWeek: 'monday',
    singleDate : false,
    timePicker: true,
    timePickerIncrement: 30,
    startDate: '2016-01-01',
    language: 'en',
    format: 'YYYY-MM-DD HH:mm',
    showShortcuts: false,
    time: 
    {
    enabled: true
    } 
  });


  add=function()
{

  var randnum = Math.floor((Math.random() * 100) + 1); 
  var cont_div = document.getElementById('content');
  var text = document.createElement('div');
  var plus_row = '<p><label>day:';
  plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" id="new_'+randnum+'_date" size="60" value="">';
  plus_row += '</label></p>';  
  text.innerHTML = plus_row;
  cont_div.appendChild(text);
    $('#new_'+randnum+'_date').dateRangePicker(
    { autoClose: true,
    separator: ' - ',
    startOfWeek: 'monday',
    singleDate : false,
    timePicker: true,
    timePickerIncrement: 30,
    startDate: '2016-01-01',
    language: 'en',
    format: 'YYYY-MM-DD HH:mm',
    showShortcuts: false,
    time: 
    {
    enabled: true
    } 
  });

}

});

index.html

<!DOCTYPE html>
<html>    
  <head>       
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <link rel="stylesheet" href=" https://longbill.github.io/jquery-date-range-picker/daterangepicker.css" />
     <script  src="https://longbill.github.io/jquery-date-range-picker/moment.min.js"></script>
     <script  src="https://longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
    <script src="script.js"></script>
  </head>    
 <body>
      <div id="content">
        <p><label>day:              
          <input style="width:300px;" name="date1" type="text" id="date1" size="60" value="">
        </label>
        </p>
     <input type="button" id="more" onclick="add();" value="+">
    </div>    
 </body>
</html>

this a working demo

Answer 2

a different approach to your function, ithout all this String-concatenation and randomly created id's

//an utility, because i don't like $('<nodeName>'), because of the way it works
//simply creates a jquery wrapped node
function $n(nn){ return $(document.createElement(nn||'div')) }

function add(){

    //give it a proper (non randomized) name, so the backend can find the value
    //and what do you need a (random) id for? you have a reference.
    var $input = $n('input').attr({ size: 60 }).width(300); 

    //removed the (anonymous) div
    $n('p').insertBefore('#more').append(
        $n('label').text("day: ").append( $input )
    )

    $input.dateRangePicker({
        autoClose: true,
        separator: ' - ',
        startOfWeek: 'monday',
        singleDate : false,
        timePicker: true,
        timePickerIncrement: 30,
        startDate: '2016-01-01',
        language: 'en',
        format: 'YYYY-MM-DD HH:mm',
        showShortcuts: false,
        time: {enabled: true} 
    });
    $input.data().daterangepicker.updateCalendars();
}

Daterangepicker on dynamically created input field

Question

2 answers

solution1
0 ACCPTED 2016-02-05 11:43:03

solution2
0 2016-02-05 11:53:54

Daterangepicker on dynamically created input field

Question

2 answers

solution1 0 ACCPTED 2016-02-05 11:43:03

solution2 0 2016-02-05 11:53:54

solution1
0 ACCPTED 2016-02-05 11:43:03

solution2
0 2016-02-05 11:53:54