add i18n.js and day names rendering

dist/js/datepicker.js

@@ -10,6 +10,8 @@ var Datepicker;
             '</div>',
         defaults = {
             inline: true,
+            region: 'ru',
+            firstDay: 1,
             start: '',
             format: 'dd.mm.yyyy'
         };
@@ -26,6 +28,8 @@ var Datepicker;
             this._buildDatepickersContainer();
         }
 
+        this.loc = Datepicker.region[this.opts.region];
+
         if ($body == undefined) {
             $body = $('body');
         }
@@ -33,6 +37,18 @@ var Datepicker;
         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 () {
@@ -83,6 +99,14 @@ var Datepicker;
     };
 
 })(window, jQuery, '');
+;(function () {
+    Datepicker.region = {
+        'ru': {
+            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+        }
+    }
+})();
+
 Datepicker.Cell = function () {
 
 };
@@ -110,26 +134,34 @@ Datepicker.Cell = function () {
             this._render();
         },
 
-        _getCellsNumber: function () {
-            var d = this.viewDate;
-
-            return {
-                days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
-                months: 12,
-                years: 10
-            }
-        },
-
         _buildBaseHtml: function () {
             this.$el = $(templates[this.type]).appendTo(this.d.$content);
             this.$names = $('.datepicker--days--names', this.$el);
             this.$cells = $('.datepicker--days--cells', this.$el);
         },
 
-        _render: function () {
+        _getDayNamesHtml: function (firstDay, curDay, html, circle) {
-            var cells = this._getCellsNumber();
+            curDay = curDay != undefined ? curDay : firstDay;
+            html = html ? html : '';
+            if (curDay == firstDay && circle) return html;
+            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
 
+            html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
+
+            return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
+        },
+
+        _renderDays: function () {
+            var count = Datepicker.getDaysCount(this.viewDate),
+                dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
+
+            this.$names.html(dayNames)
+        },
+
+        _render: function () {
             this._buildBaseHtml();
+            this._renderDays();
         }
     };
 })();

gulpfile.js

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

js/datepicker/body.js

@@ -22,26 +22,34 @@
             this._render();
         },
 
-        _getCellsNumber: function () {
-            var d = this.viewDate;
-
-            return {
-                days: new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(),
-                months: 12,
-                years: 10
-            }
-        },
-
         _buildBaseHtml: function () {
             this.$el = $(templates[this.type]).appendTo(this.d.$content);
             this.$names = $('.datepicker--days--names', this.$el);
             this.$cells = $('.datepicker--days--cells', this.$el);
         },
 
-        _render: function () {
+        _getDayNamesHtml: function (firstDay, curDay, html, circle) {
-            var cells = this._getCellsNumber();
+            curDay = curDay != undefined ? curDay : firstDay;
+            html = html ? html : '';
+            if (curDay == firstDay && circle) return html;
+            if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
 
+            html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
+
+            return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
+        },
+
+        _renderDays: function () {
+            var count = Datepicker.getDaysCount(this.viewDate),
+                dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
+
+            this.$names.html(dayNames)
+        },
+
+        _render: function () {
             this._buildBaseHtml();
+            this._renderDays();
         }
     };
 })();

js/datepicker/datepicker.js

@@ -10,6 +10,8 @@ var Datepicker;
             '</div>',
         defaults = {
             inline: true,
+            region: 'ru',
+            firstDay: 1,
             start: '',
             format: 'dd.mm.yyyy'
         };
@@ -26,6 +28,8 @@ var Datepicker;
             this._buildDatepickersContainer();
         }
 
+        this.loc = Datepicker.region[this.opts.region];
+
         if ($body == undefined) {
             $body = $('body');
         }
@@ -33,6 +37,18 @@ var Datepicker;
         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 () {

js/datepicker/i18n.js

@@ -0,0 +1,7 @@
+;(function () {
+    Datepicker.region = {
+        'ru': {
+            days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+        }
+    }
+})();