onSelect не работает с виджетом Datepicker

Question

Похоже, что Javascript не включается при выборе чего-либо. Я уже установил там предупреждение, которое не отображается (другие функции onChange в моем скрипте работают)

Когда пользователь нажимает на дату, должно отображаться выпадающее меню с динамическими параметрами.

$(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
  });
});

var status = 0;
$(document).ready(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
    onSelect: function(dateText, inst) {
      var datum = $(this).datepicker("getDate");
      alert("Datum erfolgreich ausgelesen: " + datum);

      if (datum) {
        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: 'datum=' + datum,
          success: function(html) {
            $('#uhrzeit').html(html);
          }
        });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label for="cal">Wunschtermin Buchen
  <div id="cal" name="cal"></div>
</label>

Answer 1

Объявите это только один раз, вот как это работает:

 <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
var status = 0;
$(document).ready(function(){
    $( "#cal" ).datepicker({
        format: 'yyyy-mm-dd',
        onSelect: function (dateText, inst){
            var datum = $(this).datepicker( "getDate" );
            alert("Datum erfolgreich ausgelesen: "+datum);

            if(datum){
                $.ajax({
                    type:'GET',
                    url:'ajax.php',
                    data: 'datum='+datum,
                    success:function(html){
                        $('#uhrzeit').html(html);
                    }           
                });
            }
        }
    });
});

</script>
<label for = "cal">Wunschtermin Buchen
   <div id="cal" name="cal"></div>
</label>

Answer 2

Проблема заключается в том, что вы уже определили средство выбора даты для элемента #cal в своем первом обработчике document.ready, поэтому попытка инициализировать его снова с другими настройками во втором документе .ready игнорируется.

Чтобы это исправить, объедините оба обработчика document.ready с одним и создайте экземпляр #cal datepicker один раз с all необходимыми настройками, например:

var status = 0;

$(function() {
  $("#cal").datepicker({
    format: 'yyyy-mm-dd',
    onSelect: function(dateText, inst) {
      var datum = $(this).datepicker("getDate");
      console.log("Datum erfolgreich ausgelesen: " + datum);

      if (datum) {
        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: { datum: datum },
          success: function(html) {
            $('#uhrzeit').html(html);
          }
        });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<label for="cal">Wunschtermin Buchen
  <div id="cal" name="cal"></div>
</label>

Также обратите внимание на использование объекта в data здесь, чтобы позволить jQuery сериализовать строку запроса для вас, а также использование console.log() вместо alert() для отладки.Следует избегать последнего, так как он приводит к типам данных, а также блокирует поток пользовательского интерфейса, что раздражает.