{"id":14677,"date":"2012-08-21T21:01:30","date_gmt":"2012-08-21T13:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14677"},"modified":"2025-04-04T01:11:41","modified_gmt":"2025-04-03T17:11:41","slug":"jquery-ui-datepicker","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-ui-datepicker\/","title":{"rendered":"How to Customize and Theme the jQuery UI Datepicker"},"content":{"rendered":"

jQuery UI is very user-friendly and is popular on many websites needing interactive features.<\/p>\n

In this post, we\u2019ll explore one of its features, the Datepicker widget<\/a>.<\/p>\n

We\u2019ll learn how to customize the calendar theme, so you can create a theme that matches your overall design. However, you need a basic understanding of JavaScript and familiarity with CSS before following this tutorial.<\/p>\n

<\/i> Demo <\/span><\/a>\n<\/i> Download Source <\/span><\/a><\/p>\n

If you\u2019re ready, let\u2019s get started.<\/p>\n

The Assets<\/h2>\n

Let\u2019s prepare some essential assets for the calendar.<\/p>\n

First, the calendar design will refer to this PSD file from Premium Pixels<\/a>. So, download it first to help us pick the sample colors we need. Then, download two patterns from Subtle Patterns<\/em> that we will use as the background of our calendar. In this example, we decided to use the following patterns: black denim<\/a> and dark leather<\/a>.<\/p>\n

\"Pattern<\/figure>\n

We will also need a web development tool like Firebug<\/a> to inspect element classes\/ids generated by the jQuery UI.<\/p>\n

Well, I think we\u2019ve had enough preparation. Now let\u2019s go to the first step.<\/p>\n

Step 1: jQuery UI Datepicker<\/h3>\n

First, go to the jQuery UI download page<\/a>. Here, you\u2019ll see several options: UI Core, Widgets, Interactions, and Effects.<\/p>\n

We should deselect all the components<\/strong> because we don\u2019t need all of them.<\/p>\n

Then, in the Widgets<\/strong> section, select only the datepicker. The jQuery UI will automatically select the necessary dependencies, and then you can download<\/strong> the file.<\/p>\n

Link all the downloaded files \u2014 except the CSS<\/em> \u2014 to your HTML blank document as follows:<\/p>\n

\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.7.1.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jquery-ui-1.8.18.custom.min.js\"><\/script>\r\n<\/pre>\n
Step 2: Customizing the Datepicker<\/h3>\n
In this step, we will configure a datepicker with the following options:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n $(function(){\r\n   $('#datepicker').datepicker({\r\n     inline: true,\r\n     showOtherMonths: true,\r\n     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\r\n   });\r\n });\r\n<\/script>\r\n<\/pre>\n
The above code will instruct jQuery to display the calendar on an element with the datepicker<\/code> id. So, we need to add the following div<\/code> tag with the \u2014 datepicker ID \u2014 in the body section to form the calendar:<\/p>\n
\r\n<div id=\"datepicker\"><\/div>\r\n<\/pre>\n
Now, the calendar should have been generated and will appear plain without any styles but still functional.<\/p>\n
\"Plain<\/figure>\n
Step 3: The Styles<\/h3>\n
Now let\u2019s begin styling the calendar. We will start by normalizing all the elements and creating a new stylesheet. In this example, we name it datepicker.css<\/code>. Then, link them all to the HTML document.<\/p>\n
\r\n<link href=\"css\/normalize.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<link href=\"css\/datepicker.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<\/pre>\n
Next, we will first attach a background to the body so our HTML doesn\u2019t look too plain.<\/p>\n
\r\nbody {\r\n  background: url('..\/img\/darkdenim3.png') repeat 0 0 #555;\r\n}\r\n<\/pre>\n
Next, we will specify the datepicker\u2019s width, position it in the center, and add a drop shadow to give a prominent effect to the calendar.<\/p>\n
\r\n.ui-datepicker {\r\n  width: 216px;\r\n  height: auto;\r\n  margin: 5px auto 0;\r\n  font: 9pt Arial, sans-serif;\r\n  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);\r\n  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);\r\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);\r\n}\r\n<\/pre>\n
We will also remove the default underline decoration from every anchor tag.<\/p>\n
\r\n.ui-datepicker a {\r\n  text-decoration: none;\r\n}\r\n<\/pre>\n
The calendar in jQuery UI is formed with a table<\/code>. So, let\u2019s add 100%<\/code> width for the table<\/code>, so it will have the same maximum width as the wrapper above; that is 216px<\/code>.<\/p>\n
\r\n.ui-datepicker table {\r\n  width: 100%;\r\n}\r\n<\/pre>\n
Styling the Header Section<\/h2>\n
The datepicker has a header section containing Month & Year<\/strong> of the calendar. This section will have the dark leather texture we\u2019ve downloaded before, with slightly white font color and a 1px<\/code> white shadow at the top.<\/p>\n
\r\n.ui-datepicker-header {\r\n  background: url('..\/img\/dark_leather.png') repeat 0 0 #000;\r\n  color: #e0e0e0;\r\n  font-weight: bold;\r\n  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 0.2);\r\n  -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 0.2);\r\n  box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 0.2);\r\n  text-shadow: 1px -1px 0px #000;\r\n  filter: dropshadow(color=#000, offx=1, offy=-1);\r\n  line-height: 30px;\r\n  border-width: 1px 0 0 0;\r\n  border-style: solid;\r\n  border-color: #111;\r\n}\r\n<\/pre>\n
Next, let\u2019s center the Month<\/strong> position.<\/p>\n
\r\n.ui-datepicker-title {\r\n  text-align: center;\r\n}\r\n<\/pre>\n
Replace the Next<\/strong> and Prev<\/strong> text with the sprite arrow images sliced from the PSD.<\/p>\n
\r\n.ui-datepicker-prev, .ui-datepicker-next {\r\n  display: inline-block;\r\n  width: 30px;\r\n  height: 30px;\r\n  text-align: center;\r\n  cursor: pointer;\r\n  background-image: url('..\/img\/arrow.png');\r\n  background-repeat: no-repeat;\r\n  line-height: 600%;\r\n  overflow: hidden;\r\n}\r\n<\/pre>\n
Then, adjust the arrow position respectively.<\/p>\n
\r\n.ui-datepicker-prev {\r\n  float: left;\r\n  background-position: center -30px;\r\n}\r\n.ui-datepicker-next {\r\n  float: right;\r\n  background-position: center 0px;\r\n}\r\n<\/pre>\n
While the day names<\/strong> section is wrapped within a thead<\/code>, based on our design reference, it will have a slightly white gradient. To simplify our task, we will use this tool<\/a> to generate the gradient code:<\/p>\n
\r\n.ui-datepicker thead {\r\n  background-color: #f7f7f7;\r\n  background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);\r\n  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));\r\n  background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);\r\n  background-image: -o-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);\r\n  background-image: -ms-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);\r\n  background-image: linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );\r\n  border-bottom: 1px solid #bbb;\r\n}\r\n<\/pre>\n
The day names<\/strong> text will have a dark grey color of #666666<\/code> and will also have a thin white text-shadow<\/code> to give it a pressed effect.<\/p>\n
\r\n.ui-datepicker th {\r\n  text-transform: uppercase;\r\n  font-size: 6pt;\r\n  padding: 5px 0;\r\n  color: #666666;\r\n  text-shadow: 1px 0px 0px #fff;\r\n  filter: dropshadow(color=#fff, offx=1, offy=0);\r\n}\r\n<\/pre>\n
At this point, the calendar will appear like this:<\/p>\n
\"First<\/figure>\n
Styling the Dates<\/h2>\n
The calendar dates are wrapped within td<\/code> or table data. So, we will set the padding to 0<\/code> to remove the spaces between the td<\/code> and give it a right border of 1px.<\/p>\n
\r\n.ui-datepicker tbody td {\r\n  padding: 0;\r\n  border-right: 1px solid #bbb;\r\n}\r\n<\/pre>\n
Except for the last td<\/code>, which will not have a right border. We set the right border to 0 for this.<\/p>\n
\r\n.ui-datepicker tbody td:last-child {\r\n  border-right: 0px;\r\n}\r\n<\/pre>\n
The table row will be almost the same. It will have a 1px border bottom except for the last row.<\/p>\n
\r\n.ui-datepicker tbody tr {\r\n  border-bottom: 1px solid #bbb;\r\n}\r\n.ui-datepicker tbody tr:last-child {\r\n  border-bottom: 0px;\r\n}\r\n<\/pre>\n
Styling the Default, Hover, and Active State<\/h2>\n
In this step, we will define the date hover and active styles. We will first define the date default state by specifying the dimensions, centering the date text position, adding gradient color, and inner white shadow.<\/p>\n
\r\n.ui-datepicker td span, .ui-datepicker td a {\r\n  display: inline-block;\r\n  font-weight: bold;\r\n  text-align: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  line-height: 30px;\r\n  color: #666666;\r\n  text-shadow: 1px 1px 0px #fff;\r\n  filter: dropshadow(color=#fff, offx=1, offy=1);\r\n}\r\n.ui-datepicker-calendar .ui-state-default {\r\n  background: #ededed;\r\n  background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));\r\n  background: -webkit-linear-gradient(top, #ededed 0%,#dedede 100%);\r\n  background: -o-linear-gradient(top, #ededed 0%,#dedede 100%);\r\n  background: -ms-linear-gradient(top, #ededed 0%,#dedede 100%);\r\n  background: linear-gradient(top, #ededed 0%,#dedede 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );\r\n  -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);\r\n  -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);\r\n  box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);\r\n}\r\n.ui-datepicker-unselectable .ui-state-default {\r\n  background: #f4f4f4;\r\n  color: #b4b3b3;\r\n}\r\n<\/pre>\n
When you hover over the date, it will turn slightly white.<\/p>\n
\r\n.ui-datepicker-calendar .ui-state-hover {\r\n  background: #f7f7f7;\r\n}\r\n<\/pre>\n
When the date is in an active state, it will have the following styles.<\/p>\n
\r\n.ui-datepicker-calendar .ui-state-active {\r\n  background: #6eafbf;\r\n  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);\r\n  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);\r\n  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);\r\n  color: #e0e0e0;\r\n  text-shadow: 0px 1px 0px #4d7a85;\r\n  filter: dropshadow(color=#4d7a85, offx=0, offy=1);\r\n  border: 1px solid #55838f;\r\n  position: relative;\r\n  margin: -1px;\r\n}\r\n<\/pre>\n
Now, the calendar should look much better.<\/p>\n
\"Styled<\/figure>\n
Fixing the Position<\/h2>\n
At this point, look at the date carefully. When you click on the date in the first or last column, you will notice that the active state is overflowing a pixel off the calendar edge.<\/p>\n
\"Active<\/figure>\n
So here, we will make some small fixes.<\/p>\n
First, we will decrease the date width to 29px<\/code>, and set the right margin of the last column and the left margin of the first column to 0<\/code> to reverse the -1px<\/code> margin we have set previously for the active state.<\/p>\n
\r\n.ui-datepicker-calendar td:first-child .ui-state-active {\r\n  width: 29px;\r\n  margin-left: 0;\r\n}\r\n.ui-datepicker-calendar td:last-child .ui-state-active {\r\n  width: 29px;\r\n  margin-right: 0;\r\n}\r\n<\/pre>\n
The date at the last row of the calendar will also have a similar treatment.<\/p>\n
\r\n.ui-datepicker-calendar tr:last-child .ui-state-active {\r\n  height: 29px;\r\n  margin-bottom: 0;\r\n}\r\n<\/pre>\n
Now, let\u2019s see the result. The calendar now looks beautiful and fits perfectly as our design reference. You can see the demo and download the source to examine the code from the links below the image.<\/p>\n
\"Styled<\/figure>\n
<\/i>  Demo <\/span><\/a>\n<\/i>  Download Source <\/span><\/a><\/p>\n
Bonus: Extend the Calendar<\/h2>\n
Today, we have learned quite a lot about how to create a custom theme for jQuery UI Datepicker. But you shouldn\u2019t stop here, as there are still many things that can be extended from this datepicker. Depending on your jQuery and CSS proficiency, you can extend the calendar to be like this \u2013 a text input with an overlay datepicker.<\/p>\n
\"Extended<\/figure>\n
<\/i>  Demo <\/span><\/a>\n<\/i>  Download Source <\/span><\/a><\/p>\n
Further Reading<\/h3>\n
For further reading on jQuery UI, you can read the complete documentation here:<\/p>\n