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

我使用daterangerpicker github link。当我按下按钮时，我会喜欢用javascript创建新的输入字段。如何让daterangepicker脚本工作？我不是一个JavaScript专家，对不起，我的哑巴脚本:(动态创建的输入字段上的Daterangepicker

这不是工作：

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

非常感谢您的帮助！

来源

2016-02-05 Mike

嗨麦克，你能请注明什么是不工作，你要实现你的代码是什么？ – A1rPun

你的代码应该是这样的：

的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

来源

2016-02-05 11:43:03 aitnasser

呵呵，这个脚本，不需要添加html，我好傻！ – Mike

不同approa CH给你的函数，ithout所有这些字符串级联和随机生成的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(); 
}

来源

2016-02-05 11:53:54 Thomas

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

回答

相关问题