Несколько DatePicker на одной странице с AJAX - PullRequest
Новая
       11

Несколько DatePicker на одной странице с AJAX

0 голосов
/ 19 сентября 2018

Я очень новичок в JS, но мне удалось склеить такой код.Прекрасно работает для одного ввода: 

<input type="text" class="form-control" id="1" name="date" placeholder="MM/DD/YYYY" >

		    $('#date').datepicker({
    todayBtn: true,
    daysOfWeekDisabled: "0",
    autoclose: true,
    todayHighlight: true
	
    }); 
	
	$("#date").datepicker({ dateFormat: 'dd/mm/yy' })
              .on("changeDate", function(e) {
                  var datetime = $("#date").datepicker("getDate").toISOString();
				  var datetime2 = e.format();
                  $.ajax({
                      type: "POST",
                      url: 'test4.php',
                      data: { 
        name : '<?php echo $exvar;?>',
        date2 : datetime2
    },
              });
});

Как добавить больше входных данных, вероятно, будет так: 

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

Что изменить в JS, чтобы и DatePicker, и AJAX работали правильно.Как читать переменные в AJAX, которые специально читает DatePicker.Спасибо большое.Шимон

1 Ответ

0 голосов
/ 19 сентября 2018

Вы можете использовать общий класс CSS («datepick» в вашем коде), чтобы применить указатель даты и событие change ко всем текстовым полям одновременно.Затем в обработчике событий вы можете использовать this для ссылки на конкретное текстовое поле, которое вызвало событие.

PS Насколько я знаю, нет события "changeDate" (если вы не определили какое-то пользовательское за пределамиэтот код), и предоставленное событие e не имеет метода format ().Я предположил, что вы действительно хотите получить значение из указателя даты, поэтому вместо этого я использовал его в вашем вызове ajax.Я также вошел в консоль, так что это видно в этой демонстрации.Вам также нужно вызвать функцию «DatePicker» только один раз: 

$(function() {
  $('.datepick').datepicker({
    todayBtn: true,
    daysOfWeekDisabled: "0",
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy'
  }).on("change", function(e) {
    var datetime = $(this).datepicker("getDate").toISOString();
    console.log(datetime);
    $.ajax({
      type: "POST",
      url: 'test4.php',
      data: {
        name: '<?php echo $exvar;?>',
        date2: datetime
      },
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
...