From jQuery JavaScript Library

« Back to UI/Datepicker

This page explains how to create a theme for the jQuery UI Datepicker plugin.

Contents 1 Markup 2 IDs 3 Classes 4 Tips

Markup

<div id="datepicker_div" class="datepicker_multi">
  <div class="datepicker_control">
    <div class="datepicker_clear"><a>Clear</a></div>
    <div class="datepicker_close"><a>Close</a></div>
  </div>
  <div class="datepicker_links">
    <div class="datepicker_prev"><a><Prev</a></div>
    <div class="datepicker_current"><a>Today</a></div>
    <div class="datepicker_next"><a>Next></a></div>
  </div>
  <div class="datepicker_oneMonth datepicker_newRow">
    <div class="datepicker_header">
      <select class="datepicker_newMonth"></select>
      <select class="datepicker_newYear"></select>
    </div>
    <table class="datepicker" cellpadding="0" cellspacing="0">
      <thead>
        <tr class="datepicker_titleRow">
          <td>Wk</td><td class="datepicker_weekEndCell"><a>Su</a></td><td><a>Mo</a></td>...
        </tr>
      </thead>
      <tbody>
        <tr class="datepicker_daysRow">
          <td class="datepicker_weekCol">1</td>
          <td class="datepicker_daysCell datepicker_weekEndCell
            datepicker_otherMonth datepicker_unselectable">31</td>
          <td class="datepicker_daysCell"><a>1</a></td>
          <td class="datepicker_daysCell datepicker_daysCellOver"><a>2</a></td>
          <td class="datepicker_daysCell datepicker_daysCellOver datepicker_currentDay"><a>3</a></td>
          <td class="datepicker_daysCell datepicker_today"><a>4</a></td>
          ...
        </tr>
        ...
      </tbody>
    </table>
  </div>
  <div class="datepicker_oneMonth">
    ...
  </div>
  ...
  <div id="datepicker_status_nn" class="datepicker_status"></div>
  <div style="clear: both;"></div>
</div>

IDs

• datepicker_div - The container that wraps around the entire date picker. This element is shared by all pop-up date pickers. Inline date pickers have their own instances with IDs in the format datepicker_div_nn, where nn is the internal instance number.

Classes

• datepicker_multi - Indicates that the date picker shows multiple months.
• datepicker_rtl - Indicates that the date picker uses a right-to-left rendered language. Since v3.2.
• datepicker_inline - Container for the date picker if it is displayed inline.
• datepicker_prompt - The row for a prompt when displayed in a dialog.
• datepicker_control - The row containing the Clear and Close links.
• datepicker_clear - The division containing the Clear link.
• datepicker_close - The division containing the Close link.
• datepicker_links - The row containing the Prev, Next, and Current links.
• datepicker_prev - The division containing the Prev link.
• datepicker_current - The division containing the Current link.
• datepicker_next - The division containing the Next link.
• datepicker_oneMonth - The container for a single month.
• datepicker_newRow - The start of a new row of months.
• datepicker_header - The row containing the month and year.
• datepicker_newMonth - Drop down menu for selecting months.
• datepicker_newYear - Drop down menu for selecting years.
• datepicker - The table for a single month.
• datepicker_titleRow - Header row of the table containing day names.
• datepicker_daysRow - Row of day numbers on the calendar.
• datepicker_weekCol - The week of the year column. Since v3.1.
• datepicker_daysCell - A standard day number.
• datepicker_daysCellOver - Mouse over state for a selectable day.
• datepicker_currentDay - Highlight the currently selected date.
• datepicker_today - Highlight today's date.
• datepicker_weekEndCell - Contains a weekend date.
• datepicker_otherMonth - Dates before and after the days in the current month.
• datepicker_unselectable - Days that are deactivated for users to select.
• datepicker_status - The status bar for the datepicker. Since v3.2.
• datepicker_cover - IFRAME that only displays in Internet Explorer 6 or below.

Tips

• Prevent select boxes from showing through the date picker in Internet Explorer 6 or below with this CSS:

.datepicker_cover {
  display: none; /*sorry for IE5*/
  display/**/: block; /*sorry for IE5*/
  position: absolute; /*must have*/
  z-index: -1; /*must have*/
  filter: mask(); /*must have*/
  top: -4px; /*must have*/
  left: -4px; /*must have*/
  width: 193px; /*must have to match width and borders*/
  height: 200px; /*must have to match maximum height*/ 
}

• Set the date picker div to not display initially, and also make sure it is above all other elements on the page.

#datepicker_div {
  display: none;
  z-index: 10; /*must have*/ 
}

• Web sites typically style all of the links on the page, so you should reset all of the links on the date picker to a default style before setting your custom link styles.

/* Reset link properties and then override them with !important */
#datepicker_div a, .datepicker_inline a {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none;
  color: #000;
}

• After you reset the styles (shown above), use the CSS attribute !important to make sure your styles being used and not any exterior styles.

.datepicker_control a {
  padding: 2px 5px !important;
  color: #eee !important;
}