我正在尝试使用多选插件在 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
元素。但是日期选择器每次渲染后都会删除样式。请帮助我理解如何在日期选择器呈现后运行显示伪元素的函数。
横选图片:
JSFiddle:
最佳答案
看看这个答案:
我写了一个小演示来做这个......
我创建了一个包含 $.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
你可以像他那样写自己的扩展。
关于javascript - 在 jQuery UI Datepicker 中为选定的日期添加一个特殊类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30313803/