有効期限を守るためにdatepicker CSSをカスタマイズする

Question

私はdatepickerを持っています。そのCSSは自分のニーズに合わせてカスタマイズしました。私は無効日に十字（X）を入れたいと思う。

HTML

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

JS

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

カスタマイズ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; 
} 

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

日付を横切るしかし、このCSSで、日付がきれいに消さ取得されていません。のためにCSS

私は、全体的なspanだけでなく、日付をカバーするための「十字架」をしたいし、それがきれいになります。それは次のようになります。どのようにCSSでこれを達成するには？

これは同じもののJSFiddleです。

Answer 1

私はcssを渡す代わりにテキストデコレーションを使用していますが、cssを取り除いてこれを追加しています。 ...これはあなたを助けることを願ってい

.ui-DatePickerのカレンダー>のtbody> TR> td.ui-DatePickerの-選択不可> span.ui状態-デフォルト {

text-decoration: line-through; 

}