如何更改datepicker可选日期的背景颜色?

问题描述:

嗨,我目前正在学习jQuery和JavaScript。主要想法是改变jquery.ui的CSS。如何更改datepicker可选日期的背景颜色?

+0

的可能的复制[如何突出所选择的日期在日期选择器(http://*.com/questions/7504819/how-突出选中日期选择器) –

你需要从jquery.ui

覆盖CSS

你正在寻找的选择是

.ui-datepicker-calendar a { 

} 

你应该更加指定的CSS,让您的自定义样式被使用。否则使用!重要。

.ui-datepicker-calendar a { 
    color:white !important; 
    background-color:black !important; 
} 

像这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Test</title> 
 
<style> 
 
body 
 
{ 
 
    font-size:8pt; 
 
    font-family:Verdana; 
 
    padding: 5px; 
 
} 
 
    
 
.ui-datepicker-calendar a { 
 
    color: white !important; 
 
    background-color: black !important; 
 
    border-color: black; 
 
} 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
</head> 
 
<body> 
 
    
 
<br/> 
 
From: <input type="text" id="txtFromDate" /> 
 
To: <input type="text" id="txtToDate" /> 
 

 
<script type="text/javascript"> 
 
$(function(){ 
 
\t $("#txtFromDate").datepicker({ 
 
\t \t minDate:0, 
 
\t \t maxDate: "+60D", 
 
\t \t numberOfMonths: 2, 
 
\t }); 
 
\t $("#txtToDate").datepicker({ 
 
\t \t minDate:0, 
 
\t \t maxDate:"+60D", 
 
\t \t numberOfMonths: 2, 
 
\t }); 
 
\t var default_date = new Date(); 
 
\t default_date.setDate(default_date.getDate()+60); 
 
\t $('#txtFromDate').datepicker('setDate', new Date()); 
 
\t $('#txtToDate').datepicker('setDate', default_date); 
 
}); 
 
$("#txtFromDate").datepicker({ 
 
    onSelect: function(dateText) { 
 
     $("#txtToDate").datepicker("option", "minDate", $('#txtFromDate').datepicker("getDate")); 
 
     var date2 = $("#txtFromDate").datepicker("getDate"); 
 
     date2.setDate(date2.getDate()+60); 
 
     $("#txtToDate").datepicker("option", "maxDate", date2); 
 
    } 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

+0

酷感谢队友! – Teapetetose

+0

非常欢迎@Teapetetose :-) – Daidon