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

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Unknown said...: I will be using this code. We thought of using the inbuilt jquery themes but also wanted a constant font. this code gives a lot of ideas. thanks for sharing!; December 2, 2010 at 7:03 PM
javamanou812 said...: Works and is very much appreciated...; March 13, 2012 at 8:26 PM