Jquery DatePicker顏色星期日紅

3

爲週六，週日可以考慮用事實jQuery的日期選擇器增加了.ui-datepicker-week-end類，所以你可以添加.ui-datepicker-week-end{color:#f00;}到你的CSS文件。

如果你只想處理星期日，你必須接受事實，這將是由jquery datepicker（它是依賴於語言環境）生成的表中的第一列或最後一列。

一般建議：使用firefox + firebug（或類似）來檢查html代碼。它給出了很多關於如何完成與jQuery DOM遍歷相關的任務的想法。

2010-06-14 13:21:43 dzida

0

在documentation page的Theming選項卡下，可以看到插件輸出的HTML示例。您應該能夠使用選擇針對特定元素的HTML：

.ui-datepicker-calendar > tbody td:first-child { 
    background-color: red; 
}

的jQuery：

$(".ui-datepicker-calendar > tbody td:first-child").css("background-color: red");

未經測試，假設第一列是星期天，所以有點扭捏的可能需要。如果星期天設置爲不同的列，請改爲使用:nth-child(n)。

來源

2010-06-14 13:16:24

+0

很好的例子，但有時星期天是最後一列（例如，波蘭語本地化），但改變是很容易的我認爲 – dzida 2010-06-14 13:23:37

+0

@Dzida：它是可配置的，可以是表中的任何列，在這種情況下，您可以使用'：nth-child（n）'或'：last- child'。編輯我的答案以反映這一點。 – 2010-06-14 13:29:24

2

假設第一列是星期日那麼下面的jQuery應達到目的：

$('table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a').css({'background':'#f00'});

雖然它將有各日曆例如改變時要運行當您選擇日期時，每次都會重新繪製日曆。

雖然在IE中不支持，但可以在css3中使用相同的選擇器。

table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a 
{ 
    background: #f00; 
}

來源

2010-06-14 13:19:48 Nalum

3

如果您有ui.datepicker.js文件的本地副本（自定義縮小文件也可以），並且與.ui-datepicker-week-end類別無關，您可以編輯它（使要編輯的副本是首選），以便僅爲星期日分配該類。

在ui.datepicker.js文件中，如果搜索'week-end'應該顯示兩個結果，並在它們之前包含以下內聯if語句：(t+h+6)%7>=5?將> = 5更改爲== 6將分配.ui-datepicker然後纔是週末的課程。

(t+h+6)%7==6?" ui-datepicker-week-end":""

然後你就可以添加CSS樣式，您認爲合適的那類：

.ui-datepicker-week-end { 
    background: #f00; 
}

來源

2010-06-14 14:17:36

3

$('#something').datepicker({ 
    beforeShowDay:function(date){ 
     if(date.toString().indexOf('Sun ')!=-1) 
      return [1,'red'];else 
      return [1]; 
    } 
}

CSS：

.ui-datepicker td.red a{ 
color:#f00 !important; 
}

不是很漂亮，但在需要的作品。

來源

2011-08-18 19:21:54

1

如果需要彩色週六和週日都使用這個CSS：

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: #C00;}

來源

2014-07-10 21:10:58 Andrelo

0

您可以使用CSS

.datepicker table tr td:first-child { 
color: red 
}

週六彩變色週日可以這樣

.datepicker table tr td:first-child + td + td + td + td + td + td { 
color: red 
}

改變

如果不工作這個你的代碼，去檢查元素，並找到正確的css路徑datepicker日期a nd設置在css之上

來源

2016-12-30 03:07:38

Jquery DatePicker顏色星期日紅

回答

相關問題