Add a special class to selected days in jQuery UI Datepicker

Question

I'm trying to highlight a horizontal range of days in jQuery UI Datepicker with multiselect plugin. For highlighting I use the :before and :after pseudoelements of the a tags.

.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;
}

Just need to show :before or :after element depending on position of the highlited day. But the datepicker removes the styling every time after rendering. Please, help me to understand, how to run the function that shows the pseudoelements AFTER the datepicker's rendering.

Image of horizontal selection:

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

JSFiddle:

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

Answer 1

Look at this answer:

I wrote a small demo that does this...

I create an object literal that contains the extensions to $.datepicker and then do $.extend on $.datepicker and my object.

You can check it out here:http://jsfiddle.net/NHN4g/4/

Here's the extension itself:

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

And the demo:

(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; } });

Form this question: Proper way to add a callback to jQuery DatePicker

You can write your own extension like he did.