AproJo
view release on metacpan or search on metacpan
share/files/public/skins/default/jquery-ui-1.9.1.custom/development-bundle/docs/datepicker.html view on Meta::CPAN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI datepicker documentation</title>
<style>
body {
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
}
.gutter {
display: none;
}
</style>
</head>
<body>
<script>{
"title":
"Datepicker Widget",
"excerpt":
"Select a date from a popup or inline calendar",
"termSlugs": {
"category": [
"widgets"
]
}
}</script><section class="quick-nav"><header><h2>QuickNav<a href="#entry-longdesc">Overview</a><a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-altField">altField</a></div>
<div><a href="#option-altFormat">altFormat</a></div>
<div><a href="#option-appendText">appendText</a></div>
<div><a href="#option-autoSize">autoSize</a></div>
<div><a href="#option-buttonImage">buttonImage</a></div>
<div><a href="#option-buttonImageOnly">buttonImageOnly</a></div>
<div><a href="#option-buttonText">buttonText</a></div>
<div><a href="#option-calculateWeek">calculateWeek</a></div>
<div><a href="#option-changeMonth">changeMonth</a></div>
<div><a href="#option-changeYear">changeYear</a></div>
<div><a href="#option-closeText">closeText</a></div>
<div><a href="#option-constrainInput">constrainInput</a></div>
<div><a href="#option-currentText">currentText</a></div>
<div><a href="#option-dateFormat">dateFormat</a></div>
<div><a href="#option-dayNames">dayNames</a></div>
<div><a href="#option-dayNamesMin">dayNamesMin</a></div>
<div><a href="#option-dayNamesShort">dayNamesShort</a></div>
<div><a href="#option-defaultDate">defaultDate</a></div>
<div><a href="#option-duration">duration</a></div>
<div><a href="#option-firstDay">firstDay</a></div>
<div><a href="#option-gotoCurrent">gotoCurrent</a></div>
<div><a href="#option-hideIfNoPrevNext">hideIfNoPrevNext</a></div>
<div><a href="#option-isRTL">isRTL</a></div>
<div><a href="#option-maxDate">maxDate</a></div>
<div><a href="#option-minDate">minDate</a></div>
<div><a href="#option-monthNames">monthNames</a></div>
<div><a href="#option-monthNamesShort">monthNamesShort</a></div>
<div><a href="#option-navigationAsDateFormat">navigationAsDateFormat</a></div>
<div><a href="#option-nextText">nextText</a></div>
<div><a href="#option-numberOfMonths">numberOfMonths</a></div>
<div><a href="#option-prevText">prevText</a></div>
<div><a href="#option-selectOtherMonths">selectOtherMonths</a></div>
<div><a href="#option-shortYearCutoff">shortYearCutoff</a></div>
<div><a href="#option-showAnim">showAnim</a></div>
<div><a href="#option-showButtonPanel">showButtonPanel</a></div>
<div><a href="#option-showCurrentAtPos">showCurrentAtPos</a></div>
<div><a href="#option-showMonthAfterYear">showMonthAfterYear</a></div>
<div><a href="#option-showOn">showOn</a></div>
<div><a href="#option-showOptions">showOptions</a></div>
<div><a href="#option-showOtherMonths">showOtherMonths</a></div>
<div><a href="#option-showWeek">showWeek</a></div>
<div><a href="#option-stepMonths">stepMonths</a></div>
<div><a href="#option-weekHeader">weekHeader</a></div>
<div><a href="#option-yearRange">yearRange</a></div>
<div><a href="#option-yearSuffix">yearSuffix</a></div>
<div><a href="#option-beforeShow">beforeShow</a></div>
<div><a href="#option-beforeShowDay">beforeShowDay</a></div>
<div><a href="#option-onChangeMonthYear">onChangeMonthYear</a></div>
<div><a href="#option-onClose">onClose</a></div>
<div><a href="#option-onSelect">onSelect</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-dialog">dialog</a></div>
<div><a href="#method-isDisabled">isDisabled</a></div>
<div><a href="#method-hide">hide</a></div>
<div><a href="#method-show">show</a></div>
<div><a href="#method-refresh">refresh</a></div>
<div><a href="#method-getDate">getDate</a></div>
<div><a href="#method-setDate">setDate</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-widget">widget</a></div>
</div>
<div class="quick-nav-section"><h3>Events</h3></div></section><article id="datepicker1" class="entry widget"><h2 class="section-title">
<span>Datepicker Widget</span><span class="version-details">version added: 1.0</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Select a date from a popup or inline calendar</p>
<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-altField" class="api-item first-item">
<h3>altField<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a> or <a href="http://api.jquery.com/Types#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types#Element">Element</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>An input element that is to be updated with the selected date from the datepicker. Use the <a href="#option-altFormat"><code>altFormat</code></a> option to change the format of the date within this field. Leave as blank for no alternate field.</...
<strong>Code examples:</strong><p>Initialize the datepicker with the altField option specified:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code>...
<p>Get or set the altField option, after initialization:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2...
</div>
<div id="option-altFormat" class="api-item">
<h3>altFormat<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>The <a href="#option-dateFormat"><code>dateFormat</code></a> to be used for the <a href="#option-altField"><code>altField</code></a> option. This allows one date format to be shown to the user for selection purposes, while a different format is ...
<strong>Code examples:</strong><p>Initialize the datepicker with the altFormat option specified:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code>...
<p>Get or set the altFormat option, after initialization:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2...
</div>
<div id="option-appendText" class="api-item">
<h3>appendText<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>""</code>
</div>
<div>The text to display after each date field, e.g., to show the required format.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the appendText option specified:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code>...
<p>Get or set the appendText option, after initialization:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2...
</div>
<div id="option-autoSize" class="api-item">
<h3>autoSize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Set to <code>true</code> to automatically resize the input field to accommodate dates in the current <a href="#option-dateFormat"><code>dateFormat</code></a>.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the autoSize option specified:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code>...
<p>Get or set the autoSize option, after initialization:</p>
<div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2...
</div>
<div id="option-beforeShow" class="api-item">
<h3>beforeShow<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Element">Element</a> input, <a href="http://api.jquery.com/Types#Object">Object</a> inst...
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.</div>
</div>
<div id="option-beforeShowDay" class="api-item">
<h3>beforeShowDay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types#Date">Date</a> date )</span>
</h3>
<div class="default">
share/files/public/skins/default/jquery-ui-1.9.1.custom/development-bundle/docs/datepicker.html view on Meta::CPAN
</div>
<div class="api-item">
<h3>option( optionName, value )</h3>
<div>Sets the value of the datepicker option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
</div>
<div class="api-item">
<h3>option( options )</h3>
<div>Sets one or more options for the datepicker.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
</div>
</div>
<div id="method-refresh"><div class="api-item">
<h3>refresh()</h3>
<div>Redraw the date picker, after having made some external modifications.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div>
<div id="method-setDate"><div class="api-item">
<h3>setDate( date )</h3>
<div>Sets the date for the datepicker. The new date may be a <code>Date</code> object or a string in the current <a href="#option-dateFormat">date format</a> (e.g., <code>"01/26/2009"</code>), a number of days from today (e.g., <code>+7</code>) or a ...
<ul><li>
<div><strong>date</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Date">Date</a>
</div>
<div>The new date.</div>
</li></ul>
</div></div>
<div id="method-show"><div class="api-item">
<h3>show()</h3>
<div>Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div>
<div id="method-widget"><div class="api-item">
<h3>widget() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
Returns a <code>jQuery</code> object containing the datepicker.
</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div></section><div class="longdesc" id="entry-longdesc">
<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>By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.</p>
<h3>Keyboard interaction</h3>
<p>While the datepicker is open, the following key commands are available:</p>
<ul>
<li>PAGE UP: Move to the previous month.</li>
<li>PAGE DOWN: Move to the next month.</li>
<li>CTRL+PAGE UP: Move to the previous year.</li>
<li>CTRL+PAGE DOWN: Move to the next year.</li>
<li>CTRL+HOME: Move to the current month. Open the datepicker if closed.</li>
<li>CTRL+LEFT: Move to the previous day.</li>
<li>CTRL+RIGHT: Move to the next day.</li>
<li>CTRL+UP: Move to the previous week.</li>
<li>CTRL+DOWN: Move the next week.</li>
<li>ENTER: Select the focused date.</li>
<li>CTRL+END: Close the datepicker and erase the date.</li>
<li>ESCAPE: Close the datepicker without selection.</li>
</ul>
<h3 id="utility-functions">Utility functions</h3>
<ul>
<li>$.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.</li>
<li>$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.</li>
<li>$.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.</li>
<li>$.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.</li>
<li>$.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends.</li>
</ul>
<h3>Localization</h3>
<p>Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., <code>jquery.ui.datepicker-fr.js</cod...
<p>The <code>$.datepicker.regional</code> attribute holds an array of localizations, indexed by language code, with <code>""</code> referring to the default (English). Each entry is an object with the following attributes: <code>closeText</code>, <...
<p>You can restore the default localizations with:</p>
<code>$.datepicker.setDefaults( $.datepicker.regional[ "" ] );</code>
<p>And can then override an individual datepicker for a specific locale:</p>
<code>$( selector ).datepicker( $.datepicker.regional[ "fr" ] );</code>
</div>
<h3>Additional Notes:</h3>
<div class="longdesc"><ul><li>
This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
</li></ul></div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Datepicker.</span></h4>
<div class="syntaxhighlighter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><d...
<h4>Demo:</h4>
<div class="demo code-demo" data-height="300"></div>
</div></section>
</div></article>
</body>
</html>
( run in 1.881 second using v1.01-cache-2.11-cpan-75ffa21a3d4 )