如何配置jQuery UI日期选择器使其始终显示日历面板（无需点击触发）

我来帮你搞定这个需求！要让jQuery UI的日期选择器一直显示日历面板，不用点击输入框触发，我们只需要对现有代码做几个小调整——核心思路是直接触发日历显示，同时隐藏原来的输入框（但保留它来传递数据），再把日历放到合适的容器里控制布局。下面是具体的修改方案和完整代码：

关键修改点说明 #

1. 隐藏原输入框：给<input id="date">添加display: none样式，这样它不会显示在页面上，但依然能正常提交选中的日期数据。
2. 新增日历容器：添加一个空的<div id="calendar-container">，用来专门承载日历面板，方便我们控制它的显示位置和样式。
3. 强制日历默认显示：初始化日期选择器后，调用$("#date").datepicker("show")方法，让日历一开始就渲染出来。
4. 指定日历挂载容器：在datepicker的配置项里加上appendTo: "#calendar-container"，确保日历渲染到我们指定的容器中，而不是默认的输入框附近。

修改后的完整代码 #

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="display: flex; margin-left:auto !important;">
  <div style="width:400px; clear:both; float:right; margin-left:auto !important;">
    <p style="float:right;">
      <label style="float:right;font-size: 30px;font-weight: bold; position:relative; left: -25px;" for="date">Select Future Delivery Date:</label>
      <!-- 隐藏输入框，但保留它用于提交数据 -->
      <input style="display: none;" id="date" type="text" name="attributes[date]" value="{{ line_item.attributes.date }}" />
      <!-- 新增日历容器，用来放置始终显示的日历面板 -->
      <div id="calendar-container" style="float:right; position:relative; left: -35px; width: 365px;"></div>
      <span class="instructions"></span>
    </p>
  </div>
</div>

<script>
window.onload = function() {
  if (!window.jQuery) return;
  let $ = window.jQuery;

  // 1) 已有的 blocked 日期配置，保留不变
  const blocked = ["2025-05-26","2025-07-04"];

  // 2) 动态计算 minDate 的函数，保留不变
  function calculateMinDate() {
    const now = new Date();
    const easternTime = new Date(now.toLocaleString("en-US", {timeZone: "America/New_York"}));
    const currentDay = easternTime.getDay();
    const currentHour = easternTime.getHours();
    let minDate;

    if (currentDay >= 1 && currentDay <= 3) {
      minDate = currentHour >= 14 ? 3 : 2;
    } else if (currentDay === 4) {
      minDate = currentHour >= 14 ? 5 : 4;
    } else if (currentDay === 5) {
      minDate = 4;
    } else if (currentDay === 6) {
      minDate = 3;
    } else {
      minDate = 2;
    }
    return minDate;
  }

  // 3) 自定义日期禁用逻辑，保留不变
  function customDay(date) {
    const y = date.getFullYear();
    const m = ("0" + (date.getMonth() + 1)).slice(-2);
    const d = ("0" + date.getDate()).slice(-2);
    const str = `${y}-${m}-${d}`;

    const weekendResult = $.datepicker.noWeekends(date);
    if (!weekendResult[0]) {
      return weekendResult;
    }
    if (blocked.indexOf(str) !== -1) {
      return [false, "", "Unavailable"];
    }
    return [true, ""];
  }

  // 4) 初始化日期选择器，新增关键配置
  $(function() {
    const initialMinDate = calculateMinDate();
    $("#date").datepicker({
      minDate: initialMinDate,
      maxDate: "+12M",
      beforeShowDay: customDay,
      appendTo: "#calendar-container", // 指定日历挂载到我们的容器
      showOn: "never" // 禁用点击触发，因为我们要一直显示
    });

    // 强制日历默认显示
    $("#date").datepicker("show");

    // 保持原有的minDate动态更新逻辑
    setInterval(function() {
      const newMinDate = calculateMinDate();
      const currentMinDate = $("#date").datepicker("option", "minDate");
      if (newMinDate !== currentMinDate) {
        $("#date").datepicker("option", "minDate", newMinDate);
      }
    }, 60000);
  });
};
</script>

额外说明 #

• 原来的日期选择逻辑（比如禁用周末、 blocked日期、动态最小日期）完全保留，不会受到影响。
• 隐藏的输入框依然会同步选中的日期值，提交表单时attributes[date]参数能正常传递。
• 你可以通过调整#calendar-container的样式（比如width、position）来让日历显示在你想要的位置，和原来的布局保持一致。

内容来源于stack exchange