添加一個特殊的類到選定的日子在jQuery UI Datepicker

我想突出顯示jQuery UI日期選擇器與多選插件的日子的水平範圍。爲突出顯示，我使用a標籤的:before和:after僞元素。添加一個特殊的類到選定的日子在jQuery UI Datepicker

.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元素。但日期選擇器在渲染後每次都刪除樣式。請幫助我理解如何運行顯示日期選擇器渲染後的僞元素的函數。

水平選擇的圖片：

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

的jsfiddle：

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

來源

2015-05-18 Vadzim

你想選擇範圍？如果是這樣，我爲你創建了一個演示 - https://jsfiddle.net/a8vy7ekp/ - 從這裏取得的代碼 - http://bseth99.github.io/projects/jquery-ui/4-jquery-ui-日期選擇器，range.html – Tasos

看看這個答案：

我寫了一個小的演示，這是否......

我創建一個包含擴展至$ .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

像他那樣，您可以編寫自己的擴展。

來源

2015-05-18 22:43:06

添加一個特殊的類到選定的日子在jQuery UI Datepicker

回答

相關問題