按钮循环生成多个Jquery datepicker

Question

我一直在这里使用此jquery datepicker示例。 https://jsfiddle.net/jakecigar/Lkqopvc8/5/

我有一个按钮，它具有一个称为javascript的函数。 理想情况下，每次单击都会生成一个新的日期选择器。 我可以生成3个输入type ='text'，但是它们都不能与jquery datepicker一起使用。 如果我更改input type ='date'，那可以，但是它不是jquery datepicker。

任何帮助将不胜感激！ 谢谢！

PS。 您可以忽略全局var变量，这只是为了限制创建的日期选择器的数量。

这是我的JS / HTML / JQuery代码。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="//code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<style id="compiled-css" type="text/css">

#date-list{


    list-style:none;

</style>

</head>
<body>

<center>    
    <button onclick = "countButton()">Count</button>
<ul id = "date-list">

</ul>

    </center>

  <script type="text/javascript">

//GLOBAL VARIABLES


var ul = document.getElementById("date-list");  
var dateIds = ["datepicker1", "datepicker2", "datepicker3"]; 
var dateIdsHash = ["#datepicker1", "#datepicker2", "#datepicker3"];
var dateNumbers = ["1", "2", "3"]; 
var count = 0;  
var dateNumbersCounted;   
var dateIdsCounted;

function countButton(){


for(var i =0; i < 3; i++){

    ul.innerHTML += "<li class='my-date'>Date " + 
    dateNumbers[i] + 
    " <input type='text'></li><br>";


}; 


var tags = document.getElementsByTagName("input");      

for(var j = 0; j < tags.length; j++){

    tags[j].id = dateIds[j];

$.datepicker.setDefaults({
  changeMonth: true,
  changeYear: true,
  dateFormat: "yy-mm-dd"
  //  any more global options from Datepicker Widget | jQuery UI API Documentation
})

$(dateIdsHash[i]).datepicker();

};    


}   

</script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "Lkqopvc8"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>
</body>
</html>

Answer 1

您的代码中有两个问题。 首先，您不为创建的input元素提供任何id属性，因此选择器失败。 其次，第二个循环遍历j ，而不是i ，所以最后一行应该是$(dateIdsHash[j]).datepicker(); 。 Tyr：

 var ul = document.getElementById("date-list"); var dateIds = ["datepicker1", "datepicker2", "datepicker3"]; var dateIdsHash = ["#datepicker1", "#datepicker2", "#datepicker3"]; var dateNumbers = ["1", "2", "3"]; var count = 0; var dateNumbersCounted; var dateIdsCounted; function countButton() { for (var i = 0; i < 3; i++) { ul.innerHTML += "<li class='my-date'>Date " + dateNumbers[i] + " <input type='text' id='" + dateIdsHash[i].replace('#', '') + "'></li><br>"; }; var tags = document.getElementsByTagName("input"); for (var j = 0; j < tags.length; j++) { tags[j].id = dateIds[j]; $.datepicker.setDefaults({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd" // any more global options from Datepicker Widget | jQuery UI API Documentation }) $(dateIdsHash[j]).datepicker(); }; } 

 #date-list { list-style: none; 

 <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <center> <button onclick="countButton()">Count</button> <ul id="date-list"></ul> </center> 

话虽如此，如果您使用jQuery方法，则可以使此逻辑更加简洁。

 var $ul = $("#date-list"); var $countButton = $('#count').on('click', function() { var li = (new Array(3)).fill('<li class="my-date">Date <input type="text" /></li>'); $ul.append(li); $('.my-date input').datepicker(); }); 

 #date-list { list-style: none; } .my-date { margin: 0 0 15px; } 

 <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <center> <button id="count">Count</button> <ul id="date-list"></ul> </center>