harper/whisper.cat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
f127b4fea8
whisper.cat/weboasis/stocks/assets/vendor/air-datepicker-master/docs/index.html

334 lines
55 KiB
HTML
Raw Normal View History

whisper.cat stuff
2023-10-05 23:28:32 +11:00
<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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&amp;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><script src="js/logger.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><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 (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable 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">&lt;html&gt;
&lt;head&gt;
&lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;script src=&quot;dist/js/datepicker.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Include English language --&gt;
&lt;script src=&quot;dist/js/i18n/datepicker.en.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;/html&gt;</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">&lt;input type='text' class=&quot;datepicker-here&quot; data-position=&quot;right top&quot; /&gt;</code></pre><h3>Manual initialization</h3><pre class="example-code"><code class="js">// Initialization
$('#my-element').datepicker([options])
// Access instance of plugin
$('#my-element').data('datepicker')</code></pre></article><article><h2 id="examples">Examples</h2><h3 id="example-default">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">&lt;input type='text' class='datepicker-here' data-language='en' /&gt;</code></pre></div><h3 id="example-multiple">Selecting multiple dates</h3><p>Pass 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" data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
class=&quot;datepicker-here&quot;
data-language='en'
data-multiple-dates=&quot;3&quot;
data-multiple-dates-separator=&quot;, &quot;
data-position='top left'/&gt;</code></pre></div><h3 id="example-inline">Permanently visible calendar</h3><p>Initialize plugin on non text input element, such as<span class="example-inline"><code class="html">&lt;div&gt; … &lt;/div&gt;</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">&lt;div class=&quot;datepicker-here&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><h3 id="example-months">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">&lt;input type=&quot;text&quot;
class=&quot;datepicker-here&quot;
data-language='en'
data-min-view=&quot;months&quot;
data-view=&quot;months&quot;
data-date-format=&quot;MM yyyy&quot; /&gt;</code></pre></div><h3 id="example-min-max">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 id="example-range">Range of dates</h3><p>Use<span class="example-inline"><code>{range: true}</code></span>for choosing range of dates. As dates separator<span class="example-inline"><code>multipleDatesSeparator</code></span>will be used.</p><p>For possibility to select same date two times, you should set<span class="example-inline"><code>{toggleSelected: false}</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
data-range=&quot;true&quot;
data-multiple-dates-separator=&quot; - &quot;
data-language=&quot;en&quot;
class=&quot;datepicker-here&quot;/&gt;
</code></pre></div><h3 id="example-disabled-days">Disable days of week</h3><p>For disabling days, use<span class="example-inline"><code>onRenderCell</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="disabled-days"><script>// Make Sunday and Saturday disabled
var disabledDays = [0, 6];
$('#disabled-days').datepicker({
language: 'en',
onRenderCell: function (date, cellType) {
if (cellType == 'day') {
var day = date.getDay(),
isDisabled = disabledDays.indexOf(day) != -1;
return {
disabled: isDisabled
}
}
}
})</script></div><pre class="example-code"><code class="js">// Make Sunday and Saturday disabled
var disabledDays = [0, 6];
$('#disabled-days').datepicker({
language: 'en',
onRenderCell: function (date, cellType) {
if (cellType == 'day') {
var day = date.getDay(),
isDisabled = disabledDays.indexOf(day) != -1;
return {
disabled: isDisabled
}
}
}
})
</code></pre></div><h3 id="example-custom-content">Custom cells content</h3><p>Air Datepicker allows you to change contents of cells like you want. You could use<span class="example-inline"><code>onRenderCell</code></span>for this purpose.
Lets add extra elements to several dates, and show `lorem` text when selecting them.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div class="list-inline"><div><div id="custom-cells"></div></div><div id="custom-cells-events"><strong></strong><p></p></div></div><script>var eventDates = [1, 10, 12, 22],
$picker = $('#custom-cells'),
$content = $('#custom-cells-events'),
sentences = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
]
$picker.datepicker({
language: 'en',
onRenderCell: function (date, cellType) {
var currentDate = date.getDate();
if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
return {
html: currentDate + '<span class="dp-note"></span>'
}
}
},
onSelect: function onSelect(fd, date) {
var title = '', content = ''
if (date && eventDates.indexOf(date.getDate()) != -1) {
title = fd;
content = sentences[Math.floor(Math.random() * eventDates.length)];
}
$('strong', $content).html(title)
$('p', $content).html(content)
}
})
var currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))</script></div><pre class="example-code"><code class="js">var eventDates = [1, 10, 12, 22],
$picker = $('&#35;custom-cells'),
$content = $('&#35;custom-cells-events'),
sentences = [ … ];
$picker.datepicker({
language: 'en',
onRenderCell: function (date, cellType) {
var currentDate = date.getDate();
// Add extra element, if `eventDates` contains `currentDate`
if (cellType == 'day' &amp;&amp; eventDates.indexOf(currentDate) != -1) {
return {
html: currentDate + '&lt;span class=&quot;dp-note&quot;&gt;&lt;/span&gt;'
}
}
},
onSelect: function onSelect(fd, date) {
var title = '', content = ''
// If date with event is selected, show it
if (date &amp;&amp; eventDates.indexOf(date.getDate()) != -1) {
title = fd;
content = sentences[Math.floor(Math.random() * eventDates.length)];
}
$('strong', $content).html(title)
$('p', $content).html(content)
}
})
// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
</code></pre></div><h3 id="example-show-hide">Showing and hiding calendar</h3><p>For adding some actions while datepicker is showing or hiding, use<span class="example-inline"><code>onShow</code></span>and<span class="example-inline"><code>onHide</code></span>callbacks.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div class="row"><div class="col"><input id="example-show-hide-callbacks" type="text"></div><div class="col"><div id="example-show-hide-log" class="logger"></div></div></div><script>;(function () {
var log = logger('#example-show-hide-log', 'Clear')
$('#example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
})();</script></div><pre class="example-code"><code>$('&#35;example-show-hide-callbacks').datepicker({
language: 'en',
onShow: function(dp, animationCompleted){
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function(dp, animationCompleted){
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})</code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
</code></pre></div><h3 id="timeformat-actions">Actions with time</h3><p>For setting max/min hours or minutes values use<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. You also could set time in<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.</p><p>Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Create start date
var start = new Date(),
prevDay,
startHours = 9;
// 09:00 AM
start.setHours(9);
start.setMinutes(0);
// If today is Saturday or Sunday set 10:00 AM
if ([6, 0].indexOf(start.getDay()) != -1) {
start.setHours(10);
startHours = 10
}
$('#timepicker-actions-exmpl').datepicker({
timepicker: true,
language: 'en',
startDate: start,
minHours: startHours,
maxHours: 18,
onSelect: function (fd, d, picker) {
// Do nothing if selection was cleared
if (!d) return;
var day = d.getDay();
// Trigger only if date is changed
if (prevDay != undefined && prevDay == day) return;
prevDay = day;
console.log('updat')
// If chosen day is Saturday or Sunday when set
// hour value for weekends, else restore defaults
if (day == 6 || day == 0) {
picker.update({
minHours: 10,
maxHours: 16
})
} else {
picker.update({
minHours: 9,
maxHours: 18
})
}
}
})</script></div><pre class="example-code"><code>&lt;input type='text' id='timepicker-actions-exmpl' /&gt;
&lt;script&gt;
// Create start date
var start = new Date(),
prevDay,
startHours = 9;
// 09:00 AM
start.setHours(9);
start.setMinutes(0);
// If today is Saturday or Sunday set 10:00 AM
if ([6, 0].indexOf(start.getDay()) != -1) {
start.setHours(10);
startHours = 10
}
$('&#35;timepicker-actions-exmpl').datepicker({
timepicker: true,
language: 'en',
startDate: start,
minHours: startHours,
maxHours: 18,
onSelect: function (fd, d, picker) {
// Do nothing if selection was cleared
if (!d) return;
var day = d.getDay();
// Trigger only if date is changed
if (prevDay != undefined &amp;&amp; prevDay == day) return;
prevDay = day;
// If chosen day is Saturday or Sunday when set
// hour value for weekends, else restore defaults
if (day == 6 || day == 0) {
picker.update({
minHours: 10,
maxHours: 16
})
} else {
picker.update({
minHours: 9,
maxHours: 18
})
}
}
})
&lt;/script&gt;
</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">$.fn.datepicker.language[&quot;my-lang&quot;]</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
$.fn.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">$.fn.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/yyyy',
timeFormat: 'hh:ii aa'
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>classes</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">&quot;&quot;</code></span></p></header><p>Extra css classes for datepicker.</p></div><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">&quot;ru&quot;</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>This date will 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">&quot;&quot;</code></span></p></header><p>Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 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 will be considered as weekends. 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">&quot;&quot;</code></span></p></header><p>Desirable date format. It's combination of d, m, yyyy, D, M, etc. 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>@</strong></span>- time in milliseconds</li><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>altField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string|jQuery</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Alternative text input. Use<span class="example-inline"><code>altFieldDateFormat</code></span>for date formatting.</p></div><div class="param"><header class="param-header"><h3>altFieldDateFormat</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">&quot;@&quot;</code></span></p></header><p>Date format for alternative field.</p></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>keyboardNav</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 navigate through calendar by keyboard.</p><p>Hot keys:</p><ul><li><span class="param-inline"><strong>Ctrl + &rarr; | &uarr;</strong></span>- move one month forwards</li><li><span class="param-inline"><strong>Ctrl + &larr; | &darr;</strong></span>- move one month backwards</li><li><span class="param-inline"><strong>Shift + &rarr; | &uarr;</strong></span>- move one year forwards</li><li><span class="param-inline"><strong>Shift + &larr; | &darr;</strong></span>- move one year backwards</li><li><span class="param-inline"><strong>Alt + &rarr; | &uarr;</strong></span>- mov
For example<span class="example-inline"><code class="js">{position: &quot;right top&quot;}</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">&quot;days&quot;</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">&quot;days&quot;</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">&quot;&quot;</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">&quot;&quot;</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
$('.datepicker').datepicker({
todayButton: new Date()
})</code></pre></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">&quot;focus&quot;</code></span></p></header><p>Event type, on which datepicker should 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, then 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">&lt;svg&gt;&lt;path d=&quot;M 17,12 l -5,5 l 5,5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;</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">&lt;svg&gt;&lt;path d=&quot;M 14,12 l 5,5 l -5,5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;</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, &lt;i&gt;yyyy&lt;/i&gt;',
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">$('&#35;my-datepicker').datepicker({
navTitles: {
days: '&lt;h3&gt;Check in date:&lt;/h3&gt; 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">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</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<span class="example-inline"><code>true</code></span>, when timepicker widget will be added.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</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">&quot; &quot;</code></span></p></header><p>Separator between date and time</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</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">null</code></span></p></header><p>Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
For using 12 hours mode, add "aa" or "AA" to your<span class="example-inline"><code class="js">timeFormat</code></span>parameter, e.g.<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Possible values are:</p><ul><li><span class="param-inline"><strong>h</strong></span>- hours</li><li><span class="param-inline"><strong>hh</strong></span>- hours with leading zero</li><li><span class="param-inline"><strong>i</strong></span>- minutes</li><li><span class="param-inline"><strong>ii</strong></span>- minutes with leading zero</li><li><span class="param-inline"><strong>aa</strong></span>- day period - 'am' or 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- day period capitalized</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</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">0</code></span></p></header><p>Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</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">23</code></span></p></header><p>Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</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">0</code></span></p></header><p>Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</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">59</code></span></p></header><p>Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</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">1</code></span></p></header><p>Hours step in slider.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</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">1</code></span></p></header><p>Minutes step in slider.</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"><str
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>onShow(inst, animationCompleted)</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 calendar is showing.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator.
if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</li></ul></div><div class="param"><header class="param-header"><h3>onHide(inst, animationCompleted)</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 calendar is hiding.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator.
if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</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, then 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>destroy()</h3></header><p>Destroys 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|Array</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span>, or array of dates.</li></ul><p>Activates passed date or multiple dates if array is passed. 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 in 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><div class="param"><header class="param-header"><h3>$el</h3></header><p>Datepicker's DOM element</p></div><div class="param"><header class="param-header"><h3>selectedDates</h3></header><p>Array of selected dates</p></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><script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script></body></html>
Reference in New Issue Copy Permalink