Question

我使用daterangepericker github link。当你按下按钮时，我想用javascript创建新的输入字段。如何让daterangepicker脚本工作？我不是javascript专家，对不起我的愚蠢脚本:(

这不起作用：

<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>

我试过其他方式： with class（一个类中的每个输入）但不工作

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

没有脚本部分：

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

非常感谢你的帮助！

Answer 1

您的代码应该像：

<强>的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>

这是working demo

Answer 2

一种不同的函数方法，没有所有这些String-concatenation和随机创建的id

//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

2 个答案: