mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
update docs
This commit is contained in:
t1m0n
parent
41b87ec068
commit
2f6d44ed52
6
dist/js/i18n/datepicker.en.js
vendored
6
dist/js/i18n/datepicker.en.js
vendored
@ -1,5 +1,4 @@
|
||||
;(function ($) {
|
||||
$.fn.datepicker.language['en'] = {
|
||||
;(function ($) { $.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'],
|
||||
@ -10,5 +9,4 @@
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 0
|
||||
};
|
||||
})(jQuery);
|
||||
}; })(jQuery);
|
||||
@ -128,6 +128,7 @@ $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), curren
|
||||
</code></pre></div></article><article><h2 id="timepicker">Выбор времени</h2><p>Для выбора времени используйте опцию<span class="example-inline"><code class="js">{timepicker: true}</code></span>- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.</p><p>По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром<span class="example-inline"><code class="js">startDate</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div data-timepicker="true" class="datepicker-here"></div></div><pre class="example-code"><code><div class="datepicker-here" data-timepicker="true"></div></code></pre></div><p><i>Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker' class='nav-link'>Опциях</a>.</i></p><h3 id="timepicker-format">Формат времени</h3><p>Формат времени задается в объекте локализации, либо в парамтре<span class="example-inline"><code class="js">timeFormat</code></span>. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в<span class="example-inline"><code class="js">timeFormat</code></span>нужно добавить символ<span class="example-inline"><code class="js">aa</code></span>или<span class="example-inline"><code class="js">AA</code></span>. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.</p><div class="example"><div class="example--label">Пример</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><div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
||||
</code></pre></div><h3 id="timeformat-actions">Действия со временем</h3><p>Для задания максимально/минимально возможных значений часов или минут используйте параметры<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>. Также время можно указывать в парамтерах<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span></p><p>Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
@ -150,6 +151,11 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Trigger only if date is changed
|
||||
if (prevDay != undefined && prevDay == day) return;
|
||||
prevDay = day;
|
||||
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
@ -168,6 +174,7 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
<script>
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
@ -190,6 +197,11 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Обновляем состояние календаря только если была изменена дата
|
||||
if (prevDay != undefined && prevDay == day) return;
|
||||
prevDay = day;
|
||||
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
@ -207,7 +219,7 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
})
|
||||
</script>
|
||||
|
||||
</code></pre></div></article><article><h2 id="localization">Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">Datepicker.language["my-lang"]</code></span>и при вызове календаря передать название языка в параметр<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">Datepicker.language['my-lang'] = {...}
|
||||
</code></pre></div></article><article><h2 id="localization">Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">$.fn.datepicker.language["my-lang"]</code></span>и при вызове календаря передать название языка в параметр<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$.fn.datepicker.language['my-lang'] = {...}
|
||||
|
||||
$('.my-datepicker').datepicker({
|
||||
language: 'my-lang'
|
||||
@ -218,7 +230,7 @@ $('.my-datepicker').datepicker({
|
||||
...
|
||||
}
|
||||
})
|
||||
</code></pre><p>Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).</p><h3>Пример объекта локализации</h3><pre class="example-code"><code class="js">Datepicker.language['ru'] = {
|
||||
</code></pre><p>Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).</p><h3>Пример объекта локализации</h3><pre class="example-code"><code class="js">$.fn.datepicker.language['ru'] = {
|
||||
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
|
||||
@ -131,6 +131,7 @@ $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), curren
|
||||
</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><div class="datepicker-here" data-timepicker="true" data-language='en'></div></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><div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
||||
</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
|
||||
@ -154,6 +155,10 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
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) {
|
||||
@ -172,6 +177,7 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
<script>
|
||||
// Create start date
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00 AM
|
||||
@ -195,6 +201,11 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Trigger only if date is changed
|
||||
if (prevDay != undefined && 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) {
|
||||
@ -211,8 +222,8 @@ $('#timepicker-actions-exmpl').datepicker({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</code></pre></div></article><article><h2 id="localization">Localization</h2><p>You can add your localization to object<span class="example-inline"><code class="js">Datepicker.language["my-lang"]</code></span>and pass it name to parameter<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">// Add custom localization
|
||||
Datepicker.language['my-lang'] = {...}
|
||||
</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["my-lang"]</code></span>and pass it name to parameter<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">// Add custom localization
|
||||
$.fn.datepicker.language['my-lang'] = {...}
|
||||
|
||||
// Initialize datepicker with it
|
||||
$('.my-datepicker').datepicker({
|
||||
@ -222,7 +233,7 @@ $('.my-datepicker').datepicker({
|
||||
days: [...]
|
||||
...
|
||||
}
|
||||
})</code></pre><p>If some fields are missing, they will be taken from default localization object ('Russian').</p><h3>Example of localization object</h3><pre class="example-code"><code class="js">Datepicker.language['en'] = {
|
||||
})</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'],
|
||||
|
||||
@ -335,6 +335,7 @@ block content
|
||||
script.
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
@ -357,6 +358,11 @@ block content
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Trigger only if date is changed
|
||||
if (prevDay != undefined && prevDay == day) return;
|
||||
prevDay = day;
|
||||
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
@ -378,6 +384,7 @@ block content
|
||||
<script>
|
||||
// Зададим стартовую дату
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00
|
||||
@ -400,6 +407,11 @@ block content
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Обновляем состояние календаря только если была изменена дата
|
||||
if (prevDay != undefined && prevDay == day) return;
|
||||
prevDay = day;
|
||||
|
||||
// Если выбранный день суббота или воскресенье, то устанавливаем
|
||||
// часы для выходных, в противном случае восстанавливаем начальные значения
|
||||
if (day == 6 || day == 0) {
|
||||
@ -422,12 +434,12 @@ block content
|
||||
h2#localization Локализация
|
||||
p
|
||||
| Вы можете добавить свою локализацию в объект
|
||||
+example-inline('Datepicker.language["my-lang"]', 'js')
|
||||
+example-inline('$.fn.datepicker.language["my-lang"]', 'js')
|
||||
| и при вызове календаря передать название языка в параметр
|
||||
+example-inline('language', 'js')
|
||||
|
||||
+example-code('js').
|
||||
Datepicker.language['my-lang'] = {...}
|
||||
$.fn.datepicker.language['my-lang'] = {...}
|
||||
|
||||
$('.my-datepicker').datepicker({
|
||||
language: 'my-lang'
|
||||
@ -449,7 +461,7 @@ block content
|
||||
|
||||
h3 Пример объекта локализации
|
||||
+example-code('js').
|
||||
Datepicker.language['ru'] = {
|
||||
$.fn.datepicker.language['ru'] = {
|
||||
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
|
||||
@ -331,6 +331,7 @@ block content
|
||||
script.
|
||||
// Create start date
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00 AM
|
||||
@ -354,6 +355,10 @@ block content
|
||||
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) {
|
||||
@ -375,6 +380,7 @@ block content
|
||||
<script>
|
||||
// Create start date
|
||||
var start = new Date(),
|
||||
prevDay,
|
||||
startHours = 9;
|
||||
|
||||
// 09:00 AM
|
||||
@ -398,6 +404,11 @@ block content
|
||||
if (!d) return;
|
||||
|
||||
var day = d.getDay();
|
||||
|
||||
// Trigger only if date is changed
|
||||
if (prevDay != undefined && 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) {
|
||||
@ -419,12 +430,12 @@ block content
|
||||
h2#localization Localization
|
||||
p
|
||||
| You can add your localization to object
|
||||
+example-inline('Datepicker.language["my-lang"]', 'js')
|
||||
+example-inline('$.fn.datepicker.language["my-lang"]', 'js')
|
||||
| and pass it name to parameter
|
||||
+example-inline('language', 'js')
|
||||
+example-code('js').
|
||||
// Add custom localization
|
||||
Datepicker.language['my-lang'] = {...}
|
||||
$.fn.datepicker.language['my-lang'] = {...}
|
||||
|
||||
// Initialize datepicker with it
|
||||
$('.my-datepicker').datepicker({
|
||||
@ -443,7 +454,7 @@ block content
|
||||
p If some fields are missing, they will be taken from default localization object ('Russian').
|
||||
h3 Example of localization object
|
||||
+example-code('js').
|
||||
Datepicker.language['en'] = {
|
||||
$.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'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user