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:

jQuery UI Datepicker Default

After:

jQuery UI Datepicker Background

Check out some more similar jQuery DataPicker Tips






About The Author

Suprotim Agarwal
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!

javamanou812 said...

Works and is very much appreciated...