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({
|
$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 Для выбора времени используйте опцию
|
||||||
@ -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