jquery datepicker remove current day highlight class

问题

I want to completely remove the current day highlight class from my instance of jquery datepicker. I am using datepicker inline as a div, so all the prescribed methods I have found for using .find and .remove on classes are not working. I have tried removing all the CSS entries for .ui-state-highlight to no improvement. The jsfiddle of my basic code, I suggest opening it in a new tab, making it easier to return to this question. Here is a screenshot of the code inspection, showing the class i need to remove.

The code:

<head><script>
$( function() {
var selections = ["2017-07-29"]
function bansingle(date) {
        var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ selections.indexOf(excerpt) == -1 ]
    }
// somehow combine this function later.
//function bandow(date) {
//              var day = date.getDay();
//          return [(day != 0 && day != 6)];
//      }


$('#dp1').datepicker({
    beforeShowDay: bansingle,
    altField:'#alternate1',
        altFormat: 'm-d-yy',
        fielddateFormat: 'm-d-yy',
    minDate: "+0d",
    //maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
});</script>
</head>
<body>
<div id="dp1"></div>
</body>

editing the highlight to look just like the other available dates is no good as then when the current date is clicked, you cant tell that it has been. That's why i need to instead figure out how to remove the highlight class altogether on my div use of datepicker.

my question is different from this other question because: while there are some commonalities with that other post, I am trying to acheive a different end result, and the suggestions on that post are styling the CSS to mimic the other cells, as I stated in the paragraph above this one, that is not a good fit for what i need.

EDIT:

Using that other question as a reference, I was able to rearrange and change some other CSS styling so that now all available dates look identical, though the end result is incomplete. this makes me rely on leaving the altfield visible to show the clicked on selection to the user. If there is a way to have this style in the file head:

.ui-state-active {background: #F00;}

be changed to:

.ui-state-active {background: #F00 !important;}

when the datepicker inline calendar GUI is first clicked on any available date, then the color response will match the user's action as well as the data that will be passed on to the PHP.

回答1:

You can use its attribute like this:

$('#dp1').datepicker({
    beforeShowDay: bansingle,
    todayHighlight: false,// make this parameter to false. It will not highlight then.
    altField:'#alternate1',
        altFormat: 'm-d-yy',
        fielddateFormat: 'm-d-yy',
    minDate: "+0d",
    //maxDate: "+1m", // set latest selectable date
});

回答2:

The best way is to edit CSS source. For example:

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fad42e;
    background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
    color: #363636;
}

... and now you can add a style to be like other cells!

回答3:

You can override css as below.

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    border: 1px solid #c5dbec;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    color: #2e6e9e;
}

来源：https://stackoverflow.com/questions/45295454/jquery-datepicker-remove-current-day-highlight-class

标签

javascript

jquery

css

date

datepicker