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">
<strong>Default: </strong><code>null</code>
</div>
<div>A function takes a date as a parameter and must return an array with <code>[0]</code> equal to <code>true</code>/<code>false</code> indicating whether or not this date is selectable, <code>[1]</code> equal to a CSS class name or <code>""</code> ...
</div>
<div id="option-buttonImage" class="api-item">
<h3>buttonImage<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 URL for the popup button image. If set, the <a href="#option-buttonText"><code>buttonText</code></a> option becomes the <code>alt</code> value and is not directly displayed.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonImage 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 buttonImage 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-buttonImageOnly" class="api-item">
<h3>buttonImageOnly<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>Whether the button image should be rendered by itself instead of inside a button element.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonImageOnly 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 buttonImageOnly 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-buttonText" class="api-item">
<h3>buttonText<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 on the trigger button. Use in conjunction with the <a href="#option-showOn"><code>showOn</code></a> option set to <code>"button"</code> or <code>"both"</code>.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the buttonText 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 buttonText 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-calculateWeek" class="api-item">
<h3>calculateWeek<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
</h3>
<div class="default">
<strong>Default: </strong><code>jQuery.datepicker.iso8601Week</code>
</div>
<div>A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the calculateWeek 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 calculateWeek 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-changeMonth" class="api-item">
<h3>changeMonth<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>Whether the month should be rendered as a dropdown instead of text.</div>
<strong>Code examples:</strong><p>Initialize the datepicker with the changeMonth 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 changeMonth 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-changeYear" class="api-item">
<h3>changeYear<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>Whether the year should be rendered as a dropdown instead of text. Use the <a href="#option-yearRange"><code>yearRange</code></a> option to control which years are made available for selection.</div>
( run in 1.993 second using v1.01-cache-2.11-cpan-364913b4093 )