DevCurry: Change the Background Color of jQuery Datepicker

Here’s a simple way using CSS to change the Background Color of the jQuery UI Datepicker control

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Change Background Color of jQuery UI
DatePicker(from DevCurry.com)</title>
<link type="text/css" rel="Stylesheet"
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/
smoothness/jquery-ui.css" />

<style type="text/css">
.ui-datepicker {
    background: #333;
    border: 1px solid #555;
    color: #EEE;
}
</style>

<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js">
</script>


<script type="text/javascript">
    $(function () {
        $("#datepic").datepicker();
    });
</script>
</head>
<body>
    <input id="datepic"/>
</body>
</html>

As you can see, all that we are doing to change the background formatting for the Datepicker is to change the .ui-datepicker CSS class, as shown below.

<style type="text/css">
.ui-datepicker {
    background: #333;
    border: 1px solid #555;
    color: #EEE;
}
</style>

Before:

After:

Check out some more similar jQuery DataPicker Tips

Change the Background Color of jQuery Datepicker

2 comments: