Как в JQ UI Datepicker всегда показывать дату в поле ввода

Question

Я реализовал в своем приложении календарь JQ Datepicker в его версии по умолчанию, но я не могу понять, как всегда отображать в поле ввода дату сегодняшнюю дату, чтобы быть точной. Теперь, когда я открываю страницу, где находится средство выбора даты, поле ввода остается пустым, пока я не выберу нужную дату. Что я хотел бы видеть, так это то, что дата всегда отображается в поле ввода, если это возможно.

Мой DatePicker:

//Date Picker
  $("*[data-behavior~=shipping-date-input]").datepicker({
    onSelect: function() {
      digest = cargoflux.generateUUID();
      cargoflux.resetCalculatedFields();

      clearTimeout(timeOut);
      timeOut = setTimeout(function() {
        if (cargoflux.validInput()) {
          cargoflux.resetCalculatedFields();
          cargoflux.getAvailableCarrierProducts();
        }
      }, 1500);
    },
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    altField: "#recorded-at-alt",
    dateFormat: "yy-mm-dd",
    minDate: "-1Y",
    maxDate: "+1Y"

  });

Снимок экрана того, что я имею в виду, поскольку вы видите, что ввод пуст в его исходном состоянии:

Answer 1

Чтобы заполнить value текстового поля, вы можете использовать функцию $.datepicker.formatDate( format, date, options ).Вот пример:

$(function() {
  var dtFt = "yy-mm-dd";
  $("#datepicker").datepicker({
    onSelect: function() {
      /*digest = cargoflux.generateUUID();
      cargoflux.resetCalculatedFields();

      clearTimeout(timeOut);
      timeOut = setTimeout(function() {
        if (cargoflux.validInput()) {
          cargoflux.resetCalculatedFields();
          cargoflux.getAvailableCarrierProducts();
        }
      }, 1500);
      */
    },
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    //altField: "#recorded-at-alt",
    dateFormat: dtFt,
    minDate: "-1Y",
    maxDate: "+1Y"
  }).val($.datepicker.formatDate(dtFt, new Date()));
});

<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>
<p>Date: <input type="text" id="datepicker"></p>

Как видите, мы заполняем значение текстового поля $("#datepicker").val();.

Надеюсь, это поможет.