mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 02:49:13 +08:00
add navigation to docs
This commit is contained in:
t1m0n
parent
25902eb791
commit
0b70c84cec
3
dist/css/datepicker.css
vendored
3
dist/css/datepicker.css
vendored
@ -137,7 +137,8 @@
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; }
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
|
||||
z-index: 100; }
|
||||
.datepicker.-from-top- {
|
||||
-webkit-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
2
dist/css/datepicker.min.css
vendored
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
13
dist/js/datepicker.js
vendored
13
dist/js/datepicker.js
vendored
@ -133,6 +133,7 @@ var Datepicker;
|
||||
_bindEvents : function () {
|
||||
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
|
||||
this.$el.on('blur', this._onBlur.bind(this));
|
||||
this.$el.on('input', this._onInput.bind(this));
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
|
||||
},
|
||||
@ -366,7 +367,9 @@ var Datepicker;
|
||||
clear: function () {
|
||||
this.selectedDates = [];
|
||||
this.views[this.currentView]._render();
|
||||
this._triggerOnChange()
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -567,6 +570,14 @@ var Datepicker;
|
||||
this.$el.focus()
|
||||
},
|
||||
|
||||
_onInput: function () {
|
||||
var val = this.$el.val();
|
||||
|
||||
if (!val) {
|
||||
this.clear();
|
||||
}
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
},
|
||||
|
||||
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
File diff suppressed because one or more lines are too long
119
docs/js/navigation.js
Normal file
119
docs/js/navigation.js
Normal file
@ -0,0 +1,119 @@
|
||||
var navigation;
|
||||
|
||||
(function (window, $) {
|
||||
var $sections = $('article'),
|
||||
idCounter = 1,
|
||||
idPrefix = 'sub-section-',
|
||||
navTemplate = '<div class="nav-wrap"><nav class="nav" id="nav"></nav></div>',
|
||||
$nav,
|
||||
cache = {};
|
||||
|
||||
function init () {
|
||||
updateCache();
|
||||
createHtml();
|
||||
|
||||
$($nav).on('click', 'a', onClickNavItem);
|
||||
}
|
||||
|
||||
function createHtml () {
|
||||
var html = '',
|
||||
section,
|
||||
curSection,
|
||||
subsection,
|
||||
curSubSection;
|
||||
|
||||
$(navTemplate).appendTo('body');
|
||||
$nav = $('#nav');
|
||||
|
||||
for (section in cache) {
|
||||
curSection = cache[section];
|
||||
|
||||
html += '<div class="nav--section">' +
|
||||
'<h2 class="nav--section-title">' +
|
||||
'<a href="#' + section + '">' + curSection.title +'</a>' +
|
||||
'</h2>';
|
||||
|
||||
if (curSection.subSections) {
|
||||
html += '<div class="nav--subsection">';
|
||||
|
||||
for (subsection in curSection.subSections) {
|
||||
curSubSection = curSection.subSections[subsection];
|
||||
html += '' +
|
||||
'<h3 class="nav--subsection-title">' +
|
||||
'<a href="#' + subsection + '">' + curSubSection.title + '</a>' +
|
||||
'</h3>'
|
||||
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
$nav.html(html);
|
||||
}
|
||||
|
||||
function updateCache () {
|
||||
cache = {};
|
||||
idCounter = 1;
|
||||
|
||||
var id,
|
||||
title,
|
||||
subTitles,
|
||||
subId,
|
||||
$subTitle,
|
||||
$current;
|
||||
|
||||
$sections.each(function () {
|
||||
$current = $(this);
|
||||
title = $('h2', $current);
|
||||
subTitles = $('h3', $current);
|
||||
id = title.attr('id');
|
||||
|
||||
cache[id] = {
|
||||
title: title.text(),
|
||||
offset: title.offset().top,
|
||||
subSections: ''
|
||||
};
|
||||
|
||||
if (subTitles.length) {
|
||||
cache[id].subSections = {};
|
||||
|
||||
subTitles.each(function () {
|
||||
subId = idPrefix + idCounter++;
|
||||
$subTitle = $(this).attr('id', subId);
|
||||
|
||||
cache[id].subSections[subId] = {
|
||||
title: $subTitle.text(),
|
||||
offset: $subTitle.offset().top
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function scrollTo (pos) {
|
||||
$('body, html').animate({
|
||||
scrollTop: pos
|
||||
}, 700, 'easeInOutCubic')
|
||||
}
|
||||
|
||||
function onClickNavItem (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $link = $(e.target),
|
||||
$section = $($link.attr('href'));
|
||||
|
||||
$section.addClass('-hilited-');
|
||||
|
||||
setTimeout(function () {
|
||||
$section.removeClass('-hilited-');
|
||||
}, 1400)
|
||||
|
||||
scrollTo($section.offset().top - 16)
|
||||
}
|
||||
|
||||
navigation = {
|
||||
init: init
|
||||
}
|
||||
})(window, jQuery);
|
||||
11
gulpfile.js
11
gulpfile.js
@ -8,6 +8,13 @@ gulp.task('i18n', require('./tasks/i18n'));
|
||||
gulp.task('cssPage', require('./tasks/cssPage'));
|
||||
gulp.task('jade', require('./tasks/jade'));
|
||||
|
||||
var gzip = require('gulp-gzip');
|
||||
gulp.task('gzip', function (cb) {
|
||||
gulp.src('dist/js/datepicker.min.js')
|
||||
.pipe(gzip())
|
||||
.pipe(gulp.dest('dist/'))
|
||||
});
|
||||
|
||||
|
||||
gulp.task('watch', function () {
|
||||
livereload.listen();
|
||||
@ -20,11 +27,11 @@ gulp.task('watch', function () {
|
||||
livereload.changed(file)
|
||||
});
|
||||
|
||||
gulp.watch('page/sass/*.scss', ['cssPage']).on('change', function (file) {
|
||||
gulp.watch('docs/sass/*.scss', ['cssPage']).on('change', function (file) {
|
||||
livereload.changed(file)
|
||||
});
|
||||
|
||||
gulp.watch('page/jade/**/*.jade', ['jade']).on('change', function (file) {
|
||||
gulp.watch('docs/jade/**/*.jade', ['jade']).on('change', function (file) {
|
||||
livereload.changed(file)
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,218 +0,0 @@
|
||||
/**
|
||||
* GitHub Gist Theme
|
||||
* Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.bash .hljs-shebang,
|
||||
.java .hljs-javadoc,
|
||||
.javascript .hljs-javadoc,
|
||||
.rust .hljs-preprocessor {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.apache .hljs-sqbracket,
|
||||
.coffeescript .hljs-subst,
|
||||
.coffeescript .hljs-regexp,
|
||||
.cpp .hljs-preprocessor,
|
||||
.c .hljs-preprocessor,
|
||||
.javascript .hljs-regexp,
|
||||
.json .hljs-attribute,
|
||||
.makefile .hljs-variable,
|
||||
.markdown .hljs-value,
|
||||
.markdown .hljs-link_label,
|
||||
.markdown .hljs-strong,
|
||||
.markdown .hljs-emphasis,
|
||||
.markdown .hljs-blockquote,
|
||||
.nginx .hljs-regexp,
|
||||
.nginx .hljs-number,
|
||||
.objectivec .hljs-preprocessor .hljs-title,
|
||||
.perl .hljs-regexp,
|
||||
.php .hljs-regexp,
|
||||
.xml .hljs-value,
|
||||
.less .hljs-built_in,
|
||||
.scss .hljs-built_in {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.css .hljs-at_rule,
|
||||
.css .hljs-important,
|
||||
.http .hljs-request,
|
||||
.ini .hljs-setting,
|
||||
.haskell .hljs-type,
|
||||
.java .hljs-javadoctag,
|
||||
.javascript .hljs-tag,
|
||||
.javascript .hljs-javadoctag,
|
||||
.nginx .hljs-title,
|
||||
.objectivec .hljs-preprocessor,
|
||||
.php .hljs-phpdoc,
|
||||
.sql .hljs-built_in,
|
||||
.less .hljs-tag,
|
||||
.less .hljs-at_rule,
|
||||
.scss .hljs-tag,
|
||||
.scss .hljs-at_rule,
|
||||
.scss .hljs-important,
|
||||
.stylus .hljs-at_rule,
|
||||
.go .hljs-typename,
|
||||
.swift .hljs-preprocessor {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.apache .hljs-common,
|
||||
.apache .hljs-cbracket,
|
||||
.apache .hljs-keyword,
|
||||
.bash .hljs-literal,
|
||||
.bash .hljs-built_in,
|
||||
.coffeescript .hljs-literal,
|
||||
.coffeescript .hljs-built_in,
|
||||
.coffeescript .hljs-number,
|
||||
.cpp .hljs-number,
|
||||
.cpp .hljs-built_in,
|
||||
.c .hljs-number,
|
||||
.c .hljs-built_in,
|
||||
.cs .hljs-number,
|
||||
.cs .hljs-built_in,
|
||||
.css .hljs-attribute,
|
||||
.css .hljs-hexcolor,
|
||||
.css .hljs-number,
|
||||
.css .hljs-function,
|
||||
.haskell .hljs-number,
|
||||
.http .hljs-literal,
|
||||
.http .hljs-attribute,
|
||||
.java .hljs-number,
|
||||
.javascript .hljs-built_in,
|
||||
.javascript .hljs-literal,
|
||||
.javascript .hljs-number,
|
||||
.json .hljs-number,
|
||||
.makefile .hljs-keyword,
|
||||
.markdown .hljs-link_reference,
|
||||
.nginx .hljs-built_in,
|
||||
.objectivec .hljs-literal,
|
||||
.objectivec .hljs-number,
|
||||
.objectivec .hljs-built_in,
|
||||
.php .hljs-literal,
|
||||
.php .hljs-number,
|
||||
.python .hljs-number,
|
||||
.ruby .hljs-prompt,
|
||||
.ruby .hljs-constant,
|
||||
.ruby .hljs-number,
|
||||
.ruby .hljs-subst .hljs-keyword,
|
||||
.ruby .hljs-symbol,
|
||||
.rust .hljs-number,
|
||||
.sql .hljs-number,
|
||||
.puppet .hljs-function,
|
||||
.less .hljs-number,
|
||||
.less .hljs-hexcolor,
|
||||
.less .hljs-function,
|
||||
.less .hljs-attribute,
|
||||
.scss .hljs-preprocessor,
|
||||
.scss .hljs-number,
|
||||
.scss .hljs-hexcolor,
|
||||
.scss .hljs-function,
|
||||
.scss .hljs-attribute,
|
||||
.stylus .hljs-number,
|
||||
.stylus .hljs-hexcolor,
|
||||
.stylus .hljs-attribute,
|
||||
.stylus .hljs-params,
|
||||
.go .hljs-built_in,
|
||||
.go .hljs-constant,
|
||||
.swift .hljs-built_in,
|
||||
.swift .hljs-number {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.apache .hljs-tag,
|
||||
.cs .hljs-xmlDocTag,
|
||||
.css .hljs-tag,
|
||||
.xml .hljs-title,
|
||||
.stylus .hljs-tag {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.bash .hljs-variable,
|
||||
.cs .hljs-preprocessor,
|
||||
.cs .hljs-preprocessor .hljs-keyword,
|
||||
.css .hljs-attr_selector,
|
||||
.css .hljs-value,
|
||||
.ini .hljs-value,
|
||||
.ini .hljs-keyword,
|
||||
.javascript .hljs-tag .hljs-title,
|
||||
.makefile .hljs-constant,
|
||||
.nginx .hljs-variable,
|
||||
.xml .hljs-tag,
|
||||
.scss .hljs-variable {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bash .hljs-title,
|
||||
.coffeescript .hljs-title,
|
||||
.cpp .hljs-title,
|
||||
.c .hljs-title,
|
||||
.cs .hljs-title,
|
||||
.css .hljs-id,
|
||||
.css .hljs-class,
|
||||
.css .hljs-pseudo,
|
||||
.ini .hljs-title,
|
||||
.haskell .hljs-title,
|
||||
.haskell .hljs-pragma,
|
||||
.java .hljs-title,
|
||||
.javascript .hljs-title,
|
||||
.makefile .hljs-title,
|
||||
.objectivec .hljs-title,
|
||||
.perl .hljs-sub,
|
||||
.php .hljs-title,
|
||||
.python .hljs-decorator,
|
||||
.python .hljs-title,
|
||||
.ruby .hljs-parent,
|
||||
.ruby .hljs-title,
|
||||
.rust .hljs-title,
|
||||
.xml .hljs-attribute,
|
||||
.puppet .hljs-title,
|
||||
.less .hljs-id,
|
||||
.less .hljs-pseudo,
|
||||
.less .hljs-class,
|
||||
.scss .hljs-id,
|
||||
.scss .hljs-pseudo,
|
||||
.scss .hljs-class,
|
||||
.stylus .hljs-class,
|
||||
.stylus .hljs-id,
|
||||
.stylus .hljs-pseudo,
|
||||
.stylus .hljs-title,
|
||||
.swift .hljs-title,
|
||||
.diff .hljs-chunk {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.coffeescript .hljs-reserved,
|
||||
.coffeescript .hljs-attribute {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.diff .hljs-chunk {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diff .hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.diff .hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.markdown .hljs-link_url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
.-text-center-,.datepicker-promo,.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,h4{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}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{outline:0;height:32px;border:1px solid #979797;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:#ffd75c}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#ececec;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ececec;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #ececec;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-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline 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}.datepicker-promo .datepicker-inline,.param-header--label,.range-example span{display:inline-block}.range-example input[type=text]{width:150px}.range-example span{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;vertical-align:middle}
|
||||
@ -1,33 +0,0 @@
|
||||
include mixins/example
|
||||
include mixins/example-content
|
||||
include mixins/example-code
|
||||
include mixins/example-inline
|
||||
include mixins/param
|
||||
include mixins/param-header
|
||||
|
||||
doctype html
|
||||
html
|
||||
head
|
||||
title Air Datepicker
|
||||
meta(charset='UTF-8')
|
||||
link(href='page/css/style.css', rel='stylesheet', type='text/css')
|
||||
link(href='page/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='bower_components/jquery/dist/jquery.min.js')
|
||||
script(src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js')
|
||||
script(src='dist/js/datepicker.min.js')
|
||||
script(src='dist/js/i18n/datepicker.en.js')
|
||||
|
||||
body
|
||||
div.wrapper
|
||||
main.main(role='main')
|
||||
.container
|
||||
block content
|
||||
|
||||
script.
|
||||
var $code = $('code');
|
||||
$code.each(function (i, el) {
|
||||
hljs.highlightBlock(el);
|
||||
})
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
mixin example-code(cl)
|
||||
pre.example-code
|
||||
code(class=cl)
|
||||
block
|
||||
@ -1,3 +0,0 @@
|
||||
mixin example-content()
|
||||
.example-content
|
||||
block
|
||||
@ -1,4 +0,0 @@
|
||||
mixin example-inline(content, type)
|
||||
span.example-inline
|
||||
code(class= type).
|
||||
#{content}
|
||||
@ -1,4 +0,0 @@
|
||||
mixin example()
|
||||
.example
|
||||
.example--label Пример
|
||||
block
|
||||
@ -1,14 +0,0 @@
|
||||
mixin param-header(name, type, defaults)
|
||||
header.param-header
|
||||
h3= name
|
||||
if type
|
||||
p.param-header--row
|
||||
span.param-header--label Тип:
|
||||
+example-inline(type, 'js')
|
||||
if (defaults || block)
|
||||
p.param-header--row
|
||||
span.param-header--label Значение по умполчанию:
|
||||
if defaults
|
||||
+example-inline(defaults, 'js')
|
||||
if block
|
||||
block
|
||||
@ -1,5 +0,0 @@
|
||||
mixin param(content, type)
|
||||
span.param-inline
|
||||
strong= content
|
||||
if type
|
||||
i= type
|
||||
@ -1,598 +0,0 @@
|
||||
extends ../layout
|
||||
|
||||
block content
|
||||
h1.promo-header
|
||||
| AIR DATEPICKER
|
||||
span легкий современный jQuery календарь
|
||||
|
||||
p.-text-center-
|
||||
.datepicker-here.datepicker-promo
|
||||
script.
|
||||
var $promo = $('.datepicker-promo');
|
||||
|
||||
$promo.datepicker()
|
||||
|
||||
|
||||
h2 Описание
|
||||
p
|
||||
|Легкий кроссбраузерный календарь, написан с использованием
|
||||
+example-inline('flexbox')
|
||||
|. Работает во всех современных браузерах:
|
||||
| <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.
|
||||
h2 Установка
|
||||
+example-code('html') bower i --save air-datepicker
|
||||
p Либо можно скачать файлы напрямую с <a href="">GitHub</a>
|
||||
|
||||
h2 Использование
|
||||
p
|
||||
|Подключите стили и скрипты из папки
|
||||
+example-inline('/dist')
|
||||
| :
|
||||
|
||||
+example-code('html')
|
||||
:code
|
||||
<html>
|
||||
<head>
|
||||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
||||
<script src="dist/js/datepicker.min.js"></script>
|
||||
</head>
|
||||
</html>
|
||||
p
|
||||
| Календарь автоматически проинициализируется на элементах с классом
|
||||
+example-inline('.datepicker-here', 'css')
|
||||
| , при этом опции можно передать через
|
||||
+example-inline('data', 'html')
|
||||
| атрибуты.
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type='text' class="datepicker-here" data-position="right top" />
|
||||
h3 Ручная инициализация
|
||||
+example-code('js').
|
||||
// Инициализация
|
||||
$('#my-element').datepicker([options])
|
||||
|
||||
// Доступ к экземпляру объекта
|
||||
$('#my-element').data('datepicker')
|
||||
|
||||
h2 Примеры
|
||||
h3 Инициализация с опциями по умолчанию
|
||||
+example
|
||||
+example-content
|
||||
input(type='text').datepicker-here
|
||||
+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=', ', data-position='right top').datepicker-here
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type="text"
|
||||
class="datepicker-here"
|
||||
data-multiple-dates="3"
|
||||
data-multiple-dates-separator=", "
|
||||
data-position='right top'/>
|
||||
|
||||
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, то клик на выделенной дате снимет выделение.
|
||||
|
||||
.param
|
||||
+param-header('position', 'string', '"bottom left"')
|
||||
p
|
||||
| Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
|
||||
| воторым - положение на этой оси. Например
|
||||
+example-inline('{position: "right top"}', 'js')
|
||||
| - утсановит позицию клаендаря справа вверху от текстового поля.
|
||||
|
||||
.param
|
||||
+param-header('offset','number', 12)
|
||||
p Отступ от основной оси позиционирования.
|
||||
|
||||
.param
|
||||
+param-header('view', 'string', '"days"')
|
||||
p Начальный вид календаря. Возможноые значения:
|
||||
ul
|
||||
li
|
||||
+example-inline('days','js')
|
||||
| - отображение дней месяца
|
||||
li
|
||||
+example-inline('months','js')
|
||||
| - отображение месяцев одного года
|
||||
li
|
||||
+example-inline('years','js')
|
||||
| - отображение годов одной декады
|
||||
|
||||
.param
|
||||
+param-header('minView', 'string', '"days"')
|
||||
p
|
||||
| Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
|
||||
| Возможные значения такие же как и у параметра
|
||||
+example-inline('view')
|
||||
| .
|
||||
|
||||
.param
|
||||
+param-header('showOtherMonths', 'boolean', 'true')
|
||||
p Если true, то будут отображаться дни других месяцев.
|
||||
|
||||
.param
|
||||
+param-header('selectOtherMonths', 'boolean', 'true')
|
||||
p Если true, то можно будет выбрать дни из других месяцев.
|
||||
|
||||
.param
|
||||
+param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
|
||||
p Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
|
||||
|
||||
.param
|
||||
+param-header('showOtherYears', 'boolean', 'true')
|
||||
p Если true, то при отображении декады, будут показаны годы из других декад.
|
||||
|
||||
.param
|
||||
+param-header('selectOtherYears', 'boolean', 'true')
|
||||
p Если true, то можно будет выбрать года из других декад
|
||||
|
||||
.param
|
||||
+param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
|
||||
p Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
|
||||
|
||||
.param
|
||||
+param-header('minDate', 'Date', '""')
|
||||
p Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
|
||||
|
||||
.param
|
||||
+param-header('maxDate', 'Date', '""')
|
||||
p Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
|
||||
|
||||
.param
|
||||
+param-header('disableNavWhenOutOfRange', 'boolean', 'true')
|
||||
p Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
|
||||
|
||||
.param
|
||||
+param-header('multipleDates', 'boolean|number', 'false')
|
||||
p Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
|
||||
|
||||
.param
|
||||
+param-header('multipleDatesSeparator', 'string', '","')
|
||||
p Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.
|
||||
|
||||
.param
|
||||
+param-header('todayButton', 'boolean', 'false')
|
||||
p Если true, то будет отображена кнопка "Сегодня".
|
||||
|
||||
.param
|
||||
+param-header('clearButton', 'boolean', 'false')
|
||||
p Если true, то будет отображена кнопка "Очистить".
|
||||
|
||||
.param
|
||||
+param-header('showEvent','string','"focus"')
|
||||
p Тип события, по наступлению которого будет показан календарь.
|
||||
|
||||
.param
|
||||
+param-header('autoClose', 'boolean', 'false')
|
||||
p Если true, то при активации даты, календарь закроется.
|
||||
|
||||
.param
|
||||
+param-header('prevHtml', 'string', '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>')
|
||||
p Контент кнопки 'предыдущий месяц|год|декада'.
|
||||
|
||||
.param
|
||||
+param-header('nextHtml', 'string', '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>')
|
||||
p Контент кнопки 'следующий месяц|год|декада'.
|
||||
|
||||
.param
|
||||
+param-header('navTitles', 'object')
|
||||
+example-code('js')
|
||||
:code
|
||||
navTitles = {
|
||||
days: 'MM, <i>yyyy</i>',
|
||||
months: 'yyyy',
|
||||
years: 'yyyy1 - yyyy2'
|
||||
};
|
||||
p
|
||||
| Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в
|
||||
+example-inline('dateFormat', 'js')
|
||||
| . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
|
||||
+example-code('js')
|
||||
:code
|
||||
$('#my-datepicker').datepicker({
|
||||
navTitles: {
|
||||
days: '<h3>Выберете дату заезда</h3> MM, yyyy'
|
||||
}
|
||||
})
|
||||
.param
|
||||
+param-header('monthsField','string','"monthsShort"')
|
||||
p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
|
||||
|
||||
h2 События
|
||||
.param
|
||||
+param-header('onSelect(formattedDate, date, inst)', 'function', 'null')
|
||||
p Функция обратного вызова при выборе даты.
|
||||
ul
|
||||
li
|
||||
+param('formattedDate', 'string')
|
||||
| - отформатированная дата.
|
||||
li
|
||||
+param('date', 'Date|array')
|
||||
| - объект
|
||||
+example-inline('Date', 'js')
|
||||
| выбранной даты, если
|
||||
+example-inline('{multipleDates: true}', 'js')
|
||||
| , то будет передан массив таких объектов.
|
||||
li
|
||||
+param('inst','object')
|
||||
| - экземпляр плагина.
|
||||
|
||||
.param
|
||||
+param-header('onChangeMonth(month, year)','function','null')
|
||||
p Функция обратного вызова при изменении месяца.
|
||||
ul
|
||||
li
|
||||
+param('month','number')
|
||||
| - номер месяца (от 0 до 12), к которому осуществлен переход.
|
||||
li
|
||||
+param('year','number')
|
||||
| - номер года, к которому осуществлен переход.
|
||||
|
||||
.param
|
||||
+param-header('onChangeYear(year)','function', 'null')
|
||||
p Функция обратного вызова при изменении года.
|
||||
ul
|
||||
li
|
||||
+param('year','number')
|
||||
| - номер года, к которому осуществлен переход
|
||||
|
||||
.param
|
||||
+param-header('onChangeDecade(decade)','function', 'null')
|
||||
p Функция обратного вызова при изменении декады.
|
||||
ul
|
||||
li
|
||||
+param('decade','array')
|
||||
| - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
|
||||
|
||||
.param
|
||||
+param-header('onChangeView(view)', 'function', 'null')
|
||||
p Функция обратного вызова при изменении вида календаря
|
||||
ul
|
||||
li
|
||||
+param('view', 'string')
|
||||
| - вид, к которому осуществлен переход (days, months, years).
|
||||
|
||||
.param
|
||||
+param-header('onRenderCell(date, cellType)', 'function', 'null')
|
||||
p Функция обратного вызова при отрисовке ячейки календаря.
|
||||
ul
|
||||
li
|
||||
+param('date', 'Date')
|
||||
| - объект даты текущей ячейки
|
||||
li
|
||||
+param('cellType', 'string')
|
||||
| - тип текущей ячейки (day, month, year).
|
||||
p Функция должна возвращать объект, которой может состоять из трех полей:
|
||||
+example-code('js').
|
||||
{
|
||||
html: '', // Кастомный контент ячейки
|
||||
classes: '', // Дополнительные классы для ячейки
|
||||
disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
|
||||
}
|
||||
h4 Пример
|
||||
+example-code('js').
|
||||
$('#my-datepicker').datepicker({
|
||||
// Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
|
||||
// и делает их невозможными к выбору.
|
||||
onRenderCell: function(date, cellType) {
|
||||
if (cellType == 'day' && date.getDate() == 4) {
|
||||
return {
|
||||
classes: 'my-class',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
article
|
||||
h2 API
|
||||
p
|
||||
| Досутп к экземпляру плагина осуществляется через
|
||||
+example-inline('data')
|
||||
| атрибут.
|
||||
+example-code('js').
|
||||
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
|
||||
|
||||
myDatepicker.show();
|
||||
|
||||
.param
|
||||
+param-header('show()')
|
||||
p Показывает календарь.
|
||||
|
||||
.param
|
||||
+param-header('hide()')
|
||||
p Скрывает календарь.
|
||||
|
||||
.param
|
||||
+param-header('next()')
|
||||
p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
|
||||
|
||||
.param
|
||||
+param-header('prev()')
|
||||
p Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.
|
||||
|
||||
.param
|
||||
+param-header('selectDate(date)')
|
||||
ul
|
||||
li
|
||||
+param('date','Date')
|
||||
| - дата в формате JavaScript
|
||||
+example-inline('Date()', 'js')
|
||||
p
|
||||
| Выбирает переданную дату. Если
|
||||
+example-inline('{multipleDates: false}','js')
|
||||
| и уже есть активная дата, то она будет деактивирована. Если
|
||||
+example-inline('{multipleDates: true}','js')
|
||||
| то будет добавлена еще одна активная дата.
|
||||
|
||||
.param
|
||||
+param-header('removeDate(date)')
|
||||
ul
|
||||
li
|
||||
+param('date','Date')
|
||||
| - дата в формате JavaScript
|
||||
+example-inline('Date()', 'js')
|
||||
p
|
||||
| Снимает выделение с переданной даты.
|
||||
|
||||
.param
|
||||
+param-header('update(field[, value])')
|
||||
ul
|
||||
li
|
||||
+param('field','string|object')
|
||||
| - название поля значение которого нужно обновить.
|
||||
li
|
||||
+param('field','string|*')
|
||||
| - новое значение параметра
|
||||
p.
|
||||
Обновление опций календаря, после вызова метода он автоматически перерисуется.
|
||||
Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями.
|
||||
|
||||
+example-code('js').
|
||||
var datepicker = $('#my-elem').datepicker().data('datepicker');
|
||||
|
||||
// Обновление одного параметра
|
||||
datepicker.update('minDate', new Date())
|
||||
|
||||
// Обновление нескольких параметров
|
||||
datepicker.update({
|
||||
position: "top right",
|
||||
maxDate: new Date(),
|
||||
todayButton: true
|
||||
})
|
||||
|
||||
.param
|
||||
+param-header('view')
|
||||
p Устанавливает новое представление для календаря.
|
||||
+example-code('js').
|
||||
datepicker.view = 'months';
|
||||
|
||||
.param
|
||||
+param-header('date')
|
||||
p
|
||||
| Устанавливает новую отображаемую дату, нужно передать JavaScript
|
||||
+example-inline('Date()')
|
||||
|
||||
+example-code('js').
|
||||
datepicker.date = new Date();
|
||||
File diff suppressed because one or more lines are too long
@ -1,255 +0,0 @@
|
||||
/* -------------------------------------------------
|
||||
Page styles
|
||||
------------------------------------------------- */
|
||||
|
||||
$fontFamily: Tahoma, sans-serif;
|
||||
|
||||
html {
|
||||
color: #333;
|
||||
font-family: $fontFamily;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
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;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
color: #939393;
|
||||
font-size: 16px;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 1px 0;
|
||||
|
||||
article {
|
||||
margin: 60px 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.-text-center- {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
outline: none;
|
||||
height: 32px;
|
||||
border: 1px solid #979797;
|
||||
padding: 0 8px;
|
||||
margin: 0 0 14px;
|
||||
color: #444;
|
||||
font-family: $fontFamily;
|
||||
transition: all .2s;
|
||||
width: 250px;
|
||||
|
||||
&:focus {
|
||||
border-color: #ffd75c;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 16px;
|
||||
li {
|
||||
list-style: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Example
|
||||
------------------------------------------------- */
|
||||
|
||||
%example-label {
|
||||
background: #ececec;
|
||||
border-radius: 0 0 4px 4px;
|
||||
position: absolute;
|
||||
padding: 4px 12px;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
$exampleBorderRadius: 4px;
|
||||
|
||||
.hljs {
|
||||
font-family: Consolas, monospace;
|
||||
line-height: 1.2;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
.example {
|
||||
border: 1px solid #ececec;
|
||||
border-radius: $exampleBorderRadius;
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
|
||||
.example-code {
|
||||
border: none;
|
||||
border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
|
||||
border-top: 1px solid #ececec;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.example-inline {
|
||||
background: red;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 4px;
|
||||
|
||||
.hljs {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.example--label {
|
||||
@extend %example-label;
|
||||
}
|
||||
|
||||
.example-content {
|
||||
padding: 32px;
|
||||
|
||||
h1, h2, h3 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #47A6EC;
|
||||
|
||||
&:hover {
|
||||
color: darken(#47A6EC, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.example-code {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: $exampleBorderRadius;
|
||||
overflow: hidden;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
|
||||
code {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// Param
|
||||
// -------------------------------------------------
|
||||
|
||||
|
||||
.param-inline {
|
||||
font-family: Consolas, monospace;
|
||||
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
|
||||
// -------------------------------------------------
|
||||
|
||||
.promo-header {
|
||||
font-size: 48px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-promo {
|
||||
text-align: center;
|
||||
|
||||
.datepicker-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
/* -------------------------------------------------
|
||||
Reset
|
||||
------------------------------------------------- */
|
||||
|
||||
applet, object, iframe, p,
|
||||
blockquote, pre, a, abbr, acronym, address, big,
|
||||
cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, sub, sup, tt, var, u, i, center, dl,
|
||||
dt, dd, ol, ul, li, fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed, figure, figcaption,
|
||||
footer, header, menu, nav, output, ruby, section,
|
||||
summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:after, *:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// HTML 5 roles for ie8/eie9
|
||||
// -------------------------------------------------
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Default font weight
|
||||
// -------------------------------------------------
|
||||
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Default font style
|
||||
// -------------------------------------------------
|
||||
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Remove link outline
|
||||
// -------------------------------------------------
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove scroll in ie
|
||||
// -------------------------------------------------
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
@import "reset";
|
||||
@import "page";
|
||||
@ -133,6 +133,7 @@ var Datepicker;
|
||||
_bindEvents : function () {
|
||||
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
|
||||
this.$el.on('blur', this._onBlur.bind(this));
|
||||
this.$el.on('input', this._onInput.bind(this));
|
||||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||||
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
|
||||
},
|
||||
@ -366,7 +367,9 @@ var Datepicker;
|
||||
clear: function () {
|
||||
this.selectedDates = [];
|
||||
this.views[this.currentView]._render();
|
||||
this._triggerOnChange()
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -567,6 +570,14 @@ var Datepicker;
|
||||
this.$el.focus()
|
||||
},
|
||||
|
||||
_onInput: function () {
|
||||
var val = this.$el.val();
|
||||
|
||||
if (!val) {
|
||||
this.clear();
|
||||
}
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@ $datepickerWidth: 250px;
|
||||
$datepickerMinBodyHeight: 170px;
|
||||
$datepickerBorderRadius: 4px;
|
||||
$datepickerPadding: 4px;
|
||||
$datepickerZIndex: 100;
|
||||
|
||||
$fontFamily: Tahoma;
|
||||
$fontSize: 14px;
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
left: -100000px;
|
||||
opacity: 0;
|
||||
transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
|
||||
z-index: $datepickerZIndex;
|
||||
|
||||
&.-from-top- {
|
||||
transform: translateY(-$transitionOffset);
|
||||
|
||||
@ -8,10 +8,10 @@ var gulp = require('gulp'),
|
||||
concat = require('gulp-concat');
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('page/sass/init.scss')
|
||||
gulp.src('docs/sass/init.scss')
|
||||
.pipe(concat('style.css'))
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(postcss([autoprefixer]))
|
||||
.pipe(minify())
|
||||
.pipe(gulp.dest('page/css'))
|
||||
.pipe(gulp.dest('docs/css'))
|
||||
};
|
||||
@ -15,8 +15,8 @@ _jade.filters.code = function( block ) {
|
||||
};
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('page/jade/pages/*.jade')
|
||||
gulp.src('docs/jade/pages/*.jade')
|
||||
.pipe(plumber())
|
||||
.pipe(jade())
|
||||
.pipe(gulp.dest('./'))
|
||||
.pipe(gulp.dest('docs/'))
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user