add navigation module

dist/css/datepicker.css

@@ -2,7 +2,8 @@
     Datepicker
    ------------------------------------------------- */
 .datepicker {
-  border: 1px solid #dddddd;
+  border: 1px solid #ddd;
+  border-radius: 2px;
   box-sizing: content-box;
   width: 224px; }
 
@@ -18,6 +19,27 @@
   height: 32px;
   text-align: center; }
 
+/* -------------------------------------------------
+    Navigation
+   ------------------------------------------------- */
+.datepicker--nav {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  height: 32px; }
+
+.datepicker--nav-title,
+.datepicker--nav-action {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center; }
+
+.datepicker--nav-action {
+  width: 32px; }
+  .datepicker--nav-action:hover {
+    background: #f6f6f6; }
+
 /* -------------------------------------------------
     Datepicker cells
    ------------------------------------------------- */

dist/js/datepicker.js

@@ -5,7 +5,7 @@ var Datepicker;
         $body, $datepickersContainer,
         baseTemplate = '' +
             '<div class="datepicker">' +
-            '<header class="datepicker--header"></header>' +
+            '<nav class="datepicker--nav"></nav>' +
             '<div class="datepicker--content"></div>' +
             '</div>',
         defaults = {
@@ -14,7 +14,11 @@ var Datepicker;
             firstDay: 1, // Week's first day
             start: '', // Start date
             weekends: [6, 0],
-            format: 'dd.mm.yyyy'
+            format: 'dd.mm.yyyy',
+
+            // navigation
+            prevHtml: '&laquo;',
+            nextHtml: '&raquo;'
         };
 
     Datepicker  = function (el, options) {
@@ -35,28 +39,19 @@ var Datepicker;
             $body = $('body');
         }
 
+        this.currentDate = this.opts.start;
+
         this.init()
     };
 
-    Datepicker.getDaysCount = function (date) {
-       return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-    };
-
-    Datepicker.getParsedDate = function (date) {
-        return {
-            year: date.getUTCFullYear(),
-            month: date.getUTCMonth(),
-            day: date.getUTCDay()
-        }
-    };
 
     Datepicker.prototype = {
         containerBuilt: false,
         init: function () {
             this._buildBaseHtml();
 
-            this.days = new Datepicker.Body(this, 'days', this.opts)
+            this.nav = new Datepicker.Navigation(this, this.opts);
-
+            this.days = new Datepicker.Body(this, 'days', this.opts);
         },
 
         isWeekend: function (day) {
@@ -77,7 +72,7 @@ var Datepicker;
             }
             this.$datepicker = $(baseTemplate).appendTo($appendTarget);
             this.$content = $('.datepicker--content', this.$datepicker);
-            this.$header = $('.datepicker--header', this.$datepicker);
+            this.$nav = $('.datepicker--nav', this.$datepicker);
         },
 
         _defineDOM: function () {
@@ -85,6 +80,27 @@ var Datepicker;
         }
     };
 
+
+    Datepicker.getDaysCount = function (date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    };
+
+    Datepicker.getParsedDate = function (date) {
+        return {
+            year: date.getUTCFullYear(),
+            month: date.getUTCMonth(),
+            day: date.getUTCDay()
+        }
+    };
+
+    Datepicker.template = function (str, data) {
+        return str.replace(/#\{([\w]+)\}/g, function (source, match) {
+            if (data[match] || data[match] === 0) {
+                return data[match]
+            }
+        });
+    };
+
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@@ -109,11 +125,47 @@ var Datepicker;
 ;(function () {
     Datepicker.region = {
         'ru': {
-            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
         }
     }
 })();
 
+;(function () {
+    var template = '' +
+        '<div class="datepicker--nav-action">#{prevHtml}</div>' +
+        '<div class="datepicker--nav-title">#{title}</div>' +
+        '<div class="datepicker--nav-action">#{nextHtml}</div>';
+
+    Datepicker.Navigation = function (d, opts) {
+        this.d = d;
+        this.opts = opts;
+
+        this.init();
+    };
+
+    Datepicker.Navigation.prototype = {
+        init: function () {
+            this._buildBaseHtml();
+        },
+        
+        _buildBaseHtml: function () {
+            var title = this._getTitle(this.d.currentDate);
+                html = Datepicker.template(template, $.extend({title: title}, this.opts));
+
+            this.d.$nav.html(html);
+        },
+
+        _getTitle: function (date) {
+            var month = this.d.loc.months[date.getUTCMonth()],
+                year = date.getUTCFullYear();
+
+            return month + ', ' + year;
+        }
+    }
+
+})();
+
 Datepicker.Cell = function () {
 
 };
@@ -131,8 +183,6 @@ Datepicker.Cell = function () {
         this.type = type;
         this.opts = opts;
 
-        this.viewDate = opts.start;
-
         this.init();
     };
 
@@ -192,14 +242,14 @@ Datepicker.Cell = function () {
             var _class = "datepicker--cell datepicker--cell-day";
 
             if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
-            if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
+            if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
 
             return '<div class="' + _class + '">' + date.getDate() + '</div>';
         },
 
         _renderDays: function () {
             var dayNames = this._getDayNamesHtml(this.opts.firstDay),
-                days = this._getDaysHtml(this.viewDate);
+                days = this._getDaysHtml(this.d.currentDate);
 
             this.$cells.html(days);
             this.$names.html(dayNames)

gulpfile.js

@@ -6,7 +6,11 @@ var gulp = require('gulp'),
     concat = require('gulp-concat');
 
 gulp.task('js', function () {
-    gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/i18n.js', 'js/datepicker/cell.js', 'js/datepicker/body.js'])
+    gulp.src(['js/datepicker/datepicker.js',
+        'js/datepicker/i18n.js',
+        'js/datepicker/navigation.js',
+        'js/datepicker/cell.js',
+        'js/datepicker/body.js'])
         .pipe(concat('datepicker.js'))
         .pipe(gulp.dest('dist/js/'))
         .pipe(livereload())

js/datepicker/body.js

@@ -12,8 +12,6 @@
         this.type = type;
         this.opts = opts;
 
-        this.viewDate = opts.start;
-
         this.init();
     };
 
@@ -73,14 +71,14 @@
             var _class = "datepicker--cell datepicker--cell-day";
 
             if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
-            if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-";
+            if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
 
             return '<div class="' + _class + '">' + date.getDate() + '</div>';
         },
 
         _renderDays: function () {
             var dayNames = this._getDayNamesHtml(this.opts.firstDay),
-                days = this._getDaysHtml(this.viewDate);
+                days = this._getDaysHtml(this.d.currentDate);
 
             this.$cells.html(days);
             this.$names.html(dayNames)

js/datepicker/datepicker.js

@@ -5,7 +5,7 @@ var Datepicker;
         $body, $datepickersContainer,
         baseTemplate = '' +
             '<div class="datepicker">' +
-            '<header class="datepicker--header"></header>' +
+            '<nav class="datepicker--nav"></nav>' +
             '<div class="datepicker--content"></div>' +
             '</div>',
         defaults = {
@@ -14,7 +14,11 @@ var Datepicker;
             firstDay: 1, // Week's first day
             start: '', // Start date
             weekends: [6, 0],
-            format: 'dd.mm.yyyy'
+            format: 'dd.mm.yyyy',
+
+            // navigation
+            prevHtml: '&laquo;',
+            nextHtml: '&raquo;'
         };
 
     Datepicker  = function (el, options) {
@@ -35,28 +39,19 @@ var Datepicker;
             $body = $('body');
         }
 
+        this.currentDate = this.opts.start;
+
         this.init()
     };
 
-    Datepicker.getDaysCount = function (date) {
-       return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-    };
-
-    Datepicker.getParsedDate = function (date) {
-        return {
-            year: date.getUTCFullYear(),
-            month: date.getUTCMonth(),
-            day: date.getUTCDay()
-        }
-    };
 
     Datepicker.prototype = {
         containerBuilt: false,
         init: function () {
             this._buildBaseHtml();
 
-            this.days = new Datepicker.Body(this, 'days', this.opts)
+            this.nav = new Datepicker.Navigation(this, this.opts);
-
+            this.days = new Datepicker.Body(this, 'days', this.opts);
         },
 
         isWeekend: function (day) {
@@ -77,7 +72,7 @@ var Datepicker;
             }
             this.$datepicker = $(baseTemplate).appendTo($appendTarget);
             this.$content = $('.datepicker--content', this.$datepicker);
-            this.$header = $('.datepicker--header', this.$datepicker);
+            this.$nav = $('.datepicker--nav', this.$datepicker);
         },
 
         _defineDOM: function () {
@@ -85,6 +80,27 @@ var Datepicker;
         }
     };
 
+
+    Datepicker.getDaysCount = function (date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    };
+
+    Datepicker.getParsedDate = function (date) {
+        return {
+            year: date.getUTCFullYear(),
+            month: date.getUTCMonth(),
+            day: date.getUTCDay()
+        }
+    };
+
+    Datepicker.template = function (str, data) {
+        return str.replace(/#\{([\w]+)\}/g, function (source, match) {
+            if (data[match] || data[match] === 0) {
+                return data[match]
+            }
+        });
+    };
+
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));

js/datepicker/i18n.js

@@ -1,7 +1,8 @@
 ;(function () {
     Datepicker.region = {
         'ru': {
-            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
         }
     }
 })();

js/datepicker/navigation.js

@@ -0,0 +1,34 @@
+;(function () {
+    var template = '' +
+        '<div class="datepicker--nav-action">#{prevHtml}</div>' +
+        '<div class="datepicker--nav-title">#{title}</div>' +
+        '<div class="datepicker--nav-action">#{nextHtml}</div>';
+
+    Datepicker.Navigation = function (d, opts) {
+        this.d = d;
+        this.opts = opts;
+
+        this.init();
+    };
+
+    Datepicker.Navigation.prototype = {
+        init: function () {
+            this._buildBaseHtml();
+        },
+        
+        _buildBaseHtml: function () {
+            var title = this._getTitle(this.d.currentDate);
+                html = Datepicker.template(template, $.extend({title: title}, this.opts));
+
+            this.d.$nav.html(html);
+        },
+
+        _getTitle: function (date) {
+            var month = this.d.loc.months[date.getUTCMonth()],
+                year = date.getUTCFullYear();
+
+            return month + ', ' + year;
+        }
+    }
+
+})();

sass/datepicker.scss

@@ -1,2 +1,3 @@
 @import "datepicker/datepicker";
+@import "datepicker/navigation";
 @import "datepicker/cell";

sass/datepicker/_datepicker.scss

@@ -5,7 +5,8 @@
    ------------------------------------------------- */
 
 .datepicker {
-  border: 1px solid #dddddd;
+  border: 1px solid $colorGrey;
+  border-radius: 2px;
   box-sizing: content-box;
   width: $datepickerWidth;
 }

sass/datepicker/_navigation.scss

@@ -0,0 +1,28 @@
+@import "datepicker-config";
+
+/* -------------------------------------------------
+    Navigation
+   ------------------------------------------------- */
+
+.datepicker--nav {
+  border-bottom: 1px solid $colorGrey;
+  display: flex;
+  justify-content: space-between;
+  height: $navigationHeight;
+}
+
+.datepicker--nav-title,
+.datepicker--nav-action {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+
+.datepicker--nav-action {
+  width: $dayCellSize;
+
+  &:hover {
+    background: #f6f6f6;
+  }
+}

sass/datepicker/datepicker-config.scss

@@ -1,5 +1,13 @@
 $dayCellSize: 32px;
 $datepickerWidth: 7 * $dayCellSize;
 
-$colorAnotherMonth: #ddd;
+$navigationHeight: 32px;
 
+// Colors
+$colorGrey: #ddd;
+
+$colorAnotherMonth: #ddd;
+$colorCellHover: '';
+$colorCellCurrent: '';
+$colorCellSelected: '';
+$colorCellWeekend: '';