mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-07-02 18:51:29 +08:00
modified Russian docs
This commit is contained in:
t1m0n
parent
701df87dbe
commit
ee143e5dc4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
|||||||
<!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&subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><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&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>~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:
|
||||||
|
|||||||
@ -20,6 +20,7 @@ html
|
|||||||
script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
|
script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
|
||||||
script(src='../dist/js/datepicker.js')
|
script(src='../dist/js/datepicker.js')
|
||||||
script(src='../dist/js/i18n/datepicker.en.js')
|
script(src='../dist/js/i18n/datepicker.en.js')
|
||||||
|
script(src='js/logger.js')
|
||||||
body
|
body
|
||||||
div.wrapper
|
div.wrapper
|
||||||
main.main(role='main')
|
main.main(role='main')
|
||||||
|
|||||||
@ -142,6 +142,10 @@ block content
|
|||||||
| для выбора диапазона. В качестве разделителя дат будет использован
|
| для выбора диапазона. В качестве разделителя дат будет использован
|
||||||
+example-inline('multipleDatesSeparator')
|
+example-inline('multipleDatesSeparator')
|
||||||
|
|
||||||
|
p Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить
|
||||||
|
+example-inline('{toggleSelected: false}')
|
||||||
|
|.
|
||||||
|
|
||||||
|
|
||||||
+example
|
+example
|
||||||
+example-content
|
+example-content
|
||||||
@ -277,6 +281,59 @@ 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 Появление и скрытие календаря
|
||||||
|
p Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции
|
||||||
|
+example-inline('onShow')
|
||||||
|
| и
|
||||||
|
+example-inline('onHide')
|
||||||
|
|
||||||
|
+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', 'Очистить')
|
||||||
|
$('#example-show-hide-callbacks').datepicker({
|
||||||
|
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({
|
||||||
|
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 Выбор времени
|
h2#timepicker Выбор времени
|
||||||
p Для выбора времени используйте опцию
|
p Для выбора времени используйте опцию
|
||||||
@ -284,7 +341,7 @@ block content
|
|||||||
| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
|
| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
|
||||||
p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
|
p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
|
||||||
+example-inline('startDate', 'js')
|
+example-inline('startDate', 'js')
|
||||||
|.
|
| .
|
||||||
|
|
||||||
+example
|
+example
|
||||||
+example-content
|
+example-content
|
||||||
@ -299,7 +356,7 @@ block content
|
|||||||
h3#timepicker-format Формат времени
|
h3#timepicker-format Формат времени
|
||||||
p Формат времени задается в объекте локализации, либо в парамтре
|
p Формат времени задается в объекте локализации, либо в парамтре
|
||||||
+example-inline('timeFormat', 'js')
|
+example-inline('timeFormat', 'js')
|
||||||
|. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
| . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
||||||
+example-inline('timeFormat', 'js')
|
+example-inline('timeFormat', 'js')
|
||||||
| нужно добавить символ
|
| нужно добавить символ
|
||||||
+example-inline('aa', 'js')
|
+example-inline('aa', 'js')
|
||||||
@ -317,13 +374,13 @@ block content
|
|||||||
h3#timeformat-actions Действия со временем
|
h3#timeformat-actions Действия со временем
|
||||||
p Для задания максимально/минимально возможных значений часов или минут используйте параметры
|
p Для задания максимально/минимально возможных значений часов или минут используйте параметры
|
||||||
+example-inline('maxHours','js')
|
+example-inline('maxHours','js')
|
||||||
|,
|
| ,
|
||||||
+example-inline('minHours','js')
|
+example-inline('minHours','js')
|
||||||
|,
|
| ,
|
||||||
+example-inline('maxMinutes','js')
|
+example-inline('maxMinutes','js')
|
||||||
|,
|
| ,
|
||||||
+example-inline('minMinutes','js')
|
+example-inline('minMinutes','js')
|
||||||
|. Также время можно указывать в парамтерах
|
| . Также время можно указывать в парамтерах
|
||||||
+example-inline('minDate','js')
|
+example-inline('minDate','js')
|
||||||
| и
|
| и
|
||||||
+example-inline('maxDate','js')
|
+example-inline('maxDate','js')
|
||||||
@ -343,7 +400,7 @@ block content
|
|||||||
start.setMinutes(0);
|
start.setMinutes(0);
|
||||||
|
|
||||||
// Если сегодня суббота или воскресенье - 10:00
|
// Если сегодня суббота или воскресенье - 10:00
|
||||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
if ([6, 0].indexOf(start.getDay()) != -1) {
|
||||||
start.setHours(10);
|
start.setHours(10);
|
||||||
startHours = 10
|
startHours = 10
|
||||||
}
|
}
|
||||||
@ -353,7 +410,7 @@ block content
|
|||||||
startDate: start,
|
startDate: start,
|
||||||
minHours: startHours,
|
minHours: startHours,
|
||||||
maxHours: 18,
|
maxHours: 18,
|
||||||
onSelect: function(fd, d, picker) {
|
onSelect: function (fd, d, picker) {
|
||||||
// Ничего не делаем если выделение было снято
|
// Ничего не делаем если выделение было снято
|
||||||
if (!d) return;
|
if (!d) return;
|
||||||
|
|
||||||
@ -749,7 +806,7 @@ block content
|
|||||||
p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
|
p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
|
||||||
| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
|
| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
|
||||||
+example-inline('timeFormat','js')
|
+example-inline('timeFormat','js')
|
||||||
|, например
|
| , например
|
||||||
+example-inline('{timeFormat: "hh:ii AA"}','js')
|
+example-inline('{timeFormat: "hh:ii AA"}','js')
|
||||||
| Возможные варианты:
|
| Возможные варианты:
|
||||||
ul
|
ul
|
||||||
@ -817,6 +874,38 @@ block content
|
|||||||
+param('inst','object')
|
+param('inst','object')
|
||||||
| - экземпляр плагина.
|
| - экземпляр плагина.
|
||||||
|
|
||||||
|
.param
|
||||||
|
+param-header('onShow(inst, animationCompleted)', 'function', 'null')
|
||||||
|
p Функция обратного вызова при появлении календаря.
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
+param('inst', 'Object')
|
||||||
|
| - экземпляр календаря.
|
||||||
|
li
|
||||||
|
+param('animationCompleted','boolean')
|
||||||
|
| - индикатор состояния анимации.
|
||||||
|
| если
|
||||||
|
+example-inline('false')
|
||||||
|
| , то анимация только началась, если
|
||||||
|
+example-inline('true')
|
||||||
|
| - уже закончилась.
|
||||||
|
|
||||||
|
.param
|
||||||
|
+param-header('onHide(inst, animationCompleted)', 'function', 'null')
|
||||||
|
p Функция обратного вызова при скрытии календаря.
|
||||||
|
ul
|
||||||
|
li
|
||||||
|
+param('inst', 'Object')
|
||||||
|
| - экземпляр календаря.
|
||||||
|
li
|
||||||
|
+param('animationCompleted','boolean')
|
||||||
|
| - индикатор состояния анимации.
|
||||||
|
| если
|
||||||
|
+example-inline('false')
|
||||||
|
| , то анимация только началась, если
|
||||||
|
+example-inline('true')
|
||||||
|
| - уже закончилась.
|
||||||
|
|
||||||
.param
|
.param
|
||||||
+param-header('onChangeMonth(month, year)','function','null')
|
+param-header('onChangeMonth(month, year)','function','null')
|
||||||
p Функция обратного вызова при изменении месяца.
|
p Функция обратного вызова при изменении месяца.
|
||||||
@ -903,6 +992,10 @@ block content
|
|||||||
+param-header('hide()')
|
+param-header('hide()')
|
||||||
p Скрывает календарь.
|
p Скрывает календарь.
|
||||||
|
|
||||||
|
.param
|
||||||
|
+param-header('destroy()')
|
||||||
|
p Удаляет календарь.
|
||||||
|
|
||||||
.param
|
.param
|
||||||
+param-header('next()')
|
+param-header('next()')
|
||||||
p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
|
p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
|
||||||
@ -978,3 +1071,11 @@ block content
|
|||||||
|
|
||||||
+example-code('js').
|
+example-code('js').
|
||||||
datepicker.date = new Date();
|
datepicker.date = new Date();
|
||||||
|
|
||||||
|
.param
|
||||||
|
+param-header('$el')
|
||||||
|
p DOM элемент календаря
|
||||||
|
|
||||||
|
.param
|
||||||
|
+param-header('selectedDates')
|
||||||
|
p Массив выбранных дат
|
||||||
29
docs/js/logger.js
Normal file
29
docs/js/logger.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
var logger;
|
||||||
|
(function (window) {
|
||||||
|
logger = function (el, clearText) {
|
||||||
|
var $el = $(el);
|
||||||
|
|
||||||
|
addContent($el);
|
||||||
|
addClearButton(clearText, $el);
|
||||||
|
|
||||||
|
$('.logger--clear', $el).on('click', clear.bind('', $el));
|
||||||
|
|
||||||
|
return function(text) {
|
||||||
|
var count = $('p', $el).length,
|
||||||
|
$content = $('.logger--content', $el);
|
||||||
|
$content.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function addClearButton (text, el) {
|
||||||
|
el.append('<span class="logger--clear">' + text + '</span>')
|
||||||
|
}
|
||||||
|
|
||||||
|
function addContent (el) {
|
||||||
|
el.html('<div class="logger--content"></div>')
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear (el) {
|
||||||
|
$('.logger--content', el).html('');
|
||||||
|
}
|
||||||
|
})(window);
|
||||||
@ -42,6 +42,13 @@ h4 {
|
|||||||
margin: 24px 0 0;
|
margin: 24px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
h2, h3 {
|
h2, h3 {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -507,3 +514,56 @@ a {
|
|||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Logger
|
||||||
|
// -------------------------------------------------
|
||||||
|
|
||||||
|
.logger {
|
||||||
|
background: rgba(0, 0, 0, .7);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: Monospace, monospace;
|
||||||
|
height: 150px;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logger--content {
|
||||||
|
padding: 4px 8px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
color: greenyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logger--clear {
|
||||||
|
color: #333;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-family: 'Tahoma', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, .5);
|
||||||
|
right: 24px;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, .8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(255, 255, 255, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user