mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +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({
|
||||
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:
|
||||
|
||||
@ -20,6 +20,7 @@ html
|
||||
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/i18n/datepicker.en.js')
|
||||
script(src='js/logger.js')
|
||||
body
|
||||
div.wrapper
|
||||
main.main(role='main')
|
||||
|
||||
@ -142,6 +142,10 @@ block content
|
||||
| для выбора диапазона. В качестве разделителя дат будет использован
|
||||
+example-inline('multipleDatesSeparator')
|
||||
|
||||
p Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить
|
||||
+example-inline('{toggleSelected: false}')
|
||||
|.
|
||||
|
||||
|
||||
+example
|
||||
+example-content
|
||||
@ -277,6 +281,59 @@ block content
|
||||
var currentDate = currentDate = new Date();
|
||||
$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
|
||||
h2#timepicker Выбор времени
|
||||
p Для выбора времени используйте опцию
|
||||
@ -284,7 +341,7 @@ block content
|
||||
| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
|
||||
p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
|
||||
+example-inline('startDate', 'js')
|
||||
|.
|
||||
| .
|
||||
|
||||
+example
|
||||
+example-content
|
||||
@ -299,7 +356,7 @@ block content
|
||||
h3#timepicker-format Формат времени
|
||||
p Формат времени задается в объекте локализации, либо в парамтре
|
||||
+example-inline('timeFormat', 'js')
|
||||
|. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
||||
| . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
|
||||
+example-inline('timeFormat', 'js')
|
||||
| нужно добавить символ
|
||||
+example-inline('aa', 'js')
|
||||
@ -317,13 +374,13 @@ block content
|
||||
h3#timeformat-actions Действия со временем
|
||||
p Для задания максимально/минимально возможных значений часов или минут используйте параметры
|
||||
+example-inline('maxHours','js')
|
||||
|,
|
||||
| ,
|
||||
+example-inline('minHours','js')
|
||||
|,
|
||||
| ,
|
||||
+example-inline('maxMinutes','js')
|
||||
|,
|
||||
| ,
|
||||
+example-inline('minMinutes','js')
|
||||
|. Также время можно указывать в парамтерах
|
||||
| . Также время можно указывать в парамтерах
|
||||
+example-inline('minDate','js')
|
||||
| и
|
||||
+example-inline('maxDate','js')
|
||||
@ -343,7 +400,7 @@ block content
|
||||
start.setMinutes(0);
|
||||
|
||||
// Если сегодня суббота или воскресенье - 10:00
|
||||
if ([6,0].indexOf(start.getDay()) != -1) {
|
||||
if ([6, 0].indexOf(start.getDay()) != -1) {
|
||||
start.setHours(10);
|
||||
startHours = 10
|
||||
}
|
||||
@ -353,7 +410,7 @@ block content
|
||||
startDate: start,
|
||||
minHours: startHours,
|
||||
maxHours: 18,
|
||||
onSelect: function(fd, d, picker) {
|
||||
onSelect: function (fd, d, picker) {
|
||||
// Ничего не делаем если выделение было снято
|
||||
if (!d) return;
|
||||
|
||||
@ -749,7 +806,7 @@ block content
|
||||
p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
|
||||
| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
|
||||
+example-inline('timeFormat','js')
|
||||
|, например
|
||||
| , например
|
||||
+example-inline('{timeFormat: "hh:ii AA"}','js')
|
||||
| Возможные варианты:
|
||||
ul
|
||||
@ -817,6 +874,38 @@ block content
|
||||
+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-header('onChangeMonth(month, year)','function','null')
|
||||
p Функция обратного вызова при изменении месяца.
|
||||
@ -903,6 +992,10 @@ block content
|
||||
+param-header('hide()')
|
||||
p Скрывает календарь.
|
||||
|
||||
.param
|
||||
+param-header('destroy()')
|
||||
p Удаляет календарь.
|
||||
|
||||
.param
|
||||
+param-header('next()')
|
||||
p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
|
||||
@ -978,3 +1071,11 @@ block content
|
||||
|
||||
+example-code('js').
|
||||
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;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
h2, h3 {
|
||||
position: relative;
|
||||
@ -507,3 +514,56 @@ a {
|
||||
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