jQueryUIDatepicker–实用的jQuery日历控件

<ul class="UIAPIPlugin-toc"> <li><a href="#overview">Overview</a></li> <li><a href="#options">Options</a></li> <li><a href="#events">Events</a></li> <li><a href="#methods">Methods</a></li> <li><a href="#theming">Theming</a></li> </ul> <div class="UIAPIPlugin"> <h1>jQuery UI Datepicker</h1> <div id="overview"> <h2 class="top-header">Overview</h2> <div id="overview-main"> <p>The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.</p> <p>By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date if selected. For an inline calendar, simply attach the datepicker to a div or span. </p><p>You can use keyboard shortcuts to drive the datepicker: </p> <ul> <li>page up/down - previous/next month <li>ctrl+page up/down - previous/next year <li>ctrl+home - current month or open when closed <li>ctrl+left/right - previous/next day <li>ctrl+up/down - previous/next week <li>enter - accept the selected date <li>ctrl+end - close and erase the date <li>escape - close the datepicker without selection </ul> </div> <div id="overview-dependencies"> <h3>Dependencies</h3> <ul> <li>UI Core</li> </ul> </div> <div id="overview-example"> <h3>Example</h3> <div id="overview-example" class="example"> <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> <p><div id="demo" class="tabs-container" rel="220"> A simple jQuery UI Datepicker.<br /> </p> <pre>$(&quot;#datepicker&quot;).datepicker(); </pre> <p></div><div id="source" class="tabs-container"> </p> <pre>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.datepicker.js&quot;&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(&quot;#datepicker&quot;).datepicker(); }); &lt;/script&gt; &lt;/head&gt; &lt;body style="font-size:62.5%;"&gt; &lt;div type=&quot;text&quot; id=&quot;datepicker&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p></div> </p><p></div> </div> </div> <div id="options"> <h2 class="top-header">Options</h2> <ul class="options-list"> <li class="option" id="option-altField"> <div class="option-header"> <h3 class="option-name"><a href="#option-altField">altField</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">String</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">''</dd> </dl> </div> <div class="option-description"> <p>The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code>altFormat</code> setting below to change the format of the date within this field. Leave as blank for no alternate field.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>altField</code> option specified. </dt> <dd> <pre><code>$('.selector').datepicker({ altField: '#actualDate' });</code></pre> </dd> <dt> Get or set the <code>altField</code> option, after init. </dt> <dd> <pre><code>//getter var altField = $('.selector').datepicker('option', 'altField'); //setter $('.selector').datepicker('option', 'altField', '#actualDate');</code></pre> </dd> </dl> </div> </li> <li class="option" id="option-altFormat"> <div class="option-header"> <h3 class="option-name"><a href="#option-altFormat">altFormat</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">String</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">''</dd> </dl> </div> <div class="option-description"> <p>The <code>dateFormat</code> to be used for the <code>altField</code> option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>altFormat</code> option specified. </dt> <dd> <pre><code>$('.selector').datepicker({ altFormat: 'yy-mm-dd' });</code></pre> </dd> <dt> Get or set the <code>altFormat</code> option, after init. </dt> <dd> <pre><code>//getter var altFormat = $('.selector').datepicker('option', 'altFormat'); //setter $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');</code></pre> </dd> </dl> </div> </li> <li class="option" id="option-appendText"> <div class="option-header"> <h3 class="option-name"><a href="#option-appendText">appendText</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">String</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">''</dd> </dl> </div> <div class="option-description"> <p>The text to display after each date field, e.g. to show the required format.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>appendText</code> option specified. </dt> <dd> <pre><code>$('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });</code></pre> </dd> <dt> Get or set the <code>appendText</code> option, after init. </dt> <dd> <pre><code>//getter var appendText = $('.selector').datepicker('option', 'appendText'); //setter $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');</code></pre> </dd> </dl> </div> </li> <li class="option" id="option-buttonImage"> <div class="option-header"> <h3 class="option-name"><a href="#option-buttonImage">buttonImage</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">String</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">''</dd> </dl> </div> <div class="option-description"> <p>The URL for the popup button image. If set, button text becomes the <i>alt</i> value and is not directly displayed.</p> </div> <div class="option-examples"> <h4>Code examples</h4> <dl class="option-examples-list"> <dt> Initialize a datepicker with the <code>buttonImage</code> option specified. </dt> <dd> <pre><code>$('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });</code></pre> </dd> <dt> Get or set the <code>buttonImage</code> option, after init. </dt> <dd> <pre><code>//getter var buttonImage = $('.selector').datepicker('option', 'buttonImage'); //setter $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');</code></pre> </dd> </dl> </div> </li> <li class="option" id="option-buttonImageOnly"> <div class="option-header"> <h3 class="option-name"><a href="#option-buttonImageOnly">buttonImageOnly</a></h3> <dl> <dt class="option-type-label">Type:</dt> <dd class="option-type">Boolean</dd> <dt class="option-default-label">Default:</dt> <dd class="option-default">false</dd> </dl> </div> <div class="option-description"> <p>Set to true to place an image after the