如何实现带自定义按钮的jQuery UI Datepicker以增强交互功能？

要实现带有「Next」「Next Week」「Today」这类自定义按钮的Datepicker，核心是利用插件自带的按钮面板能力，再扩展自定义按钮与逻辑，同时保证和原生UI的兼容性。具体步骤如下：

1. 开启原生按钮面板 #

初始化Datepicker时，启用showButtonPanel选项，这会在日历底部生成一个按钮容器，我们将在这个容器里添加自定义按钮：

$(".input-class").datepicker({
  showButtonPanel: true
});

2. 插入自定义按钮 #

通过beforeShow回调，在日历每次打开时，往按钮面板（.ui-datepicker-buttonpane）中添加自定义按钮，同时给按钮加上jQuery UI的原生按钮类，确保样式统一：

beforeShow: function(input, inst) {
  const buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
  // 先清除已存在的自定义按钮，避免重复添加
  buttonPane.find(".custom-date-btn").remove();

  // 创建并添加三个自定义按钮
  $("<button>", {
    class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
    text: "Today"
  }).appendTo(buttonPane);

  $("<button>", {
    class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
    text: "Next"
  }).appendTo(buttonPane);

  $("<button>", {
    class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
    text: "Next Week"
  }).appendTo(buttonPane);
}

3. 绑定按钮的日期跳转逻辑 #

给每个自定义按钮绑定点击事件，用Datepicker的setDate方法修改选中日期：

// 绑定Today按钮事件
buttonPane.find("button:contains('Today')").on("click", function() {
  const today = new Date();
  $(input).datepicker("setDate", today);
  $(input).datepicker("hide"); // 可选：点击后自动关闭日历
});

// 绑定Next按钮（跳转下一天）
buttonPane.find("button:contains('Next')").on("click", function() {
  const currentDate = $(input).datepicker("getDate") || new Date();
  const nextDate = new Date(currentDate);
  nextDate.setDate(nextDate.getDate() + 1);
  $(input).datepicker("setDate", nextDate);
});

// 绑定Next Week按钮（跳转7天后）
buttonPane.find("button:contains('Next Week')").on("click", function() {
  const currentDate = $(input).datepicker("getDate") || new Date();
  const nextWeekDate = new Date(currentDate);
  nextWeekDate.setDate(nextWeekDate.getDate() + 7);
  $(input).datepicker("setDate", nextWeekDate);
});

4. 样式适配调整 #

添加简单的CSS，让自定义按钮和原生按钮布局协调：

.custom-date-btn {
  margin-right: 10px;
  float: left;
}

/* 鼠标悬停时和原生按钮保持一致状态 */
.custom-date-btn:hover {
  background-color: #cccccc;
  border-color: #aaaaaa;
}

完整代码示例 #

<input class="input-class" />

<script>
$(function() {
  $(".input-class").datepicker({
    showButtonPanel: true,
    beforeShow: function(input, inst) {
      const buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
      buttonPane.find(".custom-date-btn").remove();

      // 创建按钮
      const todayBtn = $("<button>", {
        class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
        text: "Today"
      }).appendTo(buttonPane);

      const nextBtn = $("<button>", {
        class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
        text: "Next"
      }).appendTo(buttonPane);

      const nextWeekBtn = $("<button>", {
        class: "custom-date-btn ui-button ui-widget ui-state-default ui-corner-all",
        text: "Next Week"
      }).appendTo(buttonPane);

      // 绑定事件
      todayBtn.on("click", function() {
        $(input).datepicker("setDate", new Date());
        $(input).datepicker("hide");
      });

      nextBtn.on("click", function() {
        const current = $(input).datepicker("getDate") || new Date();
        const nextDay = new Date(current);
        nextDay.setDate(nextDay.getDate() + 1);
        $(input).datepicker("setDate", nextDay);
      });

      nextWeekBtn.on("click", function() {
        const current = $(input).datepicker("getDate") || new Date();
        const nextWeek = new Date(current);
        nextWeek.setDate(nextWeek.getDate() + 7);
        $(input).datepicker("setDate", nextWeek);
      });
    }
  });
});
</script>

<style>
.custom-date-btn {
  margin-right: 10px;
  float: left;
}

.custom-date-btn:hover {
  background-color: #cccccc;
  border-color: #aaaaaa;
}
</style>

注意事项 #

• 使用beforeShow而非create回调，确保每次打开日历都能正确渲染按钮，避免重复创建
• 所有自定义按钮都使用jQuery UI原生按钮类，保证和插件样式完全兼容
• 调用setDate方法时，Datepicker会自动同步输入框值与日历显示，无需额外处理

内容的提问来源于stack exchange，提问作者Jacob spartans