Flatpickr: Отправить форму OnChange дата

Я пытаюсь использовать OnChange для отправки выбранной даты в мою форму, чтобы перезагрузить мою страницу с выбранной датой в параметре URL, но я не могу найти, как это сделать.

Ранее я использовал jQuery datepicker, и это было довольно просто.

<form id="form" method="GET">
<input type="text" id="basicDate" placeholder="Please select Date Time" data-input>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
  <script>
 $("#basicDate").flatpickr({
    enableTime: false,
    dateFormat: "Y-m-d",
});
 </script>

ранее, с помощью выбора даты jQuery:

<form method='POST' enctype='multipart/form-data' id='formId'>
  <input type="text" id="datepicker"/>
</form>

$(document).ready(function() {
  $('#datepicker').datepicker({
       onSelect : function (dateText, inst) {
          $('#formId').submit(); // <-- SUBMIT
  }});
});

1 ответ

Решение

Вы можете отправить форму, когда ввод был изменен, а также проверить, что ввод не пустой. Вот код для этого:

<form id="form" method="GET">
<input type="text" id="basicDate" placeholder="Please select Date Time" data-input>
</form>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
  <script>
$(document).ready(function(){
 $("#basicDate").flatpickr({
    enableTime: false,
    dateFormat: "Y-m-d",
});
});
$(document).on('change','#basicDate',function(){

    if($('#basicDate').val() != ''){
       $('#form').submit();
}
});

Другие вопросы по тегам