From 03e2105231f22f42cbb9e710f1469697981e265d Mon Sep 17 00:00:00 2001 From: t1m0n Date: Fri, 27 Nov 2015 17:53:01 +0300 Subject: [PATCH] change text colors, padding, add description --- dist/css/datepicker.css | 109 ++++++++++++++++++------------- dist/css/datepicker.min.css | 2 +- dist/js/datepicker.js | 9 +-- dist/js/datepicker.min.js | 2 +- index-ru.html | 26 +++++--- page/css/style.css | 2 +- page/jade/pages/index-ru.jade | 55 +++++++++++----- page/sass/_page.scss | 22 +++---- src/js/body.js | 2 +- src/js/datepicker.js | 7 +- src/sass/_datepicker-config.scss | 55 ++++++++++------ src/sass/cell.scss | 18 ++--- src/sass/datepicker.scss | 10 ++- src/sass/navigation.scss | 26 +++++--- 14 files changed, 214 insertions(+), 131 deletions(-) diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index dc6c38d..a55ea0b 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -1,9 +1,12 @@ .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { - color: #ddd; - font-size: .9em; } + color: #dedede; } + .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { + color: #c5c5c5; } + .-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover { + color: #dedede; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; - background: #def2fa; } + background: #a2ddf6; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } @@ -20,7 +23,7 @@ flex-wrap: wrap; } .datepicker--cell { - border-radius: 2px; + border-radius: 4px; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; @@ -37,19 +40,19 @@ .datepicker--cell:hover { background: #eee; } .datepicker--cell.-current- { - color: #60C4F5; } + color: #4EB5E6; } .datepicker--cell.-current-:hover { - background: rgba(96, 196, 245, 0.05); } + color: #4a4a4a; } .datepicker--cell.-disabled- { cursor: default; - color: #ddd; + color: #aeaeae; background: none; } .datepicker--cell.-selected- { color: #fff; - background: skyblue; } + background: #5cc4ef; } .datepicker--cell.-selected-.-current- { color: #fff; - background: skyblue; } + background: #5cc4ef; } .datepicker--days-names { display: -webkit-flex; @@ -57,10 +60,11 @@ display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; - flex-wrap: wrap; } + flex-wrap: wrap; + margin: 8px 0 3px; } .datepicker--day-name { - color: #f5a33a; + color: #FF9A19; display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -73,13 +77,11 @@ -webkit-flex: 1; -ms-flex: 1; flex: 1; - height: 32px; text-align: center; text-transform: uppercase; - font-size: 13px; } + font-size: .8em; } .datepicker--cell-day { - border-radius: 50%; width: 14.28571%; } .datepicker--cells-months { @@ -100,11 +102,14 @@ height: 33.33%; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { - color: #ddd; - font-size: .9em; } + color: #dedede; } + .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { + color: #c5c5c5; } + .-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover { + color: #dedede; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; - background: #def2fa; } + background: #a2ddf6; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } @@ -119,13 +124,14 @@ .datepicker { background: #fff; - border: 1px solid #ddd; - border-radius: 2px; + border: 1px solid #cccccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + border-radius: 4px; box-sizing: content-box; font-family: Tahoma, sans-serif; font-size: 14px; color: #4a4a4a; - width: 232px; + width: 250px; position: absolute; left: -100000px; opacity: 0; @@ -153,6 +159,8 @@ transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; } .datepicker-inline .datepicker { + border-color: #d7d7d7; + box-shadow: none; position: static; left: auto; right: auto; @@ -164,13 +172,14 @@ display: none; } .datepicker--content { - padding: 2px; } + box-sizing: content-box; + padding: 4px; } .datepicker--pointer { position: absolute; background: #fff; - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; + border-top: 1px solid #cccccc; + border-right: 1px solid #cccccc; width: 10px; height: 10px; z-index: -1; } @@ -191,15 +200,15 @@ -webkit-transform: rotate(45deg); transform: rotate(45deg); } .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer { - left: 8px; } + left: 10px; } .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer { - right: 8px; } + right: 10px; } .-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer { left: calc(50% - 10px / 2); } .-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer { - top: 8px; } + top: 10px; } .-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer { - bottom: 8px; } + bottom: 10px; } .-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer { top: calc(50% - 10px / 2); } @@ -209,11 +218,14 @@ display: block; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { - color: #ddd; - font-size: .9em; } + color: #dedede; } + .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { + color: #c5c5c5; } + .-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover { + color: #dedede; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; - background: #def2fa; } + background: #a2ddf6; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } @@ -228,8 +240,9 @@ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - padding: 2px; - height: 32px; } + border-bottom: 1px solid #f4f4f4; + min-height: 32px; + padding: 4px; } .datepicker--nav-title, .datepicker--nav-action { @@ -246,7 +259,7 @@ .datepicker--nav-action { width: 32px; - border-radius: 2px; + border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -260,12 +273,16 @@ height: 32px; } .datepicker--nav-action path { fill: none; - stroke: #bdbdbd; + stroke: #9c9c9c; stroke-width: 2px; } .datepicker--nav-title { - border-radius: 2px; + border-radius: 4px; padding: 0 8px; } + .datepicker--nav-title i { + font-style: normal; + color: #9c9c9c; + margin-left: 5px; } .datepicker--nav-title:hover { background: #eee; } .datepicker--nav-title.-disabled- { @@ -276,13 +293,13 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; - margin: 0 1px 2px; } + padding: 4px; + border-top: 1px solid #f4f4f4; } .datepicker--button { - background: #f2f2f2; + color: #4EB5E6; cursor: pointer; - border-radius: 2px; - margin: 0 1px; + border-radius: 4px; -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -295,16 +312,20 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; - height: 24px; } + height: 32px; } .datepicker--button:hover { - background: #eaeaea; } + color: #4a4a4a; + background: #eee; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { - color: #ddd; - font-size: .9em; } + color: #dedede; } + .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { + color: #c5c5c5; } + .-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover { + color: #dedede; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; - background: #def2fa; } + background: #a2ddf6; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } diff --git a/dist/css/datepicker.min.css b/dist/css/datepicker.min.css index bbf9b3a..5d1aa88 100644 --- a/dist/css/datepicker.min.css +++ b/dist/css/datepicker.min.css @@ -1 +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;z-index:-1}.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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker--nav-action.-disabled-{visibility:hidden}.datepicker--nav-action svg{width:32px;height:32px}.datepicker--nav-action path{fill:none;stroke:#bdbdbd;stroke-width:2px}.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 +.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:4px;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:#4EB5E6}.datepicker--cell.-current-:hover{color:#4a4a4a}.datepicker--cell.-disabled-{cursor:default;color:#aeaeae;background:0 0}.datepicker--cell.-selected-,.datepicker--cell.-selected-.-current-{color:#fff;background:#5cc4ef}.datepicker--days-names{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:8px 0 3px}.datepicker--day-name{color:#FF9A19;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;text-align:center;text-transform:uppercase;font-size:.8em}.datepicker--body,.datepicker-inline .datepicker--pointer{display:none}.datepicker--cell-day{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 #ccc;box-shadow:0 2px 8px rgba(0,0,0,.2);border-radius:4px;box-sizing:content-box;font-family:Tahoma,sans-serif;font-size:14px;color:#4a4a4a;width:250px;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{border-color:#d7d7d7;box-shadow:none;position:static;left:auto;right:auto;opacity:1;-webkit-transform:none;transform:none}.datepicker--content{box-sizing:content-box;padding:4px}.datepicker--pointer{position:absolute;background:#fff;border-top:1px solid #ccc;border-right:1px solid #ccc;width:10px;height:10px;z-index:-1}.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:10px}.-bottom-right- .datepicker--pointer,.-top-right- .datepicker--pointer{right:10px}.-bottom-center- .datepicker--pointer,.-top-center- .datepicker--pointer{left:calc(50% - 10px / 2)}.-left-top- .datepicker--pointer,.-right-top- .datepicker--pointer{top:10px}.-left-bottom- .datepicker--pointer,.-right-bottom- .datepicker--pointer{bottom:10px}.-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;border-bottom:1px solid #f4f4f4;min-height:32px;padding:4px}.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:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker--nav-action.-disabled-{visibility:hidden}.datepicker--nav-action svg{width:32px;height:32px}.datepicker--nav-action path{fill:none;stroke:#9c9c9c;stroke-width:2px}.datepicker--nav-title{border-radius:4px;padding:0 8px}.datepicker--nav-title i{font-style:normal;color:#9c9c9c;margin-left:5px}.datepicker--nav-title.-disabled-{cursor:default;background:0 0}.datepicker--buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px;border-top:1px solid #f4f4f4}.datepicker--button{color:#4EB5E6;cursor:pointer;border-radius:4px;-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:32px}.datepicker--button:hover{color:#4a4a4a;background:#eee}.datepicker--cell-day.-other-month-,.datepicker--cell-year.-other-decade-{color:#dedede}.datepicker--cell-day.-other-month-:hover,.datepicker--cell-year.-other-decade-:hover{color:#c5c5c5}.-disabled-.datepicker--cell-day.-other-month-:hover,.-disabled-.datepicker--cell-year.-other-decade-:hover{color:#dedede}.-selected-.datepicker--cell-day.-other-month-,.-selected-.datepicker--cell-year.-other-decade-{color:#fff;background:#a2ddf6}.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 56b057e..850feb1 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -48,10 +48,11 @@ var Datepicker; autoClose: false, // navigation + monthsFiled: 'monthsShort', prevHtml: '', nextHtml: '', navTitles: { - days: 'MM, yyyy', + days: 'MM, yyyy', months: 'yyyy', years: 'yyyy1 - yyyy2' }, @@ -148,7 +149,7 @@ var Datepicker; this.loc = $.extend(true, {}, Datepicker.language.ru) } - this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru) + this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang]) } else { this.loc = $.extend(true, {}, Datepicker.language.ru, lang) } @@ -179,7 +180,7 @@ var Datepicker; $appendTarget = $inline.insertAfter(this.$el) } } else { - $appendTarget = $inline.insertAfter(this.$el) + $appendTarget = $inline.appendTo(this.$el) } this.$datepicker = $(baseTemplate).appendTo($appendTarget); @@ -866,7 +867,7 @@ var Datepicker; d = Datepicker.getParsedDate(date), currentDate = new Date(), loc = this.d.loc, - html = loc.months[d.month], + html = loc[this.opts.monthsFiled][d.month], render = {}; if (this.opts.onRenderCell) { diff --git a/dist/js/datepicker.min.js b/dist/js/datepicker.min.js index 45fea5c..6a0cd05 100644 --- a/dist/js/datepicker.min.js +++ b/dist/js/datepicker.min.js @@ -1 +1 @@ -var Datepicker;!function(t,e,i){var s,a,n="datepicker",r=".datepicker-here",h=!1,o='
',d={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,{},d,a,this.$el.data()),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(){h||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=e.extend(!0,{},Datepicker.language.ru)),this.loc=e.extend(!0,{},Datepicker.language[t],Datepicker.language.ru)):this.loc=e.extend(!0,{},Datepicker.language.ru,t),this.opts.dateFormat&&(this.loc.dateFormat=this.opts.dateFormat),this.opts.firstDay&&(this.loc.firstDay=this.opts.firstDay)},_buildDatepickersContainer:function(){h=!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(o).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(this.parsedDate.month,this.parsedDate.year);break;case"months":this.date=new Date(t.year+1,t.month,1),e.onChangeYear&&e.onChangeYear(this.parsedDate.year);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(this.parsedDate.month,this.parsedDate.year);break;case"months":this.date=new Date(t.year-1,t.month,1),e.onChangeYear&&e.onChangeYear(this.parsedDate.year);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(t instanceof Date){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;if(t instanceof Date)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 t instanceof Date?(this.currentDate=t,this.inited&&!this.silent&&(this.views[this.view]._render(),this.nav._render()),t):void 0},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))})},e(function(){e(r).datepicker()})}(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).closest("[data-action]"),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 +var Datepicker;!function(t,e,i){var s,a,n="datepicker",r=".datepicker-here",h=!1,o='
',d={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,monthsFiled:"monthsShort",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,{},d,a,this.$el.data()),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(){h||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=e.extend(!0,{},Datepicker.language.ru)),this.loc=e.extend(!0,{},Datepicker.language.ru,Datepicker.language[t])):this.loc=e.extend(!0,{},Datepicker.language.ru,t),this.opts.dateFormat&&(this.loc.dateFormat=this.opts.dateFormat),this.opts.firstDay&&(this.loc.firstDay=this.opts.firstDay)},_buildDatepickersContainer:function(){h=!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.appendTo(this.$el),this.$datepicker=e(o).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(this.parsedDate.month,this.parsedDate.year);break;case"months":this.date=new Date(t.year+1,t.month,1),e.onChangeYear&&e.onChangeYear(this.parsedDate.year);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(this.parsedDate.month,this.parsedDate.year);break;case"months":this.date=new Date(t.year-1,t.month,1),e.onChangeYear&&e.onChangeYear(this.parsedDate.year);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(t instanceof Date){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;if(t instanceof Date)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 t instanceof Date?(this.currentDate=t,this.inited&&!this.silent&&(this.views[this.view]._render(),this.nav._render()),t):void 0},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))})},e(function(){e(r).datepicker()})}(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[this.opts.monthsFiled][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).closest("[data-action]"),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/index-ru.html b/index-ru.html index bd79611..3338fc6 100644 --- a/index-ru.html +++ b/index-ru.html @@ -1,13 +1,24 @@ -Air Datepicker

AIR DATEPICKERлегкий соврменный jQuery календарь

Установка

bower i --save air-datepicker

Либо можно скачать файлы напрямую с GitHub

Использование

Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.

<input type='text' class="datepicker-here" data-position="right top" />

Ручная инициализация

// Инициализация
+Air Datepicker
AIR DATEPICKERлегкий современный jQuery календарь
Описание
Легкий кроссбраузерный календарь, написан с использованиемflexbox. Работает во всех современных браузерах:
+IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Установка
bower i --save air-datepicker
Либо можно скачать файлы напрямую с GitHub
Использование
Подключите стили и скрипты из папки/dist:
<html>
+	<head>
+		<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
+		<script src="dist/js/datepicker.min.js"></script>
+	</head>
+</html>
Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.
<input type='text' class="datepicker-here" data-position="right top" />
Ручная инициализация
// Инициализация
 $('#my-element').datepicker([options])
 
 // Доступ к экземпляру объекта
 $('#my-element').data('datepicker')
 
Примеры
Инициализация с опциями по умолчанию
Пример
<input type='text' class='datepicker-here' />
-
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.
Пример
<input type="text"
+
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.
Пример
<input type="text"
 	class="datepicker-here"
 	data-multiple-dates="3"
-	data-multiple-dates-separator=", " />
+	data-multiple-dates-separator=", "
+	data-position='right top'/>
 
Постоянно видимый календарь
Проинициализируйте плагин на элементе, который не является текстовым полем, например на<div> …  </div>, либо передайте параметр{inline: true}.
Пример
<div class="datepicker-here"></div>
 
Выбор месяца
Пример
<input type="text"
 	class="datepicker-here"
@@ -79,15 +90,14 @@ $('.my-datepicker').datepicker({
 
weekends
Тип:array
Значение по умполчанию:[6, 0]
Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс.-weekend-. По умолчанию это суббота и воскресенье.
dateFormat
Тип:string
Значение по умполчанию:""
Формат даты, кобминация из d, m, yyyy, D, M, и т.д.  По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
  • d- дата
  • dd- дата с лидирующем нулем
  • D- сокращенное наименование дня
  • DD- полное наименование дня
  • m- номер мясяца
  • mm- номер месяца с лидирующем нулем
  • M- сокращенное наименовение месяца
  • MM- полное наименовение месяца
  • yy- сокращенный номер года
  • yyyy- полный номер года
  • yyyy1- первый год декады, в которую входит текущий год
  • yyyy2- последний год декады, в которую входит текущий год
toggleSelected
Тип:boolean
Значение по умполчанию:true
Если true, то клик на выделенной дате снимет выделение.
position
Тип:string
Значение по умполчанию:"bottom left"
Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
 воторым - положение на этой оси. Например{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.
offset
Тип:number
Значение по умполчанию:12
Отступ от основной оси позиционирования.
view
Тип:string
Значение по умполчанию:"days"
Начальный вид календаря. Возможноые значения:
  • days- отображение дней месяца
  • months- отображение месяцев одного года
  • years- отображение годов одной декады
minView
Тип:string
Значение по умполчанию:"days"
Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
 Возможные значения такие же как и у параметраview.
showOtherMonths
Тип:boolean
Значение по умполчанию:true
Если true, то будут отображаться дни других месяцев.
selectOtherMonths
Тип:boolean
Значение по умполчанию:true
Если true, то можно будет выбрать дни из других месяцев.
moveToOtherMonthsOnSelect
Тип:boolean
Значение по умполчанию:true
Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
showOtherYears
Тип:boolean
Значение по умполчанию:true
Если true, то при отображении декады, будут показаны годы из других декад.
selectOtherYears
Тип:boolean
Значение по умполчанию:true
Если true, то можно будет выбрать года из других декад
moveToOtherYearsOnSelect
Тип:boolean
Значение по умполчанию:true
Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
minDate
Тип:Date
Значение по умполчанию:""
Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
maxDate
Тип:Date
Значение по умполчанию:""
Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
disableNavWhenOutOfRange
Тип:boolean
Значение по умполчанию:true
Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
multipleDates
Тип:boolean|number
Значение по умполчанию:false
Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
multipleDatesSeparator
Тип:string
Значение по умполчанию:","
Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.
todayButton
Тип:boolean
Значение по умполчанию:false
Если true, то будет отображена кнопка "Сегодня".
clearButton
Тип:boolean
Значение по умполчанию:false
Если true, то будет отображена кнопка "Очистить".
showEvent
Тип:string
Значение по умполчанию:"focus"
Тип события, по наступлению которого будет показан календарь.
autoClose
Тип:boolean
Значение по умполчанию:false
Если true, то при активации даты, календарь закроется.
prevHtml
Тип:string
Значение по умполчанию:<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Контент кнопки 'предыдущий месяц|год|декада'.
nextHtml
Тип:string
Значение по умполчанию:<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Контент кнопки 'следующий месяц|год|декада'.
navTitles
Тип:object
Значение по умполчанию:
navTitles = {
-	days: 'MM, yyyy',
+	days: 'MM, <i>yyyy</i>',
 	months: 'yyyy',
 	years: 'yyyy1 - yyyy2'
 };
Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и вdateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
$('#my-datepicker').datepicker({
 	navTitles: {
 		days: '<h3>Выберете дату заезда</h3> MM, yyyy'
 	}
-})
-
События
onSelect(formattedDate, date, inst)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при выборе даты.
  • formattedDatestring- отформатированная дата.
  • dateDate|array- объектDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.
  • instobject- экземпляр плагина.
onChangeMonth(month, year)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении месяца.
  • monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
  • yearnumber- номер года, к которому осуществлен переход.
onChangeYear(year)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении года.
  • yearnumber- номер года, к которому осуществлен переход
onChangeDecade(decade)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении декады.
  • decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
onChangeView(view)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении вида календаря
  • viewstring- вид, к которому осуществлен переход (days, months, years).
onRenderCell(date, cellType)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при отрисовке ячейки календаря.
  • dateDate- объект даты текущей ячейки
  • cellTypestring- тип текущей ячейки (day, month, year).
Функция должна возвращать объект, которой может состоять из трех полей:
{
+})
monthsField
Тип:string
Значение по умполчанию:"monthsShort"
Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
События
onSelect(formattedDate, date, inst)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при выборе даты.
  • formattedDatestring- отформатированная дата.
  • dateDate|array- объектDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.
  • instobject- экземпляр плагина.
onChangeMonth(month, year)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении месяца.
  • monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
  • yearnumber- номер года, к которому осуществлен переход.
onChangeYear(year)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении года.
  • yearnumber- номер года, к которому осуществлен переход
onChangeDecade(decade)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении декады.
  • decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
onChangeView(view)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при изменении вида календаря
  • viewstring- вид, к которому осуществлен переход (days, months, years).
onRenderCell(date, cellType)
Тип:function
Значение по умполчанию:null
Функция обратного вызова при отрисовке ячейки календаря.
  • dateDate- объект даты текущей ячейки
  • cellTypestring- тип текущей ячейки (day, month, year).
Функция должна возвращать объект, которой может состоять из трех полей:
{
 	html: '', // Кастомный контент ячейки
 	classes: '', // Дополнительные классы для ячейки
 	disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
@@ -120,9 +130,7 @@ datepicker.update({
 	todayButton: true
 })
 
view
Устанавливает новое представление для календаря.
datepicker.view = 'months';
-
date
Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()
datepicker.date = new Date();
-
-

\ No newline at end of file
diff --git a/page/css/style.css b/page/css/style.css
index 88d8219..0002e46 100644
--- a/page/css/style.css
+++ b/page/css/style.css
@@ -1 +1 @@
-.-text-center-,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,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]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-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}.promo-input{height:40px;margin:26px 0;width:300px}.range-example input[type=text]{width:150px}.range-example span{display:inline-block;margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;display:inline-block;vertical-align:middle}
\ No newline at end of file
+.-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}
\ No newline at end of file
diff --git a/page/jade/pages/index-ru.jade b/page/jade/pages/index-ru.jade
index d3abc04..8c6fc12 100644
--- a/page/jade/pages/index-ru.jade
+++ b/page/jade/pages/index-ru.jade
@@ -3,16 +3,40 @@ extends ../layout
 block content
 	h1.promo-header
 		| AIR DATEPICKER
-		span легкий соврменный jQuery календарь
+		span легкий современный jQuery календарь
 
 	p.-text-center-
-		input.promo-input.datepicker-here(type='text' id='example-promo' data-position='bottom center')
+		.datepicker-here.datepicker-promo
+		script.
+			var $promo = $('.datepicker-promo');
 
+			$promo.datepicker()
+
+
+	h2 Описание
+	p
+		|Легкий кроссбраузерный календарь, написан с использованием
+		+example-inline('flexbox')
+		|. Работает во всех современных браузерах:
+		| IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
 	h2 Установка
 	+example-code('html') bower i --save air-datepicker
 	p Либо можно скачать файлы напрямую с GitHub
 
 	h2 Использование
+	p
+		|Подключите стили и скрипты из папки
+		+example-inline('/dist')
+		| :
+
+	+example-code('html')
+		:code
+			
+				
+					
+					
+				
+			
 	p
 		| Календарь автоматически проинициализируется на элементах с классом
 		+example-inline('.datepicker-here', 'css')
@@ -48,13 +72,14 @@ block content
 		| .
 	+example
 		+example-content
-			input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ').datepicker-here
+			input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='right top').datepicker-here
 		+example-code('html')
 			:code
 				
+					data-multiple-dates-separator=", "
+					data-position='right top'/>
 
 	h3 Постоянно видимый календарь
 	p
@@ -372,12 +397,13 @@ block content
 
 			.param
 				+param-header('navTitles', 'object')
-					+example-code('js').
-						navTitles = {
-							days: 'MM, yyyy',
-							months: 'yyyy',
-							years: 'yyyy1 - yyyy2'
-						};
+					+example-code('js')
+						:code
+							navTitles = {
+								days: 'MM, yyyy',
+								months: 'yyyy',
+								years: 'yyyy1 - yyyy2'
+							};
 				p
 					| Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в
 					+example-inline('dateFormat', 'js')
@@ -389,6 +415,9 @@ block content
 								days: '
Выберете дату заезда
 MM, yyyy'
 							}
 						})
+			.param
+				+param-header('monthsField','string','"monthsShort"')
+				p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
 
 			h2 События
 			.param
@@ -566,8 +595,4 @@ block content
 					+example-inline('Date()')
 
 				+example-code('js').
-					datepicker.date = new Date();
-
-
-			.datepicker-here#from
-			.datepicker-here#to
\ No newline at end of file
+					datepicker.date = new Date();
\ No newline at end of file
diff --git a/page/sass/_page.scss b/page/sass/_page.scss
index 2e4ccb0..c353fb1 100644
--- a/page/sass/_page.scss
+++ b/page/sass/_page.scss
@@ -55,10 +55,9 @@ h4 {
 }
 
 input[type='text'] {
-  border-radius: 4px;
   outline: none;
   height: 32px;
-  border: 1px solid #c0c0c0;
+  border: 1px solid #979797;
   padding: 0 8px;
   margin: 0 0 14px;
   color: #444;
@@ -67,8 +66,7 @@ input[type='text'] {
   width: 250px;
 
   &:focus {
-    border-color: gold;
-    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
+    border-color: #ffd75c;
   }
 }
 
@@ -84,7 +82,7 @@ ul {
    ------------------------------------------------- */
 
 %example-label {
-  background: #f4f4f4;
+  background: #ececec;
   border-radius: 0 0 4px 4px;
   position: absolute;
   padding: 4px 12px;
@@ -101,7 +99,7 @@ $exampleBorderRadius: 4px;
 }
 
 .example {
-  border: 1px solid #ddd;
+  border: 1px solid #ececec;
   border-radius: $exampleBorderRadius;
   position: relative;
   margin: 16px 0;
@@ -109,7 +107,7 @@ $exampleBorderRadius: 4px;
   .example-code {
     border: none;
     border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #ececec;
     margin: 0;
   }
 }
@@ -206,10 +204,12 @@ a {
   }
 }
 
-.promo-input {
-  height: 40px;
-  margin: 26px 0;
-  width: 300px;
+.datepicker-promo {
+  text-align: center;
+
+  .datepicker-inline {
+    display: inline-block;
+  }
 }
 
 //  Range example
diff --git a/src/js/body.js b/src/js/body.js
index e99aa38..7a38cae 100644
--- a/src/js/body.js
+++ b/src/js/body.js
@@ -141,7 +141,7 @@
                 d = Datepicker.getParsedDate(date),
                 currentDate = new Date(),
                 loc = this.d.loc,
-                html = loc.months[d.month],
+                html = loc[this.opts.monthsFiled][d.month],
                 render = {};
 
             if (this.opts.onRenderCell) {
diff --git a/src/js/datepicker.js b/src/js/datepicker.js
index 9cd7491..2f3889c 100644
--- a/src/js/datepicker.js
+++ b/src/js/datepicker.js
@@ -48,10 +48,11 @@ var Datepicker;
             autoClose: false,
 
             // navigation
+            monthsFiled: 'monthsShort',
             prevHtml: '',
             nextHtml: '',
             navTitles: {
-                days: 'MM, yyyy',
+                days: 'MM, yyyy',
                 months: 'yyyy',
                 years: 'yyyy1 - yyyy2'
             },
@@ -148,7 +149,7 @@ var Datepicker;
                     this.loc = $.extend(true, {}, Datepicker.language.ru)
                 }
 
-                this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
+                this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
             } else {
                 this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
             }
@@ -179,7 +180,7 @@ var Datepicker;
                     $appendTarget = $inline.insertAfter(this.$el)
                 }
             } else {
-                $appendTarget = $inline.insertAfter(this.$el)
+                $appendTarget = $inline.appendTo(this.$el)
             }
 
             this.$datepicker = $(baseTemplate).appendTo($appendTarget);
diff --git a/src/sass/_datepicker-config.scss b/src/sass/_datepicker-config.scss
index fef0616..29b31d6 100644
--- a/src/sass/_datepicker-config.scss
+++ b/src/sass/_datepicker-config.scss
@@ -1,34 +1,40 @@
 $dayCellSize: 32px;
-$datepickerWidth: 232px;
+$datepickerWidth: 250px;
 $datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 2px;
-$datepickerPadding: 2px;
+$datepickerBorderRadius: 4px;
+$datepickerPadding: 4px;
 
 $fontFamily: Tahoma;
 $fontSize: 14px;
 
 $yearsPerRow: 4;
+
 $textColor: (
+  button: #5cc4ef,
+  otherMonth: #dedede,
+  disabled: #aeaeae,
+  currentDate: #4EB5E6,
   common: #4a4a4a,
-  dayNames: #f5a33a,
+  dayNames: #FF9A19,
+  navArrows: #9c9c9c
+);
+
+$bg: (
+  selected: #5cc4ef,
+  hover: #eee
+);
+
+$borderColor: (
+  nav: #f4f4f4,
+  inline: #d7d7d7,
+  default: #cccccc
 );
 
 $navigationHeight: 32px;
-$navigationButtonsOffset: 1px;
+$navigationButtonsOffset: 2px;
 
 $pointerSize: 10px;
-$pointerOffset: 8px;
-
-// Colors
-$colorGrey: #ddd;
-$colorAnotherMonth: #ddd;
-$colorCellHover: #eee;
-$colorCellCurrent: #60C4F5;
-$colorCellSelected: skyblue;
-$colorCellWeekend: '';
-$borderColor: $colorGrey;
-$bgButton: #f2f2f2;
-$bgButtonHover: darken($bgButton, 3);
+$pointerOffset: 10px;
 
 // Transitions
 $transitionSpeed: .3s;
@@ -37,12 +43,21 @@ $transitionOffset: 8px;
 
 // Objects
 %otherMonth {
-  color: $colorAnotherMonth;
-  font-size: .9em;
+  color: map_get($textColor, otherMonth);
+
+  &:hover {
+    color: darken(map_get($textColor, otherMonth), 10);
+  }
+
+  &.-disabled- {
+    &:hover {
+      color: map_get($textColor, otherMonth);
+    }
+  }
 
   &.-selected- {
     color: #fff;
-    background: lighten($colorCellSelected, 20%);
+    background: lighten(map_get($bg, selected), 15);
   }
 
   &:empty {
diff --git a/src/sass/cell.scss b/src/sass/cell.scss
index adafca7..39a39e9 100644
--- a/src/sass/cell.scss
+++ b/src/sass/cell.scss
@@ -20,30 +20,31 @@
   z-index: 1;
 
   &:hover {
-    background: $colorCellHover;
+    background: map_get($bg, hover);
   }
 
   &.-current- {
-    color: $colorCellCurrent;
+    color: map_get($textColor, currentDate);
 
     &:hover {
-      background: rgba($colorCellCurrent, .05);
+      color:  map_get($textColor, common);
+      //background: rgba(map_get($textColor, currentDate), .05);
     }
   }
 
   &.-disabled- {
     cursor: default;
-    color: $colorGrey;
+    color: map_get($textColor, disabled);
     background: none;
   }
 
   &.-selected- {
     color: #fff;
-    background: $colorCellSelected;
+    background: map_get($bg, selected);
 
     &.-current- {
       color: #fff;
-      background: $colorCellSelected;
+      background: map_get($bg, selected);
     }
   }
 }
@@ -54,6 +55,7 @@
 .datepicker--days-names {
   display: flex;
   flex-wrap: wrap;
+  margin: 8px 0 3px;
 }
 
 .datepicker--day-name {
@@ -62,17 +64,15 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  height: $dayCellSize;
   text-align: center;
   text-transform: uppercase;
-  font-size: 13px;
+  font-size: .8em;
 }
 
 //  Day cell
 // -------------------------------------------------
 
 .datepicker--cell-day {
-  border-radius: 50%;
   width: (100/7)#{'%'};
 
   &.-other-month- {
diff --git a/src/sass/datepicker.scss b/src/sass/datepicker.scss
index 0e2dd15..b1fade6 100644
--- a/src/sass/datepicker.scss
+++ b/src/sass/datepicker.scss
@@ -12,7 +12,8 @@
 
 .datepicker {
   background: #fff;
-  border: 1px solid $borderColor;
+  border: 1px solid map_get($borderColor, default);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
   border-radius: $datepickerBorderRadius;
   box-sizing: content-box;
   font-family: $fontFamily, sans-serif;
@@ -47,6 +48,8 @@
 
 .datepicker-inline {
   .datepicker {
+    border-color: map-get($borderColor, inline);
+    box-shadow: none;
     position: static;
     left: auto;
     right: auto;
@@ -60,6 +63,7 @@
 }
 
 .datepicker--content {
+  box-sizing: content-box;
   padding: $datepickerPadding;
 }
 
@@ -70,8 +74,8 @@ $pointerHalfSize: $pointerSize / 2 - 1;
 .datepicker--pointer {
   position: absolute;
   background: #fff;
-  border-top: 1px solid $borderColor;
-  border-right: 1px solid $borderColor;
+  border-top: 1px solid map-get($borderColor, default);
+  border-right: 1px solid map-get($borderColor, default);
   width: $pointerSize;
   height: $pointerSize;
   z-index: -1;
diff --git a/src/sass/navigation.scss b/src/sass/navigation.scss
index aac68a2..e545d72 100644
--- a/src/sass/navigation.scss
+++ b/src/sass/navigation.scss
@@ -7,8 +7,9 @@
 .datepicker--nav {
   display: flex;
   justify-content: space-between;
+  border-bottom: 1px solid map_get($borderColor, nav);
+  min-height: $navigationHeight;
   padding: $datepickerPadding;
-  height: $navigationHeight;
 }
 
 .datepicker--nav-title,
@@ -25,7 +26,7 @@
   user-select: none;
 
   &:hover {
-    background: $colorCellHover;
+    background: map_get($bg, hover);
   }
 
   &.-disabled- {
@@ -39,7 +40,7 @@
 
   path {
     fill: none;
-    stroke: #bdbdbd;
+    stroke: map_get($textColor, navArrows);
     stroke-width: 2px;
   }
 }
@@ -48,8 +49,14 @@
   border-radius: $datepickerBorderRadius;
   padding: 0 8px;
 
+  i {
+    font-style: normal;
+    color: map_get($textColor, navArrows);
+    margin-left: 5px;
+  }
+
   &:hover {
-    background: $colorCellHover;
+    background: map_get($bg, hover);
   }
 
   &.-disabled- {
@@ -63,21 +70,22 @@
 
 .datepicker--buttons {
   display: flex;
-  margin: 0 $navigationButtonsOffset $datepickerPadding;
+  padding: $datepickerPadding;
+  border-top: 1px solid map_get($borderColor, nav);
 }
 
 .datepicker--button {
-  background: $bgButton;
+  color: map_get($textColor, currentDate);
   cursor: pointer;
   border-radius: $datepickerBorderRadius;
-  margin: 0 $navigationButtonsOffset;
   flex: 1;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  height: 24px;
+  height: 32px;
 
   &:hover {
-    background: $bgButtonHover;
+    color: map_get($textColor, common);
+    background: map_get($bg, hover);
   }
 }
\ No newline at end of file