如何修改jqueryui datepicker实现无年份日期选择器，匹配示例功能与样式

1 外观定制 #

直接覆盖 jQuery UI 自带的样式类即可实现和目标设计一致的视觉效果，核心可调整的样式类如下：

• .ui-datepicker：日期选择器外层容器，可调整宽高、圆角、阴影、边框样式
• .ui-datepicker-header：顶部月份/年份导航栏，可调整背景色、内边距、导航按钮样式
• .ui-datepicker-calendar th：星期表头，可调整字体大小、颜色、对齐方式
• .ui-datepicker-calendar td：日期单元格，可调整宽高、圆角、hover 态、选中态样式
• .ui-datepicker-buttonpane：底部按钮栏，可调整按钮样式、布局、间距

示例自定义样式代码：

.ui-datepicker {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 12px;
  font-family: system-ui, sans-serif;
}
.ui-datepicker-header {
  background: #f3f4f6;
  border-radius: 6px;
  border: none;
  padding: 8px;
}
.ui-state-default {
  border: none;
  background: transparent;
  text-align: center;
  border-radius: 4px;
}
.ui-state-hover, .ui-widget-content .ui-state-hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background: #2563eb;
  color: #fff;
}

2 核心功能配置 #

初始化日期选择器时传入对应参数即可调整功能逻辑，示例基础配置如下：

$("#datepicker").datepicker({
  // 开启月份、年份下拉选择
  changeMonth: true,
  changeYear: true,
  // 显示周数
  showWeek: true,
  // 自定义输出日期格式
  dateFormat: "yy-mm-dd",
  // 显示底部按钮面板
  showButtonPanel: true,
  // 自定义按钮文本
  currentText: "今天",
  closeText: "关闭",
  // 限制可选日期范围，示例为仅可选今天及以后的日期
  minDate: 0,
  // 自定义日期单元格渲染逻辑，可用于标记节假日、禁用特定日期
  beforeShowDay: function(date) {
    // 返回格式：[是否可选, 自定义类名, 悬浮提示文本]
    return [true, "", ""];
  }
});

3 扩展功能实现 #

如果需要额外的交互功能，可以通过组件自带的回调事件扩展：

• 范围选择：绑定两个日期输入框分别作为起止日期，在onSelect回调中动态设置另一个输入框的可选日期区间
• 快捷选择：在beforeShow回调中动态插入快捷选项栏（比如最近7天、最近30天、本月），绑定点击事件直接给输入框赋值
• 多月份显示：配置numberOfMonths参数即可同时展示多个月份的日历

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