在 jQuery UI Datepicker 中为选定的日期添加一个特殊的类答案

【问题标题】：Add a special class to selected days in jQuery UI Datepicker在 jQuery UI Datepicker 中为选定的日期添加一个特殊的类
【发布时间】：2015-05-18 22:31:24
【问题描述】：

我正在尝试使用多选插件在 jQuery UI Datepicker 中突出显示水平天数。为了突出显示，我使用 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;
}

只需要根据突出显示日期的位置显示:before 或:after 元素。但是 datepicker 每次渲染后都会删除样式。请帮助我理解，如何在日期选择器渲染后运行显示伪元素的函数。

横选图片：

http://i.stack.imgur.com/XBUUx.jpg

JSFiddle：

https://jsfiddle.net/meecrobe/wrppLqy1/

【问题讨论】：

您要范围选择吗？如果是这样，我为您创建了一个演示 -- jsfiddle.net/a8vy7ekp -- 代码取自这里 -- bseth99.github.io/projects/jquery-ui/…

标签： javascript jquery css jquery-ui datepicker

【解决方案1】：

看看这个答案：

我写了一个小演示来做这个......

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

您可以在这里查看：http://jsfiddle.net/NHN4g/4/

这是扩展程序本身：

(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 -->

(javascript)

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

形成这个问题： Proper way to add a callback to jQuery DatePicker

您可以像他一样编写自己的扩展程序。

【讨论】：