如何在 JQueryUI DatePicker 控件中显示“加载”文本 onChangeMonthYear？答案

【问题标题】：How may I display 'loading' text onChangeMonthYear in the JQueryUI DatePicker control?如何在 JQueryUI DatePicker 控件中显示“加载”文本 onChangeMonthYear？
【发布时间】：2020-04-11 07:15:17
【问题描述】：

JQueryUI datepicker 控件有一个 onChangeMonthYear 方法，该方法调用基于 REST 的服务来获取日期。该服务需要一些时间才能将日期返回到 UI，并且日历似乎会挂起大约。在切换到新月份前两秒。

我希望在调用服务并处理返回数据时显示某种类型的“正在加载...”文本或微调器图形。

我尝试使用 $("#checkingAvailability").show(); 设置在通话期间显示的标签但是，直到数据返回后，UI 才会更新。

我真正需要做的是在基于 REST 的服务正在返回数据时隐藏日历控件并显示“正在加载...”标签或图形，然后在结果成功后再次显示日历。

谁能指出我正确的方向或提供一些示例代码？我很难过。

【问题讨论】：

这可以在您的 AJAX 回调中触发和删除。然后，只需在 Widget 中显示和隐藏项目即可。

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

由于 DatePicler 小部件的性质不断变化，您可能会考虑制作一个加载 gif 和阴影，可以根据需要取消隐藏或显示在视图中。由于我无法复制您未提供的示例，因此我可以提供这样的示例。

$(function() {

  function makeLoader(cnt, img) {
    return $("<div>", {
        class: "ui-datepicker-loading"
      })
      .css({
        background: "rgba(0,0,0,0.65)",
        width: "272px",
        height: "224px",
        "border-radius": "3px",
        color: "white",
        "text-align": "center"
      })
      .html("<p style='padding-top: 100px'>" + cnt + "</p><img width='20' src='" + img + "'></img>")
      .appendTo("body")
      .hide();
  }

  function showLoader(tObj) {
    $(".ui-datepicker-loading").show().position({
      my: "left top",
      at: "left+3 top+3",
      of: tObj
    }).css("z-index", 1001);
  }

  function hideLoader() {
    $(".ui-datepicker-loading").hide().position({
      my: "left top",
      at: "left-300 top-300",
      of: $("body")
    }).css("z-index", 0);
  }

  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(yy, mm, dp) {
      showLoader($(this).datepicker("widget"));
      setTimeout(hideLoader, 2000);
    }
  });
  var l = makeLoader("Getting dates...", "https://i.gifer.com/ZKZg.gif");
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

当第一次调用回调时，我们会显示加载元素。收集数据后，我们可以将其隐藏。

【讨论】：

感谢您的示例代码。我遇到的一个问题是加载微调器/文本没有出现在日历上方，而是出现在表单的左上角。我认为这是因为我们要附加到正文中。但是，我尝试附加到文本框但没有任何成功。有没有一种简单的方法可以确保微调器遵循日历并覆盖它而不管表单的构成如何？
@Zoop 请提供该问题的最小示例。