0

Hi I am currently learning jquery and javascript. The main idea is to change the css of jquery.ui.

Teapetetose
  • 35
  • 1
  • 5
  • Possible duplicate of [How To Highlight Selected Dates In Date Picker](http://stackoverflow.com/questions/7504819/how-to-highlight-selected-dates-in-date-picker) – hostingutilities.com Dec 07 '16 at 06:13

1 Answers1

3

You need to override the css from jquery.ui

The selector you are looking for is

.ui-datepicker-calendar a {

}

You should specify the css more, so your custom style gets used. Otherwise use !important.

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

Like this:

<!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(){
 $("#txtFromDate").datepicker({
  minDate:0,
  maxDate: "+60D",
  numberOfMonths: 2,
 });
 $("#txtToDate").datepicker({ 
  minDate:0,
  maxDate:"+60D",
  numberOfMonths: 2,
 }); 
 var default_date = new Date();
 default_date.setDate(default_date.getDate()+60);
 $('#txtFromDate').datepicker('setDate', new Date());
 $('#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>
Daidon
  • 581
  • 1
  • 3
  • 14