如何在JQ UI Datepicker中始终显示输入字段中的日期

Question

我在其应用程序中实现了默认版本的JQ 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();。

希望有帮助。