diff --git a/css/style.css b/css/style.css deleted file mode 100644 index d5723b0a..00000000 --- a/css/style.css +++ /dev/null @@ -1,70 +0,0 @@ -/* ------------------------------------------------- - Reset - ------------------------------------------------- */ -applet, object, iframe, h1, h2, h3, h4, h5, h6, 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; } - -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; } - -b, strong { - font-weight: bold; } - -i { - font-style: italic; } - -a { - outline: none; } - -textarea { - overflow: auto; } - -/* ------------------------------------------------- - Page styles - ------------------------------------------------- */ -html { - font-family: Tahoma, sans-serif; - font-size: 13px; } - -.contents { - width: 960px; - margin: 0 auto; - padding: 1px 0; } - .contents article { - margin: 60px 0 30px; } diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index f3cf705a..82b93dc8 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -8,6 +8,107 @@ background: none; border: none; } +/* ------------------------------------------------- + Datepicker cells + ------------------------------------------------- */ +.datepicker--cells { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.datepicker--cell { + border-radius: 2px; + cursor: pointer; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 32px; + z-index: 1; } + .datepicker--cell:hover { + background: #eee; } + .datepicker--cell.-current- { + color: #60C4F5; } + .datepicker--cell.-current-:hover { + background: rgba(96, 196, 245, 0.05); } + .datepicker--cell.-disabled- { + cursor: default; + color: #ddd; + background: none; } + .datepicker--cell.-selected- { + color: #fff; + background: skyblue; } + .datepicker--cell.-selected-.-current- { + color: #fff; + background: skyblue; } + +.datepicker--days-names { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.datepicker--day-name { + color: #f5a33a; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + height: 32px; + text-align: center; + text-transform: uppercase; + font-size: 13px; } + +.datepicker--cell-day { + border-radius: 50%; + width: 14.28571%; } + +.datepicker--cells-months { + height: 170px; } + +.datepicker--cell-month { + width: 33.33%; + height: 25%; } + +.datepicker--years { + height: 170px; } + +.datepicker--cells-years { + height: 170px; } + +.datepicker--cell-year { + width: 25%; + height: 33.33%; } + +.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { + color: #ddd; + font-size: .9em; } + .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { + color: #fff; + background: #def2fa; } + .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { + background: none; + border: none; } + /* ------------------------------------------------- Datepicker ------------------------------------------------- */ @@ -21,30 +122,46 @@ border: 1px solid #ddd; border-radius: 2px; box-sizing: content-box; - width: 224px; + font-family: Tahoma, sans-serif; + font-size: 14px; + color: #4a4a4a; + width: 232px; position: absolute; left: -100000px; opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; } + 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; } .datepicker.-from-top- { - transform: translateY(-8px); } + -webkit-transform: translateY(-8px); + transform: translateY(-8px); } .datepicker.-from-right- { - transform: translateX(8px); } + -webkit-transform: translateX(8px); + transform: translateX(8px); } .datepicker.-from-bottom- { - transform: translateY(8px); } + -webkit-transform: translateY(8px); + transform: translateY(8px); } .datepicker.-from-left- { - transform: translateX(-8px); } + -webkit-transform: translateX(-8px); + transform: translateX(-8px); } .datepicker.active { opacity: 1; - transform: translate(0); - transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; } + -webkit-transform: translate(0); + transform: translate(0); + transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; + transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; } .datepicker-inline .datepicker { position: static; left: auto; right: auto; opacity: 1; - transform: none; } + -webkit-transform: none; + transform: none; } + +.datepicker-inline .datepicker--pointer { + display: none; } .datepicker--content { padding: 2px; } @@ -58,16 +175,20 @@ height: 10px; } .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer { top: calc(100% - 4px); - transform: rotate(135deg); } + -webkit-transform: rotate(135deg); + transform: rotate(135deg); } .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer { right: calc(100% - 4px); - transform: rotate(225deg); } + -webkit-transform: rotate(225deg); + transform: rotate(225deg); } .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer { bottom: calc(100% - 4px); - transform: rotate(315deg); } + -webkit-transform: rotate(315deg); + transform: rotate(315deg); } .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer { left: calc(100% - 4px); - transform: rotate(45deg); } + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer { left: 8px; } .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer { @@ -86,19 +207,6 @@ .datepicker--body.active { display: block; } -.datepicker--days-names { - display: flex; - flex-wrap: wrap; } - -.datepicker--day-name { - display: flex; - align-items: center; - justify-content: center; - flex: 1; - width: 32px; - height: 32px; - text-align: center; } - .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } @@ -113,18 +221,27 @@ Navigation ------------------------------------------------- */ .datepicker--nav { - border-bottom: 1px solid #ddd; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; padding: 2px; height: 32px; } .datepicker--nav-title, .datepicker--nav-action { + display: -webkit-flex; + display: -ms-flexbox; display: flex; cursor: pointer; - align-items: center; - justify-content: center; } + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .datepicker--nav-action { width: 32px; @@ -144,6 +261,8 @@ background: none; } .datepicker--buttons { + display: -webkit-flex; + display: -ms-flexbox; display: flex; margin: 0 1px 2px; } @@ -152,10 +271,18 @@ cursor: pointer; border-radius: 2px; margin: 0 1px; - flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; - justify-content: center; - align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; height: 24px; } .datepicker--button:hover { background: #eaeaea; } @@ -169,50 +296,3 @@ .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } - -/* ------------------------------------------------- - Datepicker cells - ------------------------------------------------- */ -.datepicker--cells { - display: flex; - flex-wrap: wrap; } - -.datepicker--cell { - border-radius: 2px; - color: #333; - cursor: pointer; - display: flex; - position: relative; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - z-index: 1; } - .datepicker--cell:hover { - background: #eee; } - .datepicker--cell.-current- { - color: #60C4F5; } - .datepicker--cell.-current-:hover { - background: rgba(96, 196, 245, 0.05); } - .datepicker--cell.-disabled- { - cursor: default; - color: #ddd; - background: none; } - .datepicker--cell.-selected- { - color: #fff; - background: skyblue; } - .datepicker--cell.-selected-.-current- { - color: #fff; - background: skyblue; } - -.datepicker--cell-day { - border-radius: 50%; - width: 14.28571%; } - -.datepicker--cell-month { - width: 33.33%; - height: 40px; } - -.datepicker--cell-year { - width: 25%; - height: 40px; } diff --git a/dist/css/datepicker.min.css b/dist/css/datepicker.min.css new file mode 100644 index 00000000..caddb9e7 --- /dev/null +++ b/dist/css/datepicker.min.css @@ -0,0 +1 @@ +.datepicker--cells{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker--cell{border-radius:2px;cursor:pointer;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:32px;z-index:1}.datepicker--cell:hover{background:#eee}.datepicker--cell.-current-{color:#60C4F5}.datepicker--cell.-current-:hover{background:rgba(96,196,245,.05)}.datepicker--cell.-disabled-{cursor:default;color:#ddd;background:0 0}.datepicker--cell.-selected-,.datepicker--cell.-selected-.-current-{color:#fff;background:#87ceeb}.datepicker--days-names{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker--day-name{color:#f5a33a;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:1;-ms-flex:1;flex:1;height:32px;text-align:center;text-transform:uppercase;font-size:13px}.datepicker--body,.datepicker-inline .datepicker--pointer{display:none}.datepicker--cell-day{border-radius:50%;width:14.28571%}.datepicker--cells-months{height:170px}.datepicker--cell-month{width:33.33%;height:25%}.datepicker--cells-years,.datepicker--years{height:170px}.datepicker--cell-year{width:25%;height:33.33%}.datepickers-container{position:absolute;left:0;top:0}.datepicker{background:#fff;border:1px solid #ddd;border-radius:2px;box-sizing:content-box;font-family:Tahoma,sans-serif;font-size:14px;color:#4a4a4a;width:232px;position:absolute;left:-100000px;opacity:0;transition:opacity .3s ease,left 0s .3s,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease,left 0s .3s;transition:opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease}.datepicker.-from-top-{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.datepicker.-from-right-{-webkit-transform:translateX(8px);transform:translateX(8px)}.datepicker.-from-bottom-{-webkit-transform:translateY(8px);transform:translateY(8px)}.datepicker.-from-left-{-webkit-transform:translateX(-8px);transform:translateX(-8px)}.datepicker.active{opacity:1;-webkit-transform:translate(0);transform:translate(0);transition:opacity .3s ease,left 0s 0s,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease,left 0s 0s;transition:opacity .3s ease,transform .3s ease,left 0s 0s,-webkit-transform .3s ease}.datepicker-inline .datepicker{position:static;left:auto;right:auto;opacity:1;-webkit-transform:none;transform:none}.datepicker--content{padding:2px}.datepicker--pointer{position:absolute;background:#fff;border-top:1px solid #ddd;border-right:1px solid #ddd;width:10px;height:10px}.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#eee}.-top-center- .datepicker--pointer,.-top-left- .datepicker--pointer,.-top-right- .datepicker--pointer{top:calc(100% - 4px);-webkit-transform:rotate(135deg);transform:rotate(135deg)}.-right-bottom- .datepicker--pointer,.-right-center- .datepicker--pointer,.-right-top- .datepicker--pointer{right:calc(100% - 4px);-webkit-transform:rotate(225deg);transform:rotate(225deg)}.-bottom-center- .datepicker--pointer,.-bottom-left- .datepicker--pointer,.-bottom-right- .datepicker--pointer{bottom:calc(100% - 4px);-webkit-transform:rotate(315deg);transform:rotate(315deg)}.-left-bottom- .datepicker--pointer,.-left-center- .datepicker--pointer,.-left-top- .datepicker--pointer{left:calc(100% - 4px);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.-bottom-left- .datepicker--pointer,.-top-left- .datepicker--pointer{left:8px}.-bottom-right- .datepicker--pointer,.-top-right- .datepicker--pointer{right:8px}.-bottom-center- .datepicker--pointer,.-top-center- .datepicker--pointer{left:calc(50% - 10px / 2)}.-left-top- .datepicker--pointer,.-right-top- .datepicker--pointer{top:8px}.-left-bottom- .datepicker--pointer,.-right-bottom- .datepicker--pointer{bottom:8px}.-left-center- .datepicker--pointer,.-right-center- .datepicker--pointer{top:calc(50% - 10px / 2)}.datepicker--body.active{display:block}.datepicker--nav{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:2px;height:32px}.datepicker--nav-action,.datepicker--nav-title{display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.datepicker--nav-action{width:32px;border-radius:2px}.datepicker--nav-action.-disabled-{visibility:hidden}.datepicker--nav-title{border-radius:2px;padding:0 8px}.datepicker--nav-title.-disabled-{cursor:default;background:0 0}.datepicker--buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1px 2px}.datepicker--button{background:#f2f2f2;cursor:pointer;border-radius:2px;margin:0 1px;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:24px}.datepicker--button:hover{background:#eaeaea}.datepicker--cell-day.-other-month-,.datepicker--cell-year.-other-decade-{color:#ddd;font-size:.9em}.-selected-.datepicker--cell-day.-other-month-,.-selected-.datepicker--cell-year.-other-decade-{color:#fff;background:#def2fa}.datepicker--cell-day.-other-month-:empty,.datepicker--cell-year.-other-decade-:empty{background:0 0;border:none} \ No newline at end of file diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index 66ca486c..3b11651f 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -711,147 +711,6 @@ var Datepicker; }; })(window, jQuery); -;(function () { - var template = '' + - '
#{prevHtml}
' + - '
#{title}
' + - '
#{nextHtml}
', - buttonsContainerTemplate = '
', - button = '#{label}'; - - Datepicker.Navigation = function (d, opts) { - this.d = d; - this.opts = opts; - - this.$buttonsContainer = ''; - - this.init(); - }; - - Datepicker.Navigation.prototype = { - init: function () { - this._buildBaseHtml(); - this._bindEvents(); - }, - - _bindEvents: function () { - this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this)); - this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this)); - this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this)); - }, - - _buildBaseHtml: function () { - this._render(); - this._addButtonsIfNeed(); - }, - - _addButtonsIfNeed: function () { - if (this.opts.todayButton) { - this._addButton('today') - } - if (this.opts.clearButton) { - this._addButton('clear') - } - }, - - _render: function () { - var title = this._getTitle(this.d.currentDate), - html = Datepicker.template(template, $.extend({title: title}, this.opts)); - - this.d.$nav.html(html); - if (this.d.view == 'years') { - $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-'); - } - this.setNavStatus(); - }, - - _getTitle: function (date) { - return this.d.formatDate(this.opts.navTitles[this.d.view], date) - }, - - _addButton: function (type) { - if (!this.$buttonsContainer.length) { - this._addButtonsContainer(); - } - - var data = { - action: type, - label: this.d.loc[type] - }, - html = Datepicker.template(button, data); - - this.$buttonsContainer.append(html); - }, - - _addButtonsContainer: function () { - this.d.$datepicker.append(buttonsContainerTemplate); - this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker); - }, - - setNavStatus: function () { - if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return; - - var date = this.d.parsedDate, - m = date.month, - y = date.year, - d = date.date; - - switch (this.d.view) { - case 'days': - if (!this.d._isInRange(new Date(y, m-1, d), 'month')) { - this._disableNav('prev') - } - if (!this.d._isInRange(new Date(y, m+1, d), 'month')) { - this._disableNav('next') - } - break; - case 'months': - if (!this.d._isInRange(new Date(y-1, m, d), 'year')) { - this._disableNav('prev') - } - if (!this.d._isInRange(new Date(y+1, m, d), 'year')) { - this._disableNav('next') - } - break; - case 'years': - if (!this.d._isInRange(new Date(y-10, m, d), 'year')) { - this._disableNav('prev') - } - if (!this.d._isInRange(new Date(y+10, m, d), 'year')) { - this._disableNav('next') - } - break; - } - }, - - _disableNav: function (nav) { - $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-') - }, - - _activateNav: function (nav) { - $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-') - }, - - _onClickNavButton: function (e) { - var $el = $(e.target), - action = $el.data('action'); - - this.d[action](); - }, - - _onClickNavTitle: function (e) { - if ($(e.target).hasClass('-disabled-')) return; - - if (this.d.view == 'days') { - return this.d.view = 'months' - } - - this.d.view = 'years'; - } - } - -})(); - ;(function () { var templates = { days:'' + @@ -1131,3 +990,144 @@ var Datepicker; } }; })(); + +;(function () { + var template = '' + + '
#{prevHtml}
' + + '
#{title}
' + + '
#{nextHtml}
', + buttonsContainerTemplate = '
', + button = '#{label}'; + + Datepicker.Navigation = function (d, opts) { + this.d = d; + this.opts = opts; + + this.$buttonsContainer = ''; + + this.init(); + }; + + Datepicker.Navigation.prototype = { + init: function () { + this._buildBaseHtml(); + this._bindEvents(); + }, + + _bindEvents: function () { + this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this)); + this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this)); + this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this)); + }, + + _buildBaseHtml: function () { + this._render(); + this._addButtonsIfNeed(); + }, + + _addButtonsIfNeed: function () { + if (this.opts.todayButton) { + this._addButton('today') + } + if (this.opts.clearButton) { + this._addButton('clear') + } + }, + + _render: function () { + var title = this._getTitle(this.d.currentDate), + html = Datepicker.template(template, $.extend({title: title}, this.opts)); + + this.d.$nav.html(html); + if (this.d.view == 'years') { + $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-'); + } + this.setNavStatus(); + }, + + _getTitle: function (date) { + return this.d.formatDate(this.opts.navTitles[this.d.view], date) + }, + + _addButton: function (type) { + if (!this.$buttonsContainer.length) { + this._addButtonsContainer(); + } + + var data = { + action: type, + label: this.d.loc[type] + }, + html = Datepicker.template(button, data); + + this.$buttonsContainer.append(html); + }, + + _addButtonsContainer: function () { + this.d.$datepicker.append(buttonsContainerTemplate); + this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker); + }, + + setNavStatus: function () { + if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return; + + var date = this.d.parsedDate, + m = date.month, + y = date.year, + d = date.date; + + switch (this.d.view) { + case 'days': + if (!this.d._isInRange(new Date(y, m-1, d), 'month')) { + this._disableNav('prev') + } + if (!this.d._isInRange(new Date(y, m+1, d), 'month')) { + this._disableNav('next') + } + break; + case 'months': + if (!this.d._isInRange(new Date(y-1, m, d), 'year')) { + this._disableNav('prev') + } + if (!this.d._isInRange(new Date(y+1, m, d), 'year')) { + this._disableNav('next') + } + break; + case 'years': + if (!this.d._isInRange(new Date(y-10, m, d), 'year')) { + this._disableNav('prev') + } + if (!this.d._isInRange(new Date(y+10, m, d), 'year')) { + this._disableNav('next') + } + break; + } + }, + + _disableNav: function (nav) { + $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-') + }, + + _activateNav: function (nav) { + $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-') + }, + + _onClickNavButton: function (e) { + var $el = $(e.target), + action = $el.data('action'); + + this.d[action](); + }, + + _onClickNavTitle: function (e) { + if ($(e.target).hasClass('-disabled-')) return; + + if (this.d.view == 'days') { + return this.d.view = 'months' + } + + this.d.view = 'years'; + } + } + +})(); diff --git a/dist/js/datepicker.min.js b/dist/js/datepicker.min.js new file mode 100644 index 00000000..5fd08c63 --- /dev/null +++ b/dist/js/datepicker.min.js @@ -0,0 +1 @@ +var Datepicker;!function(t,e,i){var s,a,n="datepicker",r=!1,h='
',o={inline:!1,language:"ru",startDate:new Date,firstDay:"",weekends:[6,0],dateFormat:"",toggleSelected:!0,position:"bottom left",offset:12,view:"days",minView:"days",showOtherMonths:!0,selectOtherMonths:!0,moveToOtherMonthsOnSelect:!0,showOtherYears:!0,selectOtherYears:!0,moveToOtherYearsOnSelect:!0,minDate:"",maxDate:"",disableNavWhenOutOfRange:!0,multipleDates:!1,multipleDatesSeparator:",",todayButton:!1,clearButton:!1,showEvent:"focus",autoClose:!1,prevHtml:"«",nextHtml:"»",navTitles:{days:"MM, yyyy",months:"yyyy",years:"yyyy1 - yyyy2"},onSelect:"",onChangeMonth:"",onChangeYear:"",onChangeDecade:"",onChangeView:"",onRenderCell:""};Datepicker=function(t,a){this.el=t,this.$el=e(t),this.opts=e.extend(!0,{},o,a),s==i&&(s=e("body")),this.opts.startDate||(this.opts.startDate=new Date),"INPUT"==this.el.nodeName&&(this.elIsInput=!0),this.inited=!1,this.visible=!1,this.silent=!1,this.currentDate=this.opts.startDate,this.currentView=this.opts.view,this._createShortCuts(),this.selectedDates=[],this.views={},this.init()},Datepicker.prototype={viewIndexes:["days","months","years"],init:function(){r||this.opts.inline||!this.elIsInput||this._buildDatepickersContainer(),this._buildBaseHtml(),this._defineLocale(this.opts.language),this._syncWithMinMaxDates(),this.elIsInput&&(this.opts.inline||(this._setPositionClasses(this.opts.position),this._bindEvents())),this.views[this.currentView]=new Datepicker.Body(this,this.currentView,this.opts),this.views[this.currentView].show(),this.nav=new Datepicker.Navigation(this,this.opts),this.view=this.currentView,this.inited=!0},_createShortCuts:function(){this.minDate=this.opts.minDate?this.opts.minDate:new Date(-86399999136e5),this.maxDate=this.opts.maxDate?this.opts.maxDate:new Date(86399999136e5)},_bindEvents:function(){this.$el.on(this.opts.showEvent,this._onShowEvent.bind(this)),this.$el.on("blur",this._onBlur.bind(this)),this.$datepicker.on("mousedown",this._onMouseDownDatepicker.bind(this)),this.$datepicker.on("mouseup",this._onMouseUpDatepicker.bind(this))},isWeekend:function(t){return-1!==this.opts.weekends.indexOf(t)},_defineLocale:function(t){"string"==typeof t?(this.loc=Datepicker.language[t],this.loc||(console.warn("Can't find language \""+t+'" in Datepicker.language, will use "ru" instead'),this.loc=Datepicker.language.ru)):this.loc=e.extend({},Datepicker.language.ru,t),this.opts.dateFormat&&(this.loc.dateFormat=this.opts.dateFormat),this.opts.firstDay&&(this.loc.firstDay=this.opts.firstDay)},_buildDatepickersContainer:function(){r=!0,s.append('
'),a=e("#datepickers-container")},_buildBaseHtml:function(){var t,i=e('
');t="INPUT"==this.el.nodeName?this.opts.inline?i.insertAfter(this.$el):a:i.insertAfter(this.$el),this.$datepicker=e(h).appendTo(t),this.$content=e(".datepicker--content",this.$datepicker),this.$nav=e(".datepicker--nav",this.$datepicker)},_triggerOnChange:function(){if(!this.selectedDates.length)return this.opts.onSelect("","",this);var t,e=this.selectedDates,i=Datepicker.getParsedDate(e[0]),s=this,a=new Date(i.year,i.month,i.date);t=e.map(function(t){return s.formatDate(s.loc.dateFormat,t)}).join(this.opts.multipleDatesSeparator),this.opts.multipleDates&&(a=e.map(function(t){var e=Datepicker.getParsedDate(t);return new Date(e.year,e.month,e.date)})),this.opts.onSelect(t,a,this)},next:function(){var t=this.parsedDate,e=this.opts;switch(this.view){case"days":this.date=new Date(t.year,t.month+1,1),e.onChangeMonth&&e.onChangeMonth(t.month+1);break;case"months":this.date=new Date(t.year+1,t.month,1),e.onChangeYear&&e.onChangeYear(t.year+1);break;case"years":this.date=new Date(t.year+10,0,1),e.onChangeDecade&&e.onChangeDecade(this.curDecade)}},prev:function(){var t=this.parsedDate,e=this.opts;switch(this.view){case"days":this.date=new Date(t.year,t.month-1,1),e.onChangeMonth&&e.onChangeMonth(t.month-1);break;case"months":this.date=new Date(t.year-1,t.month,1),e.onChangeYear&&e.onChangeYear(t.year-1);break;case"years":this.date=new Date(t.year-10,0,1),e.onChangeDecade&&e.onChangeDecade(this.curDecade)}},formatDate:function(t,e){e=e||this.date;var i=t,s=this.loc,a=Datepicker.getDecade(e),n=Datepicker.getParsedDate(e);switch(!0){case/dd/.test(i):i=i.replace(/\bdd\b/,n.fullDate);case/d/.test(i):i=i.replace(/\bd\b/,n.date);case/DD/.test(i):i=i.replace(/\bDD\b/,s.days[n.day]);case/D/.test(i):i=i.replace(/\bD\b/,s.daysShort[n.day]);case/mm/.test(i):i=i.replace(/\bmm\b/,n.fullMonth);case/m/.test(i):i=i.replace(/\bm\b/,n.month+1);case/MM/.test(i):i=i.replace(/\bMM\b/,this.loc.months[n.month]);case/M/.test(i):i=i.replace(/\bM\b/,s.monthsShort[n.month]);case/yyyy/.test(i):i=i.replace(/\byyyy\b/,n.year);case/yyyy1/.test(i):i=i.replace(/\byyyy1\b/,a[0]);case/yyyy2/.test(i):i=i.replace(/\byyyy2\b/,a[1]);case/yy/.test(i):i=i.replace(/\byy\b/,n.year.toString().slice(-2))}return i},selectDate:function(t){var e=this.parsedDate,i="";if("days"==this.view&&t.getMonth()!=e.month&&this.opts.moveToOtherMonthsOnSelect&&(i=new Date(t.getFullYear(),t.getMonth(),1)),"years"==this.view&&t.getFullYear()!=e.year&&this.opts.moveToOtherYearsOnSelect&&(i=new Date(t.getFullYear(),0,1)),i&&(this.silent=!0,this.date=i,this.silent=!1,this.nav._render()),this.opts.multipleDates){if(this.selectedDates.length===this.opts.multipleDates)return;this._isSelected(t)||this.selectedDates.push(t)}else this.selectedDates=[t];this._setInputValue(),this.opts.onSelect&&this._triggerOnChange(),this.opts.autoClose?this.hide():this.views[this.currentView]._render()},removeDate:function(t){var e=this.selectedDates,i=this;return e.some(function(s,a){return Datepicker.isSame(s,t)?(e.splice(a,1),i.views[i.currentView]._render(),i._setInputValue(),i.opts.onSelect&&i._triggerOnChange(),!0):void 0})},today:function(){this.silent=!0,this.view=this.opts.minView,this.silent=!1,this.date=new Date},clear:function(){this.selectedDates=[],this.views[this.currentView]._render(),this._triggerOnChange()},update:function(t,i){var s=arguments.length;return 2==s?this.opts[t]=i:1==s&&"object"==typeof t&&(this.opts=e.extend(!0,this.opts,t)),this._createShortCuts(),this._syncWithMinMaxDates(),this._defineLocale(this.opts.language),this.nav._addButtonsIfNeed(),this.nav._render(),this.views[this.currentView]._render(),this.elIsInput&&!this.opts.inline&&(this._setPositionClasses(this.opts.position),this.visible&&this.setPosition(this.opts.position)),this},_syncWithMinMaxDates:function(){var t=this.date.getTime();this.silent=!0,this.minTime>t&&(this.date=this.minDate),this.maxTime=this.minTime&&i<=this.maxTime,month:r>=this.minTime&&h<=this.maxTime,year:s.year>=a.year&&s.year<=n.year};return e?o[e]:o.day},_getDimensions:function(t){var e=t.offset();return{width:t.outerWidth(),height:t.outerHeight(),left:e.left,top:e.top}},_setPositionClasses:function(t){t=t.split(" ");var e=t[0],i=t[1],s="datepicker -"+e+"-"+i+"- -from-"+e+"-";this.visible&&(s+=" active"),this.$datepicker.removeAttr("class").addClass(s)},setPosition:function(t){var e,i,s=this._getDimensions(this.$el),a=this._getDimensions(this.$datepicker),n=t.split(" "),r=this.opts.offset,h=n[0],o=n[1];switch(h){case"top":e=s.top-a.height-r;break;case"right":i=s.left+s.width+r;break;case"bottom":e=s.top+s.height+r;break;case"left":i=s.left-a.width-r}switch(o){case"top":e=s.top;break;case"right":i=s.left+s.width-a.width;break;case"bottom":e=s.top+s.height-a.height;break;case"left":i=s.left;break;case"center":/left|right/.test(h)?e=s.top+s.height/2-a.height/2:i=s.left+s.width/2-a.width/2}this.$datepicker.css({left:i,top:e})},show:function(){this.setPosition(this.opts.position),this.$datepicker.addClass("active"),this.visible=!0},hide:function(){this.$datepicker.removeClass("active").css({left:"-100000px"}),this.inFocus=!1,this.visible=!1,this.$el.blur()},_onShowEvent:function(){this.visible||this.show()},_onBlur:function(){!this.inFocus&&this.visible&&this.hide()},_onMouseDownDatepicker:function(t){this.inFocus=!0},_onMouseUpDatepicker:function(t){this.inFocus=!1,this.$el.focus()},get parsedDate(){return Datepicker.getParsedDate(this.date)},set date(t){return this.currentDate=t,this.inited&&!this.silent&&(this.views[this.view]._render(),this.nav._render()),t},get date(){return this.currentDate},set view(t){return this.viewIndex=this.viewIndexes.indexOf(t),this.viewIndex<0?void 0:(this.prevView=this.currentView,this.currentView=t,this.inited&&(this.views[t]?this.views[t]._render():this.views[t]=new Datepicker.Body(this,t,this.opts),this.views[this.prevView].hide(),this.views[t].show(),this.nav._render(),this.opts.onChangeView&&this.opts.onChangeView(t),this.setPosition(this.opts.position)),t)},get view(){return this.currentView},get cellType(){return this.view.substring(0,this.view.length-1)},get minTime(){var t=Datepicker.getParsedDate(this.minDate);return new Date(t.year,t.month,t.date).getTime()},get maxTime(){var t=Datepicker.getParsedDate(this.maxDate);return new Date(t.year,t.month,t.date).getTime()},get curDecade(){return Datepicker.getDecade(this.date)}},Datepicker.getDaysCount=function(t){return new Date(t.getFullYear(),t.getMonth()+1,0).getDate()},Datepicker.getParsedDate=function(t){return{year:t.getFullYear(),month:t.getMonth(),fullMonth:t.getMonth()+1<10?"0"+(t.getMonth()+1):t.getMonth()+1,date:t.getDate(),fullDate:t.getDate()<10?"0"+t.getDate():t.getDate(),day:t.getDay()}},Datepicker.getDecade=function(t){var e=10*Math.floor(t.getFullYear()/10);return[e,e+9]},Datepicker.template=function(t,e){return t.replace(/#\{([\w]+)\}/g,function(t,i){return e[i]||0===e[i]?e[i]:void 0})},Datepicker.isSame=function(t,e,i){var s=Datepicker.getParsedDate(t),a=Datepicker.getParsedDate(e),n=i?i:"day",r={day:s.date==a.date&&s.month==a.month&&s.year==a.year,month:s.month==a.month&&s.year==a.year,year:s.year==a.year};return r[n]},Datepicker.language={ru:{days:["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],daysShort:["Вос","Пон","Вто","Сре","Чет","Пят","Суб"],daysMin:["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],months:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],monthsShort:["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],today:"Сегодня",clear:"Очистить",dateFormat:"dd.mm.yyyy",firstDay:1}},e.fn[n]=function(t){return Datepicker.prototype[t]?void Datepicker.prototype[t].apply(this.data(n),Array.prototype.slice.call(arguments,1)):this.each(function(){if(e.data(this,n)){var i=e.data(this,n),s=i.opts;i.opts=e.extend({},s,t)}else e.data(this,n,new Datepicker(this,t))})}}(window,jQuery),function(){var t={days:'
',months:'
',years:'
'};Datepicker.Body=function(t,e,i){this.d=t,this.type=e,this.opts=i,this.init()},Datepicker.Body.prototype={init:function(){this._buildBaseHtml(),this._render(),this._bindEvents()},_bindEvents:function(){this.$el.on("click",".datepicker--cell",$.proxy(this._onClickCell,this))},_buildBaseHtml:function(){this.$el=$(t[this.type]).appendTo(this.d.$content),this.$names=$(".datepicker--days-names",this.$el),this.$cells=$(".datepicker--cells",this.$el)},_getDayNamesHtml:function(t,e,i,s){return e=void 0!=e?e:t,i=i?i:"",s=void 0!=s?s:0,s>7?i:7==e?this._getDayNamesHtml(t,0,i,++s):(i+='
'+this.d.loc.daysMin[e]+"
",this._getDayNamesHtml(t,++e,i,++s))},_getDaysHtml:function(t){var e=Datepicker.getDaysCount(t),i=new Date(t.getFullYear(),t.getMonth(),1).getDay(),s=new Date(t.getFullYear(),t.getMonth(),e).getDay(),a=i-this.d.loc.firstDay,n=6-s+this.d.loc.firstDay;a=0>a?a+7:a,n=n>6?n-7:n;for(var r,h,o=-a+1,d="",c=o,l=e+n;l>=c;c++)h=t.getFullYear(),r=t.getMonth(),d+=this._getDayHtml(new Date(h,r,c));return d},_getDayHtml:function(t){var e="datepicker--cell datepicker--cell-day",i=new Date,s=Datepicker.getParsedDate(t),a={},n=s.date;return this.opts.onRenderCell&&(a=this.opts.onRenderCell(t,"day")||{},n=a.html?a.html:n,e+=a.classes?" "+a.classes:""),this.d.isWeekend(s.day)&&(e+=" -weekend-"),Datepicker.isSame(i,t)&&(e+=" -current-"),this.d._isSelected(t,"day")&&(e+=" -selected-"),(!this.d._isInRange(t)||a.disabled)&&(e+=" -disabled-"),s.month!=this.d.parsedDate.month&&(e+=" -other-month-",this.opts.selectOtherMonths||(e+=" -disabled-"),this.opts.showOtherMonths||(n="")),'
'+n+"
"},_getMonthsHtml:function(t){for(var e="",i=Datepicker.getParsedDate(t),s=0;12>s;)e+=this._getMonthHtml(new Date(i.year,s)),s++;return e},_getMonthHtml:function(t){var e="datepicker--cell datepicker--cell-month",i=Datepicker.getParsedDate(t),s=new Date,a=this.d.loc,n=a.months[i.month],r={};return this.opts.onRenderCell&&(r=this.opts.onRenderCell(t,"month")||{},n=r.html?r.html:n,e+=r.classes?" "+r.classes:""),Datepicker.isSame(s,t,"month")&&(e+=" -current-"),this.d._isSelected(t,"month")&&(e+=" -selected-"),(!this.d._isInRange(t,"month")||r.disabled)&&(e+=" -disabled-"),'
'+n+"
"},_getYearsHtml:function(t){var e=(Datepicker.getParsedDate(t),Datepicker.getDecade(t)),i=e[0]-1,s="",a=i;for(a;a<=e[1]+1;a++)s+=this._getYearHtml(new Date(a,0));return s},_getYearHtml:function(t){var e="datepicker--cell datepicker--cell-year",i=Datepicker.getDecade(this.d.date),s=new Date,a=Datepicker.getParsedDate(t),n=a.year,r={};return this.opts.onRenderCell&&(r=this.opts.onRenderCell(t,"year")||{},n=r.html?r.html:n,e+=r.classes?" "+r.classes:""),(a.yeari[1])&&(e+=" -other-decade-",this.opts.selectOtherYears||(e+=" -disabled-"),this.opts.showOtherYears||(n="")),Datepicker.isSame(s,t,"year")&&(e+=" -current-"),this.d._isSelected(t,"year")&&(e+=" -selected-"),(!this.d._isInRange(t,"year")||r.disabled)&&(e+=" -disabled-"),'
'+n+"
"},_renderTypes:{days:function(){var t=this._getDayNamesHtml(this.d.loc.firstDay),e=this._getDaysHtml(this.d.currentDate);this.$cells.html(e),this.$names.html(t)},months:function(){var t=this._getMonthsHtml(this.d.currentDate);this.$cells.html(t)},years:function(){var t=this._getYearsHtml(this.d.currentDate);this.$cells.html(t)}},_render:function(){this._renderTypes[this.type].bind(this)()},show:function(){this.$el.addClass("active"),this.acitve=!0},hide:function(){this.$el.removeClass("active"),this.active=!1},_handleClick:function(t){var e=t.data("date")||1,i=t.data("month")||0,s=t.data("year")||this.d.parsedDate.year;if(this.d.view!=this.opts.minView){var a=this.d.viewIndex-1;return this.d.silent=!0,this.d.date=new Date(s,i,e),this.d.silent=!1,void(this.d.view=this.d.viewIndexes[a])}var n=new Date(s,i,e),r=this.d._isSelected(n,this.d.cellType);r?r&&this.opts.toggleSelected&&this.d.removeDate(n):this.d.selectDate(n)},_onClickCell:function(t){var e=$(t.target).closest(".datepicker--cell");e.hasClass("-disabled-")||this._handleClick.bind(this)(e)}}}(),function(){var t='
#{prevHtml}
#{title}
#{nextHtml}
',e='
',i='#{label}';Datepicker.Navigation=function(t,e){this.d=t,this.opts=e,this.$buttonsContainer="",this.init()},Datepicker.Navigation.prototype={init:function(){this._buildBaseHtml(),this._bindEvents()},_bindEvents:function(){this.d.$nav.on("click",".datepicker--nav-action",$.proxy(this._onClickNavButton,this)),this.d.$nav.on("click",".datepicker--nav-title",$.proxy(this._onClickNavTitle,this)),this.d.$datepicker.on("click",".datepicker--button",$.proxy(this._onClickNavButton,this))},_buildBaseHtml:function(){this._render(),this._addButtonsIfNeed()},_addButtonsIfNeed:function(){this.opts.todayButton&&this._addButton("today"),this.opts.clearButton&&this._addButton("clear")},_render:function(){var e=this._getTitle(this.d.currentDate),i=Datepicker.template(t,$.extend({title:e},this.opts));this.d.$nav.html(i),"years"==this.d.view&&$(".datepicker--nav-title",this.d.$nav).addClass("-disabled-"),this.setNavStatus()},_getTitle:function(t){return this.d.formatDate(this.opts.navTitles[this.d.view],t)},_addButton:function(t){this.$buttonsContainer.length||this._addButtonsContainer();var e={action:t,label:this.d.loc[t]},s=Datepicker.template(i,e);this.$buttonsContainer.append(s)},_addButtonsContainer:function(){this.d.$datepicker.append(e),this.$buttonsContainer=$(".datepicker--buttons",this.d.$datepicker)},setNavStatus:function(){if((this.opts.minDate||this.opts.maxDate)&&this.opts.disableNavWhenOutOfRange){var t=this.d.parsedDate,e=t.month,i=t.year,s=t.date;switch(this.d.view){case"days":this.d._isInRange(new Date(i,e-1,s),"month")||this._disableNav("prev"),this.d._isInRange(new Date(i,e+1,s),"month")||this._disableNav("next");break;case"months":this.d._isInRange(new Date(i-1,e,s),"year")||this._disableNav("prev"),this.d._isInRange(new Date(i+1,e,s),"year")||this._disableNav("next");break;case"years":this.d._isInRange(new Date(i-10,e,s),"year")||this._disableNav("prev"),this.d._isInRange(new Date(i+10,e,s),"year")||this._disableNav("next")}}},_disableNav:function(t){$('[data-action="'+t+'"]',this.d.$nav).addClass("-disabled-")},_activateNav:function(t){$('[data-action="'+t+'"]',this.d.$nav).removeClass("-disabled-")},_onClickNavButton:function(t){var e=$(t.target),i=e.data("action");this.d[i]()},_onClickNavTitle:function(t){return $(t.target).hasClass("-disabled-")?void 0:"days"==this.d.view?this.d.view="months":void(this.d.view="years")}}}(); \ No newline at end of file diff --git a/js/datepicker/i18n/datepicker.en.js b/dist/js/i18n/datepicker.en.js similarity index 100% rename from js/datepicker/i18n/datepicker.en.js rename to dist/js/i18n/datepicker.en.js diff --git a/gulpfile.js b/gulpfile.js index de736992..54b0c255 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,56 +1,30 @@ var gulp = require('gulp'), watch = require('gulp-watch'), - rename = require('gulp-rename'), - sass = require('gulp-sass'), - uglify = require('gulp-uglify'), - livereload = require('gulp-livereload'), - concat = require('gulp-concat'); - -gulp.task('js', function () { - gulp.src(['js/datepicker/datepicker.js', - 'js/datepicker/navigation.js', - 'js/datepicker/body.js']) - .pipe(concat('datepicker.js')) - .pipe(gulp.dest('dist/js/')) - .pipe(livereload()) -}); - -gulp.task('sass', function () { - gulp.src('sass/datepicker.scss') - .pipe(sass().on('error', sass.logError)) - .pipe(rename('datepicker.css')) - .pipe(gulp.dest('dist/css/')) - .pipe(livereload()) -}); + livereload = require('gulp-livereload'); -gulp.task('locale', function () { - gulp.src('js/datepicker/i18n/*.js') - .pipe(gulp.dest('dist/js/i18n')) -}); +gulp.task('css', require('./tasks/css')); +gulp.task('js', require('./tasks/js')); +gulp.task('i18n', require('./tasks/i18n')); +gulp.task('cssPage', require('./tasks/cssPage')); -gulp.task('build', ['js', 'sass', 'locale']); -gulp.task('pageSass', function () { - gulp.src('sass/page-init.scss') - .pipe(sass().on('error', sass.logError)) - .pipe(rename('style.css')) - .pipe(gulp.dest('css/')) - .pipe(livereload()) -}); gulp.task('watch', function () { livereload.listen(); - gulp.watch('sass/**/*.scss', ['pageSass', 'sass']).on('change', function (file) { + gulp.watch('src/sass/*.scss', ['css']).on('change', function (file) { + livereload.changed(file) + }); + + gulp.watch('src/js/**/*.js', ['js']).on('change', function (file) { livereload.changed(file) }); - gulp.watch('js/**/*.js', ['js']).on('change', function (file) { + gulp.watch('page/sass/*.scss', ['cssPage']).on('change', function (file) { livereload.changed(file) }); }); -gulp.task('default', ['build', 'pageSass', 'watch']); diff --git a/index.html b/index.html index e78d36e5..8c69dbf3 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Datepicker - + @@ -40,14 +40,15 @@