mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add examples, begin options section, fix localization option
This commit is contained in:
t1m0n
parent
35c0c5474b
commit
ef33f4dfca
8
dist/js/datepicker.js
vendored
8
dist/js/datepicker.js
vendored
@ -145,10 +145,12 @@ var Datepicker;
|
||||
this.loc = Datepicker.language[lang];
|
||||
if (!this.loc) {
|
||||
console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
|
||||
this.loc = Datepicker.language.ru
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru)
|
||||
}
|
||||
|
||||
this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
|
||||
} else {
|
||||
this.loc = $.extend({}, Datepicker.language.ru, lang)
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
|
||||
}
|
||||
|
||||
if (this.opts.dateFormat) {
|
||||
@ -418,7 +420,7 @@ var Datepicker;
|
||||
return _this.formatDate(format, date)
|
||||
});
|
||||
|
||||
value.join(this.opts.multipleDatesSeparator);
|
||||
value = value.join(this.opts.multipleDatesSeparator);
|
||||
|
||||
this.$el.val(value)
|
||||
},
|
||||
|
||||
2
dist/js/datepicker.min.js
vendored
2
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -3,7 +3,80 @@ $('#my-element').datepicker([options])
|
||||
|
||||
// Доступ к экземпляру объекта
|
||||
$('#my-element').data('datepicker')
|
||||
</code></pre><h2>Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type='text' class='datepicker-here' /></code></pre></div></div></main></div><script>var $code = $('code');
|
||||
</code></pre><h2>Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type='text' class='datepicker-here' />
|
||||
</code></pre></div><h3>Выбор нескольких дат</h3><p>Передайте параметр<span class="example-inline"><code class="js">{multipleDates: true}</code></span>для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||||
class="datepicker-here"
|
||||
data-multiple-dates="3"
|
||||
data-multiple-dates-separator=", " />
|
||||
</code></pre></div><h3>Постоянно видимый календарь</h3><p>Проинициализируйте плагин на элементе, который не является текстовым полем, например на<span class="example-inline"><code class="html"><div> … </div></code></span>, либо передайте параметр<span class="example-inline"><code class="js">{inline: true}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="datepicker-here"></div></div><pre class="example-code"><code class="html"><div class="datepicker-here"></div>
|
||||
</code></pre></div><h3>Выбор месяца</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-min-view="months" data-view="months" data-date-format="MM yyyy" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||||
class="datepicker-here"
|
||||
data-min-view="months"
|
||||
data-view="months"
|
||||
data-date-format="MM yyyy" />
|
||||
</code></pre></div><h3>Минимальная и максимальные даты</h3><p>Чтобы ограничить выбор даты, используйте<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span>, которым нужно передать объект даты.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input id="minMaxExample" type="text"><script>$('#minMaxExample').datepicker({
|
||||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||||
})</script></div><pre class="example-code"><code class="js">$('#minMaxExample').datepicker({
|
||||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||||
})
|
||||
</code></pre></div><h3>Диапозон дат</h3><p>По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
|
||||
Тем не менее это можно сделть вручную.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="range-example"><input type="text" placeholder="Начало" id="start"><span>–</span><input type="text" placeholder="Конец" id="end"></div><script>var $start = $('#start'),
|
||||
$end = $('#end');
|
||||
|
||||
$start.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
$end.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
</script></div><pre class="example-code"><code class="js">var $start = $('#start'),
|
||||
$end = $('#end');
|
||||
|
||||
$start.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
$end.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
</code></pre></div><article><h2>Локализация</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'] = {...}
|
||||
|
||||
$('.my-datepicker').datepicker({
|
||||
language: 'my-lang'
|
||||
})
|
||||
</code></pre><p>Также объект локализации можно передавать непосредственно в<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$('.my-datepicker').datepicker({
|
||||
language: {
|
||||
days: [...]
|
||||
...
|
||||
}
|
||||
})
|
||||
</code></pre><p>Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.</p><h3>Пример объекта локализации</h3><pre class="example-code"><code class="js">Datepicker.language['ru'] = {
|
||||
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
|
||||
monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
firstDay: 1
|
||||
};
|
||||
</code></pre><article><h2>Опции</h2><div class="param"><header class="param-header"><h3>inline</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то календарь будет виден постоянно.</p></div><div class="param"><header class="param-header"><h3>language</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string|object</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"ru"</code></span></p></header><p>Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте<span class="example-inline"><code class="js">Datepicker.language</code></span>Если передан объект, то данные будут браться из него.</p><p>Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.</p></div><div class="param"><header class="param-header"><h3>startDate</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">new Date()</code></span></p></header><p>Какую дату нужно показывать при инициализации календаря.</p></div><div class="param"><header class="param-header"><h3>firstDay</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
|
||||
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
|
||||
</p></div><div class="param"><header class="param-header"><h3>weekends</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">array</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">[6, 0]</code></span></p></header><p>Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс<span class="example-inline"><code class="css">.-weekend-</code></span>. По умолчанию это суббота и воскресенье.</p></div><div class="param"><header class="param-header"><h3>dateFormat</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.</p><ul><li><span class="param"><strong>d</strong></span>- дата</li><li><span class="param"><strong>dd</strong></span>- дата с лидирующем нулем</li><li><span class="param"><strong>D</strong></span>- сокращенное наименование дня</li><li><span class="param"><strong>DD</strong></span>- полное наименование дня</li><li><span class="param"><strong>m</strong></span>- номер мясяца</li><li><span class="param"><strong>mm</strong></span>- номер месяца с лидирующем нулем</li><li><span class="param"><strong>M</strong></span>- сокращенное наименовение месяца</li><li><span class="param"><strong>MM</strong></span>- полное наименовение месяца</li><li><span class="param"><strong>yy</strong></span>- сокращенный номер года</li><li><span class="param"><strong>yyyy</strong></span>- полный номер года</li><li><span class="param"><strong>yyyy1</strong></span>- первый год декады, в которую входит текущий год</li><li><span class="param"><strong>yyyy2</strong></span>- последний год декады, в которую входит текущий год</li></ul></div><div class="param"><header class="param-header"><h3>toggleSelected</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то клик на выделенной дате снимет выделение.</p></div></article></article></div></main></div><script>var $code = $('code');
|
||||
$code.each(function (i, el) {
|
||||
hljs.highlightBlock(el);
|
||||
})</script></body></html>
|
||||
@ -9,6 +9,7 @@
|
||||
"gulp-jade": "^1.1.0",
|
||||
"gulp-livereload": "^3.8.0",
|
||||
"gulp-minify-css": "^1.2.1",
|
||||
"gulp-plumber": "^1.0.1",
|
||||
"gulp-postcss": "^6.0.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.0.4",
|
||||
|
||||
@ -1 +1 @@
|
||||
.-text-center-,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;font-family:Tahoma,sans-serif;transition:all .2s}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{font-family:Consolas,monospace;line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.example-code code{padding:16px 32px}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.promo-input{height:40px;margin:26px 0;width:300px}
|
||||
.-text-center-,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{font-family:Consolas,monospace;line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param i,.param strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.promo-input{height:40px;margin:26px 0;width:300px}.range-example input[type=text]{width:150px}.range-example span{display:inline-block;margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;display:inline-block;vertical-align:middle}
|
||||
@ -3,6 +3,7 @@ include mixins/example-content
|
||||
include mixins/example-code
|
||||
include mixins/example-inline
|
||||
include mixins/param
|
||||
include mixins/param-header
|
||||
|
||||
doctype html
|
||||
html
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
mixin example-inline(content, type)
|
||||
span.example-inline
|
||||
code(class= type).
|
||||
!{content}
|
||||
#{content}
|
||||
12
page/jade/mixins/param-header.jade
Normal file
12
page/jade/mixins/param-header.jade
Normal file
@ -0,0 +1,12 @@
|
||||
mixin param-header(name, type, defaults)
|
||||
header.param-header
|
||||
h3= name
|
||||
p.param-header--row
|
||||
span.param-header--label Тип:
|
||||
+example-inline(type, 'js')
|
||||
p.param-header--row
|
||||
span.param-header--label Значение по умполчанию:
|
||||
if defaults
|
||||
+example-inline(defaults, 'js')
|
||||
if block
|
||||
block
|
||||
@ -14,9 +14,9 @@ block content
|
||||
|
||||
h2 Использование
|
||||
p
|
||||
|Календарь автоматически проинициализируется на элементах с классом
|
||||
| Календарь автоматически проинициализируется на элементах с классом
|
||||
+example-inline('.datepicker-here', 'css')
|
||||
|, при этом опции можно передать через
|
||||
| , при этом опции можно передать через
|
||||
+example-inline('data', 'html')
|
||||
| атрибуты.
|
||||
+example-code('html')
|
||||
@ -38,3 +38,233 @@ block content
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type='text' class='datepicker-here' />
|
||||
|
||||
h3 Выбор нескольких дат
|
||||
p
|
||||
| Передайте параметр
|
||||
+example-inline('{multipleDates: true}','js')
|
||||
| для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число
|
||||
+example-inline('{multipleDates: 3}','js')
|
||||
| .
|
||||
+example
|
||||
+example-content
|
||||
input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ').datepicker-here
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type="text"
|
||||
class="datepicker-here"
|
||||
data-multiple-dates="3"
|
||||
data-multiple-dates-separator=", " />
|
||||
|
||||
h3 Постоянно видимый календарь
|
||||
p
|
||||
| Проинициализируйте плагин на элементе, который не является текстовым полем, например на
|
||||
+example-inline('<div> … </div>', 'html')
|
||||
| , либо передайте параметр
|
||||
+example-inline('{inline: true}', 'js')
|
||||
| .
|
||||
+example
|
||||
+example-content
|
||||
div.datepicker-here
|
||||
+example-code('html')
|
||||
:code
|
||||
<div class="datepicker-here"></div>
|
||||
|
||||
h3 Выбор месяца
|
||||
+example
|
||||
+example-content
|
||||
input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy')
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type="text"
|
||||
class="datepicker-here"
|
||||
data-min-view="months"
|
||||
data-view="months"
|
||||
data-date-format="MM yyyy" />
|
||||
|
||||
h3 Минимальная и максимальные даты
|
||||
p
|
||||
| Чтобы ограничить выбор даты, используйте
|
||||
+example-inline('minDate', 'js')
|
||||
| и
|
||||
+example-inline('maxDate', 'js')
|
||||
| , которым нужно передать объект даты.
|
||||
+example
|
||||
+example-content
|
||||
input#minMaxExample(type='text')
|
||||
script.
|
||||
$('#minMaxExample').datepicker({
|
||||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||||
})
|
||||
+example-code('js').
|
||||
$('#minMaxExample').datepicker({
|
||||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||||
})
|
||||
|
||||
h3 Диапозон дат
|
||||
p.
|
||||
По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
|
||||
Тем не менее это можно сделть вручную.
|
||||
+example
|
||||
+example-content
|
||||
div.range-example
|
||||
input(type='text' placeholder='Начало')#start
|
||||
span –
|
||||
input(type='text' placeholder='Конец')#end
|
||||
|
||||
script.
|
||||
var $start = $('#start'),
|
||||
$end = $('#end');
|
||||
|
||||
$start.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
$end.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
+example-code('js').
|
||||
var $start = $('#start'),
|
||||
$end = $('#end');
|
||||
|
||||
$start.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
$end.datepicker({
|
||||
onSelect: function (fd, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
article
|
||||
h2 Локализация
|
||||
p
|
||||
| Вы можете добавить свою локализацию в объект
|
||||
+example-inline('Datepicker.language["my-lang"]', 'js')
|
||||
| и при вызове календаря передать название языка в параметр
|
||||
+example-inline('language', 'js')
|
||||
|
||||
+example-code('js').
|
||||
Datepicker.language['my-lang'] = {...}
|
||||
|
||||
$('.my-datepicker').datepicker({
|
||||
language: 'my-lang'
|
||||
})
|
||||
|
||||
p
|
||||
| Также объект локализации можно передавать непосредственно в
|
||||
+example-inline('language', 'js')
|
||||
|
||||
+example-code('js').
|
||||
$('.my-datepicker').datepicker({
|
||||
language: {
|
||||
days: [...]
|
||||
...
|
||||
}
|
||||
})
|
||||
|
||||
p Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.
|
||||
|
||||
h3 Пример объекта локализации
|
||||
+example-code('js').
|
||||
Datepicker.language['ru'] = {
|
||||
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
|
||||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||||
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
|
||||
monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||||
today: 'Сегодня',
|
||||
clear: 'Очистить',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
firstDay: 1
|
||||
};
|
||||
|
||||
article
|
||||
h2 Опции
|
||||
|
||||
.param
|
||||
+param-header('inline', 'boolean', 'false')
|
||||
p Если true, то календарь будет виден постоянно.
|
||||
|
||||
.param
|
||||
+param-header('language', 'string|object', '"ru"')
|
||||
p
|
||||
| Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте
|
||||
+example-inline('Datepicker.language', 'js')
|
||||
| Если передан объект, то данные будут браться из него.
|
||||
p Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
|
||||
|
||||
.param
|
||||
+param-header('startDate', 'Date', 'new Date()')
|
||||
p Какую дату нужно показывать при инициализации календаря.
|
||||
|
||||
.param
|
||||
+param-header('firstDay', 'number', '""')
|
||||
p.
|
||||
Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
|
||||
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
|
||||
|
||||
.param
|
||||
+param-header('weekends', 'array', '[6, 0]')
|
||||
p
|
||||
|Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс
|
||||
+example-inline('.-weekend-','css')
|
||||
|. По умолчанию это суббота и воскресенье.
|
||||
|
||||
.param
|
||||
+param-header('dateFormat', 'string', '""')
|
||||
p Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
|
||||
ul
|
||||
li
|
||||
+param('d')
|
||||
| - дата
|
||||
li
|
||||
+param('dd')
|
||||
| - дата с лидирующем нулем
|
||||
li
|
||||
+param('D')
|
||||
| - сокращенное наименование дня
|
||||
li
|
||||
+param('DD')
|
||||
| - полное наименование дня
|
||||
li
|
||||
+param('m')
|
||||
| - номер мясяца
|
||||
li
|
||||
+param('mm')
|
||||
| - номер месяца с лидирующем нулем
|
||||
li
|
||||
+param('M')
|
||||
| - сокращенное наименовение месяца
|
||||
li
|
||||
+param('MM')
|
||||
| - полное наименовение месяца
|
||||
li
|
||||
+param('yy')
|
||||
| - сокращенный номер года
|
||||
li
|
||||
+param('yyyy')
|
||||
| - полный номер года
|
||||
li
|
||||
+param('yyyy1')
|
||||
| - первый год декады, в которую входит текущий год
|
||||
li
|
||||
+param('yyyy2')
|
||||
| - последний год декады, в которую входит текущий год
|
||||
|
||||
.param
|
||||
+param-header('toggleSelected', 'boolean', 'true')
|
||||
p Если true, то клик на выделенной дате снимет выделение.
|
||||
|
||||
|
||||
@ -54,8 +54,10 @@ input[type='text'] {
|
||||
border: 1px solid #c0c0c0;
|
||||
padding: 0 8px;
|
||||
margin: 0 0 14px;
|
||||
color: #444;
|
||||
font-family: $fontFamily;
|
||||
transition: all .2s;
|
||||
width: 250px;
|
||||
|
||||
&:focus {
|
||||
border-color: gold;
|
||||
@ -63,6 +65,14 @@ input[type='text'] {
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 16px;
|
||||
li {
|
||||
list-style: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Example
|
||||
------------------------------------------------- */
|
||||
|
||||
@ -104,7 +114,7 @@ $exampleBorderRadius: 4px;
|
||||
margin: 0 4px;
|
||||
|
||||
.hljs {
|
||||
padding: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,6 +156,34 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
// Param
|
||||
// -------------------------------------------------
|
||||
|
||||
|
||||
.param {
|
||||
strong {
|
||||
background: #efefef;
|
||||
color: #333;
|
||||
border-radius: $exampleBorderRadius;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 3px 6px 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #838383;
|
||||
font-size: .95em;
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Promo block
|
||||
// -------------------------------------------------
|
||||
|
||||
@ -165,3 +203,45 @@ a {
|
||||
margin: 26px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
// Range example
|
||||
// -------------------------------------------------
|
||||
|
||||
.range-example {
|
||||
input[type='text'] {
|
||||
width: 150px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Param header
|
||||
// -------------------------------------------------
|
||||
|
||||
.param-header {
|
||||
margin-bottom: 8px;
|
||||
h3 {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.param-header--row {
|
||||
|
||||
}
|
||||
|
||||
.param {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.param-header--label {
|
||||
color: #707070;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -145,10 +145,12 @@ var Datepicker;
|
||||
this.loc = Datepicker.language[lang];
|
||||
if (!this.loc) {
|
||||
console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
|
||||
this.loc = Datepicker.language.ru
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru)
|
||||
}
|
||||
|
||||
this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
|
||||
} else {
|
||||
this.loc = $.extend({}, Datepicker.language.ru, lang)
|
||||
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
|
||||
}
|
||||
|
||||
if (this.opts.dateFormat) {
|
||||
@ -418,7 +420,7 @@ var Datepicker;
|
||||
return _this.formatDate(format, date)
|
||||
});
|
||||
|
||||
value.join(this.opts.multipleDatesSeparator);
|
||||
value = value.join(this.opts.multipleDatesSeparator);
|
||||
|
||||
this.$el.val(value)
|
||||
},
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
var gulp = require('gulp'),
|
||||
plumber = require('gulp-plumber'),
|
||||
_jade = require('gulp-jade/node_modules/jade'),
|
||||
jade = require('gulp-jade');
|
||||
|
||||
_jade.filters.code = function( block ) {
|
||||
return block
|
||||
.replace( /\…/g, '…' )
|
||||
.replace( /&/g, '&' )
|
||||
.replace( /</g, '<' )
|
||||
.replace( />/g, '>' )
|
||||
@ -14,6 +16,7 @@ _jade.filters.code = function( block ) {
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('page/jade/pages/*.jade')
|
||||
.pipe(plumber())
|
||||
.pipe(jade())
|
||||
.pipe(gulp.dest('./'))
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user