mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
begin docs
This commit is contained in:
t1m0n
parent
20427d0c52
commit
35c0c5474b
3
dist/css/datepicker.css
vendored
3
dist/css/datepicker.css
vendored
@ -172,7 +172,8 @@
|
|||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
border-right: 1px solid #ddd;
|
border-right: 1px solid #ddd;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px; }
|
height: 10px;
|
||||||
|
z-index: -1; }
|
||||||
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
|
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
|
||||||
top: calc(100% - 4px);
|
top: calc(100% - 4px);
|
||||||
-webkit-transform: rotate(135deg);
|
-webkit-transform: rotate(135deg);
|
||||||
|
|||||||
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
8
dist/js/datepicker.js
vendored
8
dist/js/datepicker.js
vendored
@ -2,6 +2,7 @@ var Datepicker;
|
|||||||
|
|
||||||
(function (window, $, undefined) {
|
(function (window, $, undefined) {
|
||||||
var pluginName = 'datepicker',
|
var pluginName = 'datepicker',
|
||||||
|
autoInitSelector = '.datepicker-here',
|
||||||
$body, $datepickersContainer,
|
$body, $datepickersContainer,
|
||||||
containerBuilt = false,
|
containerBuilt = false,
|
||||||
baseTemplate = '' +
|
baseTemplate = '' +
|
||||||
@ -68,7 +69,7 @@ var Datepicker;
|
|||||||
this.el = el;
|
this.el = el;
|
||||||
this.$el = $(el);
|
this.$el = $(el);
|
||||||
|
|
||||||
this.opts = $.extend(true, {}, defaults, options);
|
this.opts = $.extend(true, {}, defaults, options, this.$el.data());
|
||||||
|
|
||||||
if ($body == undefined) {
|
if ($body == undefined) {
|
||||||
$body = $('body');
|
$body = $('body');
|
||||||
@ -124,7 +125,6 @@ var Datepicker;
|
|||||||
},
|
},
|
||||||
|
|
||||||
_createShortCuts: function () {
|
_createShortCuts: function () {
|
||||||
|
|
||||||
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
||||||
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
||||||
},
|
},
|
||||||
@ -710,6 +710,10 @@ var Datepicker;
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$(autoInitSelector).datepicker();
|
||||||
|
})
|
||||||
|
|
||||||
})(window, jQuery);
|
})(window, jQuery);
|
||||||
;(function () {
|
;(function () {
|
||||||
var templates = {
|
var templates = {
|
||||||
|
|||||||
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
@ -1,48 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html><html><head><title>Air Datepicker</title><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="vendor/jquery/dist/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="dist/js/datepicker.min.js"></script><script src="dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><h1 class="promo-header">AIR DATEPICKER<span>легкий соврменныый jQuery календарь</span></h1><p class="-text-center-"><input type="text" id="example-promo" data-position="bottom center" class="promo-input datepicker-here"></p><h2>Установка</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Либо можно скачать файлы напрямую с <a href="">GitHub</a></p><h2>Использование</h2><p>Календарь автоматически проинициализируется на элементах с классом<span class="example-inline"><code class="css">.datepicker-here</code></span>, при этом опции можно передать через<span class="example-inline"><code class="html">data</code></span>атрибуты.</p><pre class="example-code"><code class="html"><input type='text' class="datepicker-here" data-position="right top" /></code></pre><h3>Ручная инициализация</h3><pre class="example-code"><code class="js">// Инициализация
|
||||||
<html>
|
$('#my-element').datepicker([options])
|
||||||
<head>
|
|
||||||
<title>Air Datepicker</title>
|
// Доступ к экземпляру объекта
|
||||||
<meta charset="UTF-8">
|
$('#my-element').data('datepicker')
|
||||||
<link href="page/css/style.css" rel="stylesheet" type="text/css">
|
</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');
|
||||||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
$code.each(function (i, el) {
|
||||||
<script src="vendor/jquery/dist/jquery.min.js"></script>
|
hljs.highlightBlock(el);
|
||||||
<script src="dist/js/datepicker.min.js"></script>
|
})</script></body></html>
|
||||||
<script src="dist/js/i18n/datepicker.en.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="wrapper">
|
|
||||||
<main role="main" class="main">
|
|
||||||
<div class="container">
|
|
||||||
<input type="text" name="start">
|
|
||||||
<input type="text" name="end">
|
|
||||||
<script>
|
|
||||||
var $start = $('[name="start"]'),
|
|
||||||
$end = $('[name="end"]').hide();
|
|
||||||
|
|
||||||
$start.datepicker({
|
|
||||||
inline: true,
|
|
||||||
onSelect: function (format, date) {
|
|
||||||
$end.data('datepicker')
|
|
||||||
.update('minDate', date)
|
|
||||||
}
|
|
||||||
}).data('datepicker').show()
|
|
||||||
|
|
||||||
$end.datepicker({
|
|
||||||
position: 'right top',
|
|
||||||
onSelect: function (format, date) {
|
|
||||||
$start.data('datepicker')
|
|
||||||
.update('maxDate', date)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$('button').on('click', function () {
|
|
||||||
$start.data('datepicker').update({
|
|
||||||
language: 'en'
|
|
||||||
})
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -13,6 +13,7 @@
|
|||||||
"gulp-rename": "^1.2.2",
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-sass": "^2.0.4",
|
"gulp-sass": "^2.0.4",
|
||||||
"gulp-uglify": "^1.2.0",
|
"gulp-uglify": "^1.2.0",
|
||||||
"gulp-watch": "^4.3.5"
|
"gulp-watch": "^4.3.5",
|
||||||
|
"jade": "^1.11.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
218
page/css/github-gist.css
Normal file
218
page/css/github-gist.css
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
/**
|
||||||
|
* 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 +1 @@
|
|||||||
html{font-family:Tahoma,sans-serif;font-size:13px}.contents{width:960px;margin:0 auto;padding:1px 0}.contents article{margin:60px 0 30px}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,h1,h2,h3,h4,h5,h6,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}textarea{overflow:auto}
|
.-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}
|
||||||
@ -10,13 +10,23 @@ html
|
|||||||
title Air Datepicker
|
title Air Datepicker
|
||||||
meta(charset='UTF-8')
|
meta(charset='UTF-8')
|
||||||
link(href='page/css/style.css', rel='stylesheet', type='text/css')
|
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='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='vendor/jquery/dist/jquery.min.js')
|
script(src='vendor/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/datepicker.min.js')
|
||||||
script(src='dist/js/i18n/datepicker.en.js')
|
script(src='dist/js/i18n/datepicker.en.js')
|
||||||
|
|
||||||
body
|
body
|
||||||
div.wrapper
|
div.wrapper
|
||||||
main.main(role='main')
|
main.main(role='main')
|
||||||
.container
|
.container
|
||||||
block content
|
block content
|
||||||
|
|
||||||
|
script.
|
||||||
|
var $code = $('code');
|
||||||
|
$code.each(function (i, el) {
|
||||||
|
hljs.highlightBlock(el);
|
||||||
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,31 +1,40 @@
|
|||||||
extends ../layout
|
extends ../layout
|
||||||
|
|
||||||
block content
|
block content
|
||||||
input(type='text', name='start')
|
h1.promo-header
|
||||||
input(type='text', name='end')
|
| AIR DATEPICKER
|
||||||
|
span легкий соврменныый jQuery календарь
|
||||||
|
|
||||||
script.
|
p.-text-center-
|
||||||
var $start = $('[name="start"]'),
|
input.promo-input.datepicker-here(type='text' id='example-promo' data-position='bottom center')
|
||||||
$end = $('[name="end"]').hide();
|
|
||||||
|
|
||||||
$start.datepicker({
|
h2 Установка
|
||||||
inline: true,
|
+example-code('html') bower i --save air-datepicker
|
||||||
onSelect: function (format, date) {
|
p Либо можно скачать файлы напрямую с <a href="">GitHub</a>
|
||||||
$end.data('datepicker')
|
|
||||||
.update('minDate', date)
|
|
||||||
}
|
|
||||||
}).data('datepicker').show()
|
|
||||||
|
|
||||||
$end.datepicker({
|
h2 Использование
|
||||||
position: 'right top',
|
p
|
||||||
onSelect: function (format, date) {
|
|Календарь автоматически проинициализируется на элементах с классом
|
||||||
$start.data('datepicker')
|
+example-inline('.datepicker-here', 'css')
|
||||||
.update('maxDate', date)
|
|, при этом опции можно передать через
|
||||||
}
|
+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])
|
||||||
|
|
||||||
$('button').on('click', function () {
|
// Доступ к экземпляру объекта
|
||||||
$start.data('datepicker').update({
|
$('#my-element').data('datepicker')
|
||||||
language: 'en'
|
|
||||||
})
|
h2 Примеры
|
||||||
});
|
h3 Инициализация с опциями по умолчанию
|
||||||
|
+example
|
||||||
|
+example-content
|
||||||
|
input(type='text').datepicker-here
|
||||||
|
+example-code('html')
|
||||||
|
:code
|
||||||
|
<input type='text' class='datepicker-here' />
|
||||||
|
|||||||
1
page/js/highlight.pack.js
Normal file
1
page/js/highlight.pack.js
Normal file
File diff suppressed because one or more lines are too long
167
page/sass/_page.scss
Normal file
167
page/sass/_page.scss
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
/* -------------------------------------------------
|
||||||
|
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 {
|
||||||
|
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;
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: 60px 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.-text-center- {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='text'] {
|
||||||
|
border-radius: 4px;
|
||||||
|
outline: none;
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
padding: 0 8px;
|
||||||
|
margin: 0 0 14px;
|
||||||
|
font-family: $fontFamily;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: gold;
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Example
|
||||||
|
------------------------------------------------- */
|
||||||
|
|
||||||
|
%example-label {
|
||||||
|
background: #f4f4f4;
|
||||||
|
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 #ddd;
|
||||||
|
border-radius: $exampleBorderRadius;
|
||||||
|
position: relative;
|
||||||
|
margin: 16px 0;
|
||||||
|
|
||||||
|
.example-code {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-inline {
|
||||||
|
background: red;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 4px;
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
padding: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Promo block
|
||||||
|
// -------------------------------------------------
|
||||||
|
|
||||||
|
.promo-header {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 100;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
font-size: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.promo-input {
|
||||||
|
height: 40px;
|
||||||
|
margin: 26px 0;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
@ -2,7 +2,7 @@
|
|||||||
Reset
|
Reset
|
||||||
------------------------------------------------- */
|
------------------------------------------------- */
|
||||||
|
|
||||||
applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
applet, object, iframe, p,
|
||||||
blockquote, pre, a, abbr, acronym, address, big,
|
blockquote, pre, a, abbr, acronym, address, big,
|
||||||
cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
|
cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
small, strike, sub, sup, tt, var, u, i, center, dl,
|
small, strike, sub, sup, tt, var, u, i, center, dl,
|
||||||
2
page/sass/init.scss
Normal file
2
page/sass/init.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "reset";
|
||||||
|
@import "page";
|
||||||
@ -1,18 +0,0 @@
|
|||||||
/* -------------------------------------------------
|
|
||||||
Page styles
|
|
||||||
------------------------------------------------- */
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: Tahoma, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contents {
|
|
||||||
width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1px 0;
|
|
||||||
|
|
||||||
article {
|
|
||||||
margin: 60px 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,6 +2,7 @@ var Datepicker;
|
|||||||
|
|
||||||
(function (window, $, undefined) {
|
(function (window, $, undefined) {
|
||||||
var pluginName = 'datepicker',
|
var pluginName = 'datepicker',
|
||||||
|
autoInitSelector = '.datepicker-here',
|
||||||
$body, $datepickersContainer,
|
$body, $datepickersContainer,
|
||||||
containerBuilt = false,
|
containerBuilt = false,
|
||||||
baseTemplate = '' +
|
baseTemplate = '' +
|
||||||
@ -68,7 +69,7 @@ var Datepicker;
|
|||||||
this.el = el;
|
this.el = el;
|
||||||
this.$el = $(el);
|
this.$el = $(el);
|
||||||
|
|
||||||
this.opts = $.extend(true, {}, defaults, options);
|
this.opts = $.extend(true, {}, defaults, options, this.$el.data());
|
||||||
|
|
||||||
if ($body == undefined) {
|
if ($body == undefined) {
|
||||||
$body = $('body');
|
$body = $('body');
|
||||||
@ -124,7 +125,6 @@ var Datepicker;
|
|||||||
},
|
},
|
||||||
|
|
||||||
_createShortCuts: function () {
|
_createShortCuts: function () {
|
||||||
|
|
||||||
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
||||||
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
||||||
},
|
},
|
||||||
@ -710,4 +710,8 @@ var Datepicker;
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
$(autoInitSelector).datepicker();
|
||||||
|
})
|
||||||
|
|
||||||
})(window, jQuery);
|
})(window, jQuery);
|
||||||
@ -74,6 +74,7 @@ $pointerHalfSize: $pointerSize / 2 - 1;
|
|||||||
border-right: 1px solid $borderColor;
|
border-right: 1px solid $borderColor;
|
||||||
width: $pointerSize;
|
width: $pointerSize;
|
||||||
height: $pointerSize;
|
height: $pointerSize;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
// Main axis
|
// Main axis
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|||||||
@ -8,7 +8,7 @@ var gulp = require('gulp'),
|
|||||||
concat = require('gulp-concat');
|
concat = require('gulp-concat');
|
||||||
|
|
||||||
module.exports = function () {
|
module.exports = function () {
|
||||||
gulp.src('page/sass/*.scss')
|
gulp.src('page/sass/init.scss')
|
||||||
.pipe(concat('style.css'))
|
.pipe(concat('style.css'))
|
||||||
.pipe(sass().on('error', sass.logError))
|
.pipe(sass().on('error', sass.logError))
|
||||||
.pipe(postcss([autoprefixer]))
|
.pipe(postcss([autoprefixer]))
|
||||||
|
|||||||
@ -1,8 +1,19 @@
|
|||||||
var gulp = require('gulp'),
|
var gulp = require('gulp'),
|
||||||
|
_jade = require('gulp-jade/node_modules/jade'),
|
||||||
jade = require('gulp-jade');
|
jade = require('gulp-jade');
|
||||||
|
|
||||||
|
_jade.filters.code = function( block ) {
|
||||||
|
return block
|
||||||
|
.replace( /&/g, '&' )
|
||||||
|
.replace( /</g, '<' )
|
||||||
|
.replace( />/g, '>' )
|
||||||
|
.replace( /"/g, '"' )
|
||||||
|
.replace( /#/g, '#' )
|
||||||
|
.replace( /\\/g, '\\\\' );
|
||||||
|
};
|
||||||
|
|
||||||
module.exports = function () {
|
module.exports = function () {
|
||||||
gulp.src('page/jade/pages/*.jade')
|
gulp.src('page/jade/pages/*.jade')
|
||||||
.pipe(jade({pretty: true}))
|
.pipe(jade())
|
||||||
.pipe(gulp.dest('./'))
|
.pipe(gulp.dest('./'))
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user