jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

modified English docs

Browse Source
This commit is contained in:
t1m0n 2016-08-28 15:59:22 +03:00
parent ee143e5dc4
commit 354896e97b
5 changed files with 1232 additions and 1093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index-ru.html
View File

@ -1,5 +1,5 @@
<!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.html" class="lang-link"><img src="img/en.png"><span>In English</span></a><h1 class="promo-header">AIR DATEPICKER<span>легкий кроссбраузерный jQuery календарь</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo'); <!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.html" class="lang-link"><img src="img/en.png"><span>In English</span></a><h1 class="promo-header">AIR DATEPICKER<span>легкий кроссбраузерный jQuery календарь</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
</script></p><article><h2 id="intro">Описание</h2><p>Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием<span class="example-inline"><code>es5</code></span>и<span class="example-inline"><code class="js">css flexbox</code></span>. Работает во всех современных браузерах: </script></p><article><h2 id="intro">Описание</h2><p>Легкий (<i><strong>~36kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием<span class="example-inline"><code>es5</code></span>и<span class="example-inline"><code class="js">css flexbox</code></span>. Работает во всех современных браузерах:
<strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Установка</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Либо можно скачать файлы напрямую с <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Использование</h2><p>Подключите стили и скрипты из папки<span class="example-inline"><code>/dist</code></span>:</p><pre class="example-code"><code class="html">&lt;html&gt; <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Установка</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Либо можно скачать файлы напрямую с <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Использование</h2><p>Подключите стили и скрипты из папки<span class="example-inline"><code>/dist</code></span>:</p><pre class="example-code"><code class="html">&lt;html&gt;
&lt;head&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;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;

50
docs/index.html
View File

@ -1,7 +1,7 @@
<!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'); <!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({ $promo.datepicker({
language: 'en' language: 'en'
})</script></p><article><h2 id="intro">Description</h2><p>Light (<i><strong>~34kb</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: })</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; <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;head&gt;
&lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
@ -30,7 +30,7 @@ $('#my-element').data('datepicker')</code></pre></article><article><h2 id="examp
language: 'en', language: 'en',
minDate: new Date() // Now can select only dates, which goes after today 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><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; </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-range=&quot;true&quot;
data-multiple-dates-separator=&quot; - &quot; data-multiple-dates-separator=&quot; - &quot;
data-language=&quot;en&quot; data-language=&quot;en&quot;
@ -128,7 +128,42 @@ $picker.datepicker({
// Select initial date from `eventDates` // Select initial date from `eventDates`
var currentDate = currentDate = new Date(); var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10)) $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
</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="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 </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(), var start = new Date(),
prevDay, prevDay,
@ -262,7 +297,9 @@ $('.datepicker').datepicker({
} }
})</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. })</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"><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 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"><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">{ 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 html: '', // Custom cell content
classes: '', // Extra css classes to cell classes: '', // Extra css classes to cell
disabled: '' // true/false, if true, then cell will be disabled disabled: '' // true/false, if true, then cell will be disabled
@ -278,7 +315,7 @@ if<span class="example-inline"><code class="js">{multipleDates: true}</code></sp
} }
} }
})</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'); })</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|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. 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'); 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 // Single parameter update
datepicker.update('minDate', new Date()) datepicker.update('minDate', new Date())
@ -287,7 +324,8 @@ datepicker.update({
position: "top right", position: "top right",
maxDate: new Date(), maxDate: new Date(),
todayButton: true 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></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) { $code.each(function (i, el) {
hljs.highlightBlock(el); hljs.highlightBlock(el);
}) })

2
docs/jade/pages/index-ru.jade
View File

@ -17,7 +17,7 @@ block content
article article
h2#intro Описание h2#intro Описание
p p
| Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием | Легкий (<i><strong>~36kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
+example-inline('es5') +example-inline('es5')
| и | и
+example-inline('css flexbox', 'js') +example-inline('css flexbox', 'js')

109
docs/jade/pages/index.jade
View File

@ -17,7 +17,7 @@ block content
article article
h2#intro Description h2#intro Description
p p
| Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with | Light (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with
+example-inline('es5') +example-inline('es5')
| and | and
+example-inline('css flexbox', 'js') +example-inline('css flexbox', 'js')
@ -138,6 +138,10 @@ block content
| for choosing range of dates. As dates separator | for choosing range of dates. As dates separator
+example-inline('multipleDatesSeparator') +example-inline('multipleDatesSeparator')
| will be used. | will be used.
p For possibility to select same date two times, you should set
+example-inline('{toggleSelected: false}')
| .
+example +example
+example-content +example-content
input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here
@ -270,6 +274,60 @@ block content
var currentDate = currentDate = new Date(); var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10)) $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
h3#example-show-hide Showing and hiding calendar
p For adding some actions while datepicker is showing or hiding, use
+example-inline('onShow')
| and
+example-inline('onHide')
| callbacks.
+example
+example-content
.row
.col
input#example-show-hide-callbacks(type='text')
.col
div.logger#example-show-hide-log
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')
}
}
})
})();
+example-code
:code
$('#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')
}
}
})
article article
h2#timepicker Timepicker h2#timepicker Timepicker
p To enable timepicker use option p To enable timepicker use option
@ -298,7 +356,7 @@ block content
+example-inline('AA', 'js') +example-inline('AA', 'js')
| symbol in | symbol in
+example-inline('timeFormat', 'js') +example-inline('timeFormat', 'js')
|. After what 'AM' and 'PM' sings will appear in timepicker widget. | . After what 'AM' and 'PM' sings will appear in timepicker widget.
p Lets use 12 hours mode in Russian language: p Lets use 12 hours mode in Russian language:
@ -322,7 +380,7 @@ block content
+example-inline('minDate','js') +example-inline('minDate','js')
| and | and
+example-inline('maxDate','js') +example-inline('maxDate','js')
|. 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. | . 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 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 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.
+example +example
@ -783,6 +841,38 @@ block content
li li
+param('inst','object') +param('inst','object')
| - plugin instance. | - plugin instance.
.param
+param-header('onShow(inst, animationCompleted)', 'function', 'null')
p Callback when calendar is showing.
ul
li
+param('inst', 'Object')
| - plugin instance.
li
+param('animationCompleted','boolean')
| - animation indicator.
| if its
+example-inline('false')
| , when animation has just begun, if
+example-inline('true')
| - already ended.
.param
+param-header('onHide(inst, animationCompleted)', 'function', 'null')
p Callback when calendar is hiding.
ul
li
+param('inst', 'Object')
| - plugin instance.
li
+param('animationCompleted','boolean')
| - animation indicator.
| if its
+example-inline('false')
| , when animation has just begun, if
+example-inline('true')
| - already ended.
.param .param
+param-header('onChangeMonth(month, year)','function','null') +param-header('onChangeMonth(month, year)','function','null')
p Callback when months are changed. p Callback when months are changed.
@ -860,6 +950,9 @@ block content
.param .param
+param-header('hide()') +param-header('hide()')
p Hides datepicker. p Hides datepicker.
.param
+param-header('destroy()')
p Destroys datepicker.
.param .param
+param-header('next()') +param-header('next()')
p Renders next month, year or decade, depending on current view. p Renders next month, year or decade, depending on current view.
@ -873,7 +966,7 @@ block content
+param('date','Date|Array') +param('date','Date|Array')
| - JavaScript | - JavaScript
+example-inline('Date()', 'js') +example-inline('Date()', 'js')
|, or array of dates. | , or array of dates.
p p
| Activates passed date or multiple dates if array is passed. If | Activates passed date or multiple dates if array is passed. If
+example-inline('{multipleDates: false}','js') +example-inline('{multipleDates: false}','js')
@ -928,3 +1021,11 @@ block content
+example-inline('Date()') +example-inline('Date()')
+example-code('js'). +example-code('js').
datepicker.date = new Date(); datepicker.date = new Date();
.param
+param-header('$el')
p Datepicker's DOM element
.param
+param-header('selectedDates')
p Array of selected dates

2
docs/js/logger.js
View File

@ -11,7 +11,7 @@ var logger;
return function(text) { return function(text) {
var count = $('p', $el).length, var count = $('p', $el).length,
$content = $('.logger--content', $el); $content = $('.logger--content', $el);
$content.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000) $content.append('<p><span>' + ++count + '.</span> ' + text + '</p>').scrollTop(100000)
} }
}; };