[英]Add a special class to selected days in jQuery UI Datepicker
我正在嘗試使用multiselect插件突出顯示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渲染之后運行顯示偽元素的函數。
水平選擇的圖像:
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; } });
形成以下問題: 向jQuery DatePicker添加回調的正確方法
您可以像他一樣編寫自己的擴展名。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.