The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> <div class="ui-datepicker-title"> <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span> </div> </div> <table class="ui-datepicker-calendar"> <thead> <tr> <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> ... </tr> </thead> <tbody><tr> <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td> ... </tr> </tbody> </table> <div class="ui-datepicker-buttonpane ui-widget-content"> <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button> </div> </div>

Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is <input type="text" /> or <div></div>.