动态创建的输入字段上的日期范围选取器

Daterangepicker on dynamically created input field

本文关键字：范围 选取 日期 字段 创建 输入 动态      更新时间：2023-09-26

I use daterangerpicker github link.我想在按下按钮时使用javascript创建新的输入字段。如何使日期范围选取器脚本正常工作？我不是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>

我尝试了其他方式：使用类（一个类中的每个输入）但不起作用

$('.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>";

非常感谢您的帮助！

你的代码应该是这样的：

脚本.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
    } 
  });
}
});

索引.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>

这是一个工作演示

一种

不同的函数方法，它解决了所有这些字符串连接和随机创建的 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();
}
相关文章：