自定義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; 
} 

CSS爲劃掉日期

.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，日期都沒有得到整齊地劃去。它看起來像：

我想要的「十字架」將覆蓋整個span而不僅僅是日期和它應該看起來很乾淨。如何只用CSS來實現這一點？這個是JSFiddle。

Answer 1

我已經使用文本裝飾而不是跨越CSS，刪除交叉出來的CSS，並添加此。希望這將幫助你......

的.ui-日期選擇器，日曆> TBODY> TR> td.ui，日期選擇器，不可選擇> span.ui狀態默認 {

text-decoration: line-through; 

}