Циклы кнопок для создания нескольких сборщиков дат Jquery - PullRequest
0 голосов
/ 29 марта 2019

Я работал с этим примером jquery datepicker здесь. https://jsfiddle.net/jakecigar/Lkqopvc8/5/

У меня есть кнопка, которая имеет функцию javascript, которая вызывается. Предполагается, что в идеале генерировать новый указатель даты при каждом нажатии. Я могу сгенерировать 3 ввода type = 'text', но ни один из них не работает с jquery datepicker. Если я изменю тип ввода = 'date', это работает, но это не средство выбора даты jquery.

Любая помощь будет принята с благодарностью! Спасибо!

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>

1 Ответ

1 голос
/ 29 марта 2019

В вашем коде есть две проблемы. Во-первых, вы не предоставляете элементам input, которые вы создаете, с любым атрибутом id, поэтому ваш селектор не работает. Во-вторых, второй цикл повторяется по j, а не i, поэтому последняя строка должна быть $(dateIdsHash[j]).datepicker();. Ты это:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...