mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
123 lines
32 KiB
HTML
123 lines
32 KiB
HTML
<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><a href="index-ru.html" class="lang-link"><img src="img/ru.png"><span>На русском языке</span></a><h1 class="promo-header">AIR DATEPICKER<span>lightweight cross-browser jQuery datepicker</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
|
||
$promo.datepicker({
|
||
language: 'en'
|
||
})</script></p><article><h2 id="intro">Description</h2><p>Light (<strong>~20kb</strong> minified js file and <strong>~5.5kb</strong> gziped) cross-browser calendar, built with<span class="example-inline"><code>es5</code></span>and<span class="example-inline"><code class="js">css flexbox</code></span>.Works in all modern browsers:
|
||
<strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Installation</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Usage</h2><p>Include styles and scripts from<span class="example-inline"><code>/dist</code></span>directory:</p><pre class="example-code"><code class="html"><html>
|
||
<head>
|
||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
||
<script src="dist/js/datepicker.min.js"></script>
|
||
</head>
|
||
</html></code></pre><p>Datepicker will automatically initialize on elements with class<span class="example-inline"><code class="css">.datepicker-here</code></span>, options may be sent via<span class="example-inline"><code class="html">data</code></span>attributes.</p><pre class="example-code"><code class="html"><input type='text' class="datepicker-here" data-position="right top" /></code></pre><h3>Manual initialization</h3><pre class="example-code"><code class="js">// Initialization
|
||
$('#my-element').datepicker([options])
|
||
// Access to an instance of an object
|
||
$('#my-element').data('datepicker')</code></pre></article><article><h2 id="examples">Examples</h2><h3>Initialization with default options</h3><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type='text' class='datepicker-here', data-language='en' /></code></pre></div><h3>Selecting multiple dates</h3><p>Pass the parameter<span class="example-inline"><code class="js">{multipleDates: true}</code></span>for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " data-position="top left" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||
class="datepicker-here"
|
||
data-multiple-dates="3"
|
||
data-multiple-dates-separator=", "
|
||
data-position='right top'/></code></pre></div><h3>Permanently visible calendar</h3><p>Initialize the plugin on non text input element, such as<span class="example-inline"><code class="html"><div> … </div></code></span>,or pass the parameter<span class="example-inline"><code class="js">{inline: true}</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code class="html"><div class="datepicker-here" data-language='en'></div></code></pre></div><h3>Month selection</h3><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-min-view="months" data-view="months" data-date-format="MM yyyy" data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||
class="datepicker-here"
|
||
data-language='en'
|
||
data-min-view="months"
|
||
data-view="months"
|
||
data-date-format="MM yyyy" /></code></pre></div><h3>Minimum and maximum dates</h3><p>To limit date selection, use<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>, they must receive JavaScript Date object.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input id="minMaxExample" type="text"><script>$('#minMaxExample').datepicker({
|
||
language: 'en',
|
||
minDate: new Date() // Now can select only dates, which goes after today
|
||
})</script></div><pre class="example-code"><code class="js">$('#minMaxExample').datepicker({
|
||
language: 'en',
|
||
minDate: new Date() // Now can select only dates, which goes after today
|
||
})</code></pre></div><h3>Range</h3><p>By default there is no functionality to select dates range, but it can be easily achieved manually.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div class="range-example"><input type="text" placeholder="Start" id="start"><span>–</span><input type="text" placeholder="End" id="end"></div><script>var $start = $('#start'),
|
||
$end = $('#end');
|
||
$start.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$end.data('datepicker')
|
||
.update('minDate', date)
|
||
}
|
||
})
|
||
$end.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$start.data('datepicker')
|
||
.update('maxDate', date)
|
||
}
|
||
})</script></div><pre class="example-code"><code class="js">var $start = $('#start'),
|
||
$end = $('#end');
|
||
$start.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$end.data('datepicker')
|
||
.update('minDate', date)
|
||
}
|
||
})
|
||
$end.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$start.data('datepicker')
|
||
.update('maxDate', date)
|
||
}
|
||
})</code></pre></div></article><article><h2 id="localization">Localization</h2><p>You can add your localization to object<span class="example-inline"><code class="js">Datepicker.language["my-lang"]</code></span>and pass it name to parameter<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">// Add custom localization
|
||
Datepicker.language['my-lang'] = {...}
|
||
|
||
// Initialize datepicker with it
|
||
$('.my-datepicker').datepicker({
|
||
language: 'my-lang'
|
||
})</code></pre><p>You can also pass localization object directly in<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$('.my-datepicker').datepicker({
|
||
language: {
|
||
days: [...]
|
||
...
|
||
}
|
||
})</code></pre><p>If some fields are missing, they will be taken from default localization object ('Russian').</p><h3>Example of localization object</h3><pre class="example-code"><code class="js">Datepicker.language['en'] = {
|
||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
|
||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
today: 'Today',
|
||
clear: 'Clear',
|
||
dateFormat: 'mm/dd/yy',
|
||
firstDay: 0
|
||
};</code></pre><p>Available localizations located in<span class="example-inline"><code class="js">dist/js/i18n</code></span>directory.</p></article><article><h2 id="options">Options</h2><div class="param"><header class="param-header"><h3>inline</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, then datepicker will be always visible.</p></div><div class="param"><header class="param-header"><h3>language</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string|object</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"ru"</code></span></p></header><p>Datepicker's language. If string is passed, then language will be searched in<span class="example-inline"><code class="js">Datepicker.language</code></span>object.
|
||
If object is passed, then data will be taken from this object directly.</p><p>If some fields are missing, they will be taken from default localization object ('Russian').</p></div><div class="param"><header class="param-header"><h3>startDate</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">new Date()</code></span></p></header><p>Which date must be shown at first initialization.</p></div><div class="param"><header class="param-header"><h3>firstDay</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Day index from which week will be started. Possible values are from 0 to 6, where 0 - sunday и 6 - saturday.
|
||
By default value is taken from current localization, but if it passed here, then it will have higher priority.</p></div><div class="param"><header class="param-header"><h3>weekends</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">array</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">[6, 0]</code></span></p></header><p>Array of day's indexes, which must be considered as holidays. Class<span class="example-inline"><code class="css">.-weekend-</code></span>will be added to relevant cells.
|
||
. By default its saturday and sunday.</p></div><div class="param"><header class="param-header"><h3>dateFormat</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Format of date, it's combination of d, m, yyyy, D, M, и т.д. By default value is taken from current localization, but if it passed here, then it will have higher priority.</p><ul><li><span class="param-inline"><strong>d</strong></span>- date number</li><li><span class="param-inline"><strong>dd</strong></span>- date with leading zero</li><li><span class="param-inline"><strong>D</strong></span>- short day name</li><li><span class="param-inline"><strong>DD</strong></span>- full day name</li><li><span class="param-inline"><strong>m</strong></span>- month number</li><li><span class="param-inline"><strong>mm</strong></span>- month number with leading zero</li><li><span class="param-inline"><strong>M</strong></span>- short month name</li><li><span class="param-inline"><strong>MM</strong></span>- full month name</li><li><span class="param-inline"><strong>yy</strong></span>- two digit year number</li><li><span class="param-inline"><strong>yyyy</strong></span>- four digit year number</li><li><span class="param-inline"><strong>yyyy1</strong></span>- first year of decade, which included current year</li><li><span class="param-inline"><strong>yyyy2</strong></span>- last year of decade, which included current year</li></ul></div><div class="param"><header class="param-header"><h3>toggleSelected</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then clicking on selected cell will remove selection.</p></div><div class="param"><header class="param-header"><h3>position</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"bottom left"</code></span></p></header><p>Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
|
||
For example<span class="example-inline"><code class="js">{position: "right top"}</code></span>- will set datepicker's position from right side on top of text input.</p></div><div class="param"><header class="param-header"><h3>offset</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">12</code></span></p></header><p>Offset from the main positioning axes.</p></div><div class="param"><header class="param-header"><h3>view</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"days"</code></span></p></header><p>Start datepicker view. Possible values are:<ul><li><span class="example-inline"><code class="js">days</code></span>- display days of one month</li><li><span class="example-inline"><code class="js">months</code></span>- display months of one year</li><li><span class="example-inline"><code class="js">years</code></span>- display years of one decade</li></ul></p></div><div class="param"><header class="param-header"><h3>minView</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"days"</code></span></p></header><p>Minimal datepicker's view, on that view selecting cells will not trigger rendering next view, instead it will activate it.
|
||
Possible values are the same as in<span class="example-inline"><code>view</code></span>.</p></div><div class="param"><header class="param-header"><h3>showOtherMonths</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then days from other months will be visible.</p></div><div class="param"><header class="param-header"><h3>selectOtherMonths</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then one can select days form other months.</p></div><div class="param"><header class="param-header"><h3>moveToOtherMonthsOnSelect</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then selecting days from other month, will cause transition to that month.</p></div><div class="param"><header class="param-header"><h3>showOtherYears</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then years from other decades will be visible.</p></div><div class="param"><header class="param-header"><h3>selectOtherYears</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then on can select years from other decades</p></div><div class="param"><header class="param-header"><h3>moveToOtherYearsOnSelect</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then selecting year from other decade, will cause transition to that decade.</p></div><div class="param"><header class="param-header"><h3>minDate</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">""</code></span></p></header><p>The minimum date for selection. All dates, running before it can't be activated.</p></div><div class="param"><header class="param-header"><h3>maxDate</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">""</code></span></p></header><p>The maximum date for selection. All dates which comes after it cannot be selected.</p></div><div class="param"><header class="param-header"><h3>disableNavWhenOutOfRange</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">true</code></span></p></header><p>If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.</p></div><div class="param"><header class="param-header"><h3>multipleDates</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean|number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.</p></div><div class="param"><header class="param-header"><h3>multipleDatesSeparator</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">","</code></span></p></header><p>Dates separator, which will be used when concatenating dates to string.</p></div><div class="param"><header class="param-header"><h3>todayButton</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, then button "Today" will be visible.</p></div><div class="param"><header class="param-header"><h3>clearButton</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, then button "Clear" will be visible.</p></div><div class="param"><header class="param-header"><h3>showEvent</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"focus"</code></span></p></header><p>Event type, on which datepicker must be shown.</p></div><div class="param"><header class="param-header"><h3>autoClose</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, when after date selection, datepicker will be closed.</p></div><div class="param"><header class="param-header"><h3>prevHtml</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js"><svg><path d="M 17,12 l -5,5 l 5,5"></path></svg></code></span></p></header><p>Contents of 'next' button.</p></div><div class="param"><header class="param-header"><h3>nextHtml</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js"><svg><path d="M 14,12 l 5,5 l -5,5"></path></svg></code></span></p></header><p>Contents of 'prev' button.</p></div><div class="param"><header class="param-header"><h3>navTitles</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">object</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><pre class="example-code"><code class="js">navTitles = {
|
||
days: 'MM, <i>yyyy</i>',
|
||
months: 'yyyy',
|
||
years: 'yyyy1 - yyyy2'
|
||
};</code></pre></p></header><p>Content of datepicker's title depending on current view, can use same notation as in parameter<span class="example-inline"><code class="js">dateFormat</code></span>. Missing fields will be taken from default values. Html tags are also possible.</p><pre class="example-code"><code class="js">$('#my-datepicker').datepicker({
|
||
navTitles: {
|
||
days: '<h3>Check in date:</h3> MM, yyyy'
|
||
}
|
||
})</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">"monthsShort"</code></span></p></header><p>Which field from localization object must be used as months names, when view is 'months'.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object
|
||
if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
|
||
html: '', // Custom cell content
|
||
classes: '', // Extra css classes to cell
|
||
disabled: '' // true/false, if true, when cell will be disabled
|
||
}</code></pre><h4>Example</h4><pre class="example-code"><code class="js">$('#my-datepicker').datepicker({
|
||
// Let's make a function which will add class 'my-class' to every 11 of the month
|
||
// and make these cells disabled.
|
||
onRenderCell: function(date, cellType) {
|
||
if (cellType == 'day' && date.getDate() == 11) {
|
||
return {
|
||
classes: 'my-class',
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
})</code></pre></div></article><article><h2 id="api">API</h2><p>Plugin instance is accessible through<span class="example-inline"><code>data</code></span>attribute.</p><pre class="example-code"><code class="js">var myDatepicker = $('#my-elem').datepicker().data('datepicker');
|
||
myDatepicker.show();</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Shows datepicker.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Hides datepicker.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Renders next month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Renders previous month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Activates passed date. If<span class="example-inline"><code class="js">{multipleDates: false}</code></span>and date is already active, then it will be deactivated. If<span class="example-inline"><code class="js">{multipleDates: true}</code></span>then another active date will be added.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Removes selection from passed date.</p></div><div class="param"><header class="param-header"><h3>clear()</h3></header><p>Clears all selected dates.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- field name which must be updated.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- new value.</li></ul><p>This method updates datepicker's options. After calling this method, datepicker will be redrawn.
|
||
You can update several parameters at one time, just pass on object with necessary fields.</p><pre class="example-code"><code class="js">var datepicker = $('#my-elem').datepicker().data('datepicker');
|
||
// Single parameter update
|
||
datepicker.update('minDate', new Date())
|
||
// Multiple parameters
|
||
datepicker.update({
|
||
position: "top right",
|
||
maxDate: new Date(),
|
||
todayButton: true
|
||
})</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Sets new view for datepicker.</p><pre class="example-code"><code class="js">datepicker.view = 'months';</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Sets new viewing date for datepicker, must pass a JavaScript Date object<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date();</code></pre></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
|
||
$code.each(function (i, el) {
|
||
hljs.highlightBlock(el);
|
||
})
|
||
|
||
navigation.init();</script></body></html> |