Customize datepicker CSS zu deaktivieren gesperrt Daten

Question

Ich habe eine datepicker, deren CSS ich nach meinen Bedürfnissen angepasst habe. Ich möchte ein Kreuz (X) über die deaktivierten Daten setzen.

HTML

<input type="text" id="txtFromDate" /> 

JS

$(document).ready(function(){ 
    $("#txtFromDate").datepicker({ 
    minDate: new Date() 
    }); 
}); 

Customized CSS

.ui-datepicker {  
    padding: .2em .2em 0; 
    display: none; 
    height:210px; 
    width:195px; 
    font-family:Trebuchet MS; 
} 
.ui-datepicker .ui-datepicker-header { 
    position: relative; 
    padding: .2em 0; 
    font-size:9pt; 
    background-color:#BFDBFF; 
    font-family:Trebuchet MS; 
} 
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next { 
    position: absolute; 
    top: 2px; 
    width: 1.8em; 
    height: 1.8em; 
} 
.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-next-hover { 
    top: 1px; 
} 
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span { 
    display: block; 
    position: absolute; 
    left: 50%; 
    margin-left: -8px; 
    top: 50%; 
    margin-top: -8px; 
} 
.ui-datepicker .ui-datepicker-title { 
    margin: 0 4em; 
    line-height: 1.8em; 
    text-align: center; 
    background-color:#BFDBFF; 
} 
.ui-datepicker .ui-datepicker-title select { 
    font-size: 1em; 
    margin: 1px 0; 
} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { 
    width: 45%; 
} 
.ui-datepicker table { 
    width: 100%; 
    font-size: 9pt; 
    border-collapse: collapse; 
    margin: 20px 0 .4em; 
    font-family:Trebuchet MS; 
} 
.ui-datepicker th { 
    padding: .7em .3em; 
    text-align: center; 
    font-weight: bold; 
    border: 0; 
} 
.ui-datepicker td { 
    border: 0; 
    padding: 1px; 
} 
.ui-datepicker td span, 
.ui-datepicker td a { 
    display: block; 
    padding: .2em; 
    text-align: right; 
    text-decoration: none; 
} 
.ui-datepicker .ui-datepicker-buttonpane { 
    background-image: none; 
    margin: .7em 0 0 0; 
    padding: 0 .2em; 
    border-left: 0; 
    border-right: 0; 
    border-bottom: 0; 
} 
.ui-datepicker .ui-datepicker-buttonpane button { 
    float: right; 
    margin: .5em .2em .4em; 
    cursor: pointer; 
    padding: .2em .6em .3em .6em; 
    width: auto; 
    overflow: visible; 
} 
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { 
    float: left; 
} 

CSS für Termine Auskreuzen

.ui-datepicker-calendar>tbody>tr>td.ui-datepicker-unselectable>span.ui-state-default:before{ 
    bottom: 0; 
    content: "X"; 
    height: 4px; 
    left: 7px; 
    margin: auto; 
    position: relative; 
    right: 0; 
    top: 0; 
    width: 4px; 
} 

Aber mit diesen CSS werden die Termine nicht ordentlich durchgestrichen zu werden. Es sieht aus wie:

ich die ‚Kreuze‘ will die Gesamt span und nicht nur das Datum zu bedecken und es sollte sauber aussehen. Wie erreiche ich das nur mit CSS?

Hier ist ein JSFiddle für die gleiche.

Answer 1

Ich habe Text-Dekoration anstelle der Kreuzung CSS verwendet, entfernen CSS von Cross-out und fügen Sie dies hinzu. Hoffe, das wird Ihnen helfen ...

.ui-Datepicker-Kalender> tbody> tr> td.ui-Datepicker-unselectable> span.ui-State-default {

text-decoration: line-through; 

}