Javascript 在jQueryUIDatePicker中将特殊类添加到选定的日期

我试图用multiselect插件突出显示jQueryUIDatePicker中的水平天数范围。为了突出显示，我使用

a

标记的

：before

和

：after

伪元素

.ui-state-highlight a:before,
.ui-state-highlight a:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 30px;
    background: #e84332;
    display: none;
}

.ui-state-highlight a:before {
    left: -7px;
}

.ui-state-highlight a:after {
    right: -8px;
}

只需显示

：前

或

：后

元素，具体取决于高位日的位置。但datepicker每次渲染后都会删除样式。请帮助我理解，如何在datepicker渲染后运行显示伪元素的函数

水平选择的图像：

JSFiddle：

看看这个答案：

我写了一个小的演示，可以做到这一点

我创建一个对象文本，其中包含对$.datepicker的扩展，然后对$.datepicker和我的对象执行$.extend

您可以在这里查看：

以下是扩展本身：

(function($){ var datepickerExtensions = { _oldAdjustDate: $.datepicker._adjustDate, _adjustDate: function(id, offset, period) { var target = $(id); var inst = this._getInst(target[0]); var afterAdjustDate = this._get(inst, 'afterAdjustDate'); this._oldAdjustDate(id, offset, period); if(afterAdjustDate && typeof afterAdjustDate === 'function'){ afterAdjustDate(id, offset, period); } } } $.extend($.datepicker, datepickerExtensions); })(jQuery);

还有演示：

（html）

就本问题而言：

---

你可以像他那样编写自己的扩展

是否要选择范围？？如果是这样，我为你创建了一个演示-，代码取自这里--

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div><!-- End demo -->

var changed = false; $("#datepicker").datepicker({ afterAdjustDate: function(i,o,p){ if(!changed){ $('.ui-datepicker-month').css('color', '#f00'); } changed = !changed; } });