Javascript 动态创建的输入字段上的Daterangepicker_Javascript_Jquery_Dynamically Generated_Daterangepicker

Javascript 动态创建的输入字段上的Daterangepicker

javascript jquery

Javascript 动态创建的输入字段上的Daterangepicker,javascript,jquery,dynamically-generated,daterangepicker,Javascript,Jquery,Dynamically Generated,Daterangepicker,我用daterangerpicker。当你按下按钮时，我想用javascript创建新的输入字段。如何让daterangepicker脚本工作？我不是javascript专家，很抱歉我的愚蠢脚本：( 这不起作用： <script type='text/javascript'> function add() { var randnum = Math.floor((Math.random() * 100) + 1); var cont_div = document.getE

我用daterangerpicker。当你按下按钮时，我想用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);

}


函数add（）
{
var randnum=Math.floor（（Math.random（）*100）+1）；
var cont_div=document.getElementById（'content'）；
var text=document.createElement（'div'）；
var加上_行='day:'；
加上_行+=''；
加号行+=''；
加上_行+=''；
plus_row+=“$”（“#new”+randnum+“_date”）.dateRangePicker（”；
plus_row+=“{autoClose:true，分隔符：'-'，startOfWeek:'monday'，singleDate:false，timePicker:true，timePickerIncrement:30，”；
plus_row+=“开始日期：2016-01-01”，语言：en，格式：YYYY-MM-DD HH:MM”，showShortcuts:false，时间：{enabled:true}}）；
plus_row+=“$”（“#new#”+randnum+“_date”）.data（）.daterangepicker.updateCalendars（）；”；
加号行+=“”；
text.innerHTML=加号行；
续附件（正文）；
}


请选择一个日期
日期：


$（'#date1'）。日期范围选择器(
{自动关闭：正确，
分隔符：'-'，
星期一:"星期一",，
singleDate:false，
时间选择器：是的，
时间选择器增量：30，
起始日期：“2016-01-01”，
语言:"en",，
格式：“YYYY-MM-DD HH:MM”，
显示快捷方式：错误，
时间：
{
已启用：true
} 
});

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

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

$（'.date_class'）。日期范围选择器(
加上_行+=''；

没有脚本部分：

plus\u row+=”；…plus\u row+=”；

非常感谢您的帮助！

您的代码应该是：

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
    } 
  });

}

});

$（函数（）{
$（'#date1'）。日期范围选择器(
{自动关闭：正确，
分隔符：'-'，
星期一:"星期一",，
singleDate:false，
时间选择器：是的，
时间选择器增量：30，
起始日期：“2016-01-01”，
语言:"en",，
格式：“YYYY-MM-DD HH:MM”，
显示快捷方式：错误，
时间：
{
已启用：true
} 
});
add=函数（）
{
var randnum=Math.floor（（Math.random（）*100）+1）；
var cont_div=document.getElementById（'content'）；
var text=document.createElement（'div'）；
var加上_行='day:'；
加上_行+=''；
加号行+=''；
text.innerHTML=加号行；
续附件（正文）；
$（“#新的”+randnum+“#date”）.dateRangePicker(
{自动关闭：正确，
分隔符：'-'，
星期一:"星期一",，
singleDate:false，
时间选择器：是的，
时间选择器增量：30，
起始日期：“2016-01-01”，
语言:"en",，
格式：“YYYY-MM-DD HH:MM”，
显示快捷方式：错误，
时间：
{
已启用：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>


日期：

这是一种不同的函数方法，没有所有的字符串连接和随机创建的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();
}

//一个实用工具，因为我不喜欢$（''），因为它的工作方式
//只需创建一个jquery包装的节点
函数$n（nn）{return$（document.createElement（nn | |'div'））}
函数add（）{
//给它一个合适的（非随机）名称，以便后端可以找到该值
//你需要一个（随机的）身份证干什么？你有一个推荐人。
var$input=$n（'input'）.attr（{size:60}）.width（300）；
//删除了（匿名）div
$n（'p'）。在（'#more'）之前插入。追加(
$n（'label'）。文本（“日期：”）。追加（$input）
)
$input.dateRangePicker({
自动关闭：是的，
分隔符：'-'，
星期一:"星期一",，
singleDate:false，
时间选择器：是的，
时间选择器增量：30，
起始日期：“2016-01-01”，
语言:"en",，
格式：“YYYY-MM-DD HH:MM”，
显示快捷方式：错误，
时间：{enabled:true}
});
$input.data（）.daterangepicker.updateCalendars（）；
}

嘿，迈克，你能说明什么不起作用以及你想用你的代码实现什么吗？哦，这是一个脚本，不需要添加html，我太笨了！

//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();
}