Datepicker: Theming docs

Author: tjvantoll

entries/datepicker.xml

@@ -181,6 +181,57 @@
 		<p>And can then override an individual datepicker for a specific locale:</p>
 		<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>
 
+		<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+
+		<ul>
+			<li>
+				<code>ui-datepicker</code>: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a <code>ui-datepicker-inline</code> class. If the <a href="#option-isRTL"><code>isRTL</code></a> option is set, this element will additionally have a class of <code>ui-datepicker-rtl</code>.
+				<ul>
+					<li>
+						<code>ui-datepicker-header</code>: The container for the datepicker's header.
+						<ul>
+							<li><code>ui-datepicker-prev</code>: The control used to select previous months.</li>
+							<li><code>ui-datepicker-next</code>: The control used to select subsequent months.</li>
+							<li>
+								<code>ui-datepicker-title</code>: The container for the datepicker's title containing the month and year.
+								<ul>
+									<li><code>ui-datepicker-month</code>: The textual display of the month or a <code>&lt;select&gt;</code> element if the <a href="#option-changeMonth"><code>changeMonth</code></a> option is set.</li>
+									<li><code>ui-datepicker-year</code>: The textual display of the year or a <code>&lt;select&gt;</code> element if the <a href="#option-changeYear"><code>changeYear</code></a> option is set.</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+					<li>
+						<code>ui-datepicker-calendar</code>: The table that contains the calendar itself.
+						<ul>
+							<li><code>ui-datepicker-week-end</code>: Cells containing weekend days.</li>
+							<li><code>ui-datepicker-other-month</code>: Cells containing days that occur in a month other than the currently selected month.</li>
+							<li><code>ui-datepicker-unselectable</code>: Cells containing days that are not selectable by the user.</li>
+							<li><code>ui-datepicker-current-day</code>: The cell containing the selected day.</li>
+							<li><code>ui-datepicker-today</code>: The cell containing today's date.</li>
+						</ul>
+					</li>
+					<li>
+						<code>ui-datepicker-buttonpane</code>: The buttonpane that is used when the <a href="#option-showButtonPanel"><code>showButtonPanel</code></a> option is set.
+						<ul>
+							<li><code>ui-datepicker-current</code>: The button used to select today's date.</li>
+						</ul>
+					</li>
+				</ul>
+			</li>
+		</ul>
+
+		<p>If the <a href="#option-numberOfMonths"><code>numberOfMonths</code></a> option is used to display multiple months at once, a number of additional classes are used:</p>
+
+		<ul>
+			<li>
+				<code>ui-datepicker-multi</code>: The outermost container of a multiple month datepicker. This element can additionally have a <code>ui-datepicker-multi-2</code>, <code>ui-datepicker-multi-3</code>, or <code>ui-datepicker-multi-4</code> class name depending on the number of months to display.
+				<ul>
+					<li><code>ui-datepicker-group</code>: Individual pickers within the group. This element will additionally have a <code>ui-datepicker-group-first</code>, <code>ui-datepicker-group-middle</code>, or <code>ui-datepicker-group-last</code> class name depending on its position within the group.</li>
+				</ul>
+			</li>
+		</ul>
+
 		<h3>Dependencies</h3>
 		<ul>
 			<li><a href="/category/ui-core/">UI Core</a></li>