Highlighting Current Day with datepicker.js

It would be best to do this in your theme roller https://jqueryui.com/themeroller/. Otherwise, change the colors in below as needed.

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {


    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;


}

Select allOpen in new window

test page : https://jsfiddle.net/haf24xqo/

.ui-datepicker-today a {
    background:blue !important;
}

Select allOpen in new window

Hmm tried bot. Neither worked. Although they should.  I put in the header of the page that contains the datepicker. Or does it go elsewhere? Below is the js file.

jQuery(function($) {

    var submitButton = $('input[type="submit"]')[0];

    var errorMsg = document.getElementById('error-msg');

    var sessionDate = document.getElementById('SD');



    $('#datepicker').datepicker({

        dateFormat: 'DD, MM d, yy',

        minDate: "+1d", maxDate: "+2W",

        onSelect: function (dateText, inst) {

            loadSessions(inst.selectedYear, inst.selectedMonth + 1, inst.selectedDay);

            var dateValue = inst.selectedYear + '-' + ('00' + (inst.selectedMonth + 1)).substr(-2) + '-' + ('00' + inst.selectedDay).substr(-2);

            $("input[name='mysched']").val(dateValue);

            $('#SD').val(dateText)

            $('select').prop({disabled: true});

            $('input:checkbox').prop({disabled: false});

        }

    });

Select allOpen in new window

You have posted jquery and you are asking about updating the CSS. Leakim's fiddle works and is just css.

Yes Scott I understand. But it is not working...neither your version nor his...

#datepicker {
   clear: both;
    /*float: left;*/
    /*margin-right: 20px;*/
   text-align:center;
   margin:0 auto;
   margin-bottom:10px;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

Select allOpen in new window

#datepicker {
   clear: both;
   text-align:center;
   margin:0 auto;
   margin-bottom:10px;
}

#ui-datepicker-div { font-size: 12px; } 
.ui-datepicker-today a {
    background:blue !important;
}

Select allOpen in new window

In that case, please create a working test case in jsfiddle, codepen or provide a link to your test page on your site. Something must be blocking it because as you can see, it works in Leakim's jsfiddle.

If I fork his fiddle and replace his css with my css, it still works https://jsfiddle.net/1mzbL6t3/

That means something else is going on.  

Yup sure is something else going on!  Please go to the bottom of this site. Arise Panel. 22222. Then om / @123  Then selectSessions/Myschedule.
https://arise.plus

That is not the right thing


Tried client log in, that didn't work either.

If you have something else, I will try once more. Otherwise, just log in on your own, then view the source, save the page as pure HTML and provide that to use.

You enter 11111 in the top input and select therapist from the select.  That will get you to the login screen.

Ok, you can get to https://arise.plus/THERAPIST/login.html without that initial log in. That would have been easier :)

It works. When you are adding custom styles, you have to load your custom.css below all the other style sheets in order for that to overwrite what is in your default.

LOL.  Don't want it easy! I did this...

<style>
.ui-datepicker-today a {
    background:blue !important;
}
</style>
</head>

Select allOpen in new window

Still not working.

Okay got it to work.  But.  Today is not Sunday..Saturday should be in blue.

That is a different issue.

You have some CSS files that are 404. That could be why any updates didn't work in the first place.



Make sure the set up is correct for being localized 
https://jqueryui.com/datepicker/#default

Awesome. Thank you. Never knew this existed!