如何在同一页面添加两个不同样式的jQuery Datepicker

一、能否控制Datepicker生成的HTML结构？ #

• 弹出式Datepicker：默认复用全局容器（id="ui-datepicker-div"），无法直接生成不同结构，但可以通过事件回调动态修改容器的类/属性，实现样式区分。
• 内联（Inline）Datepicker：每个picker对应独立的DOM容器，可直接给容器设置不同的id或class，生成独立结构，便于直接控制样式。

二、差异化样式的具体实现方法 #

方法1：给弹出式Datepicker动态添加专属类 #

利用beforeShow回调，在picker弹出时给全局容器添加对应输入框的专属类，切换picker时自动覆盖原有类：

$(function() {
  // 第一个日期选择器
  $("#datepicker").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    beforeShow: function(input, inst) {
      $('#ui-datepicker-div').removeClass('picker-modal').addClass('picker-default');
    }
  }).datepicker("setDate", 7);

  // 第二个日期选择器
  $("#datepickerModal").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    beforeShow: function(input, inst) {
      $('#ui-datepicker-div').removeClass('picker-default').addClass('picker-modal');
    }
  }).datepicker("setDate", 7);
});

对应的CSS样式示例：

/* 第一个picker的头部样式 */
.picker-default .ui-datepicker-header {
  background-color: #2196F3;
  color: #fff;
}

/* 第二个picker的日期单元格样式 */
.picker-modal .ui-datepicker-calendar td a {
  color: #F44336;
}

方法2：使用内联（Inline）Datepicker #

如果不需要弹出式交互，直接将picker渲染在页面中，每个picker拥有独立容器，可直接通过容器的类/id设置差异化样式：

HTML结构：

<!-- 第一个内联picker容器 -->
<div id="datepicker-inline" class="picker-default"></div>

<!-- 第二个内联picker容器 -->
<div id="datepicker-modal-inline" class="picker-modal"></div>

JS初始化：

$(function() {
  $("#datepicker-inline").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  }).datepicker("setDate", 7);

  $("#datepicker-modal-inline").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  }).datepicker("setDate", 7);
});

CSS样式示例：

.picker-default {
  border: 1px solid #ddd;
  padding: 10px;
}

.picker-modal {
  border: 1px solid #f00;
  padding: 10px;
}

.picker-modal .ui-datepicker-header {
  background-color: #f00;
  color: #fff;
}

额外：自定义生成的HTML结构 #

如果需要修改picker的DOM结构（比如添加额外元素），可在beforeShow（弹出式）或create（内联）事件中手动操作：

beforeShow: function(input, inst) {
  // 给picker头部添加自定义标签
  $('#ui-datepicker-div .ui-datepicker-header').append('<span class="custom-tag">自定义标签</span>');
}

内容的提问来源于stack exchange，提问作者mr. Seven