refactor language option

dist/js/datepicker.js

@@ -12,10 +12,10 @@ var Datepicker;
             //TODO сделать работу с инпутом
             inline: true,
             language: 'ru',
-            start: '', // Start date
+            startDate: new Date(),
-            firstDay: 1, // Week's first day
+            firstDay: '',
             weekends: [6, 0],
-            dateFormat: 'dd.mm.yyyy',
+            dateFormat: '',
             toggleSelected: true,
 
             view: 'days',
@@ -53,15 +53,13 @@ var Datepicker;
 
         this.opts = $.extend({}, defaults, options);
 
-        if (!this.opts.start) {
+        if (!this.opts.startDate) {
-            this.opts.start = new Date();
+            this.opts.startDate = new Date();
         }
         if (this.containerBuilt && !this.opts.inline) {
             this._buildDatepickersContainer();
         }
 
-        this.loc = Datepicker.language[this.opts.language];
-
         if ($body == undefined) {
             $body = $('body');
         }
@@ -69,7 +67,7 @@ var Datepicker;
         this.inited = false;
         this.silent = false; // Need to prevent unnecessary rendering
 
-        this.currentDate = this.opts.start;
+        this.currentDate = this.opts.startDate;
         this.currentView = this.opts.view;
         this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
         this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
@@ -86,6 +84,7 @@ var Datepicker;
 
         init: function () {
             this._buildBaseHtml();
+            this._defineLocale(this.opts.language);
 
             this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
@@ -99,6 +98,26 @@ var Datepicker;
             return this.opts.weekends.indexOf(day) !== -1;
         },
 
+        _defineLocale: function (lang) {
+            if (typeof lang == 'string') {
+                this.loc = Datepicker.language[lang];
+                if (!this.loc) {
+                    console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
+                    this.loc = Datepicker.language.ru
+                }
+            } else {
+                this.loc = $.extend({}, Datepicker.language.ru, lang)
+            }
+
+            if (this.opts.dateFormat) {
+                this.loc.dateFormat = this.opts.dateFormat
+            }
+
+            if (this.opts.firstDay) {
+                this.loc.firstDay = this.opts.firstDay
+            }
+        },
+
         _buildDatepickersContainer: function () {
             this.containerBuilt = true;
             $body.append('<div class="datepickers-container" id="datepickers-container"></div>');
@@ -177,6 +196,7 @@ var Datepicker;
 
         formatDate: function (string, date) {
             var result = string,
+                locale = this.loc,
                 d = Datepicker.getParsedDate(date);
 
             switch (true) {
@@ -184,6 +204,10 @@ var Datepicker;
                     result = result.replace('dd', d.fullDate);
                 case /d/.test(result):
                     result = result.replace('d', d.date);
+                case /DD/.test(result):
+                    result = result.replace('DD', locale.days[d.day]);
+                case /D/.test(result):
+                    result = result.replace('D', locale.daysShort[d.day]);
                 case /mm/.test(result):
                     result = result.replace('mm', d.fullMonth);
                 case /m/.test(result):
@@ -191,7 +215,7 @@ var Datepicker;
                 case /MM/.test(result):
                     result = result.replace('MM', this.loc.months[d.month]);
                 case /M/.test(result):
-                    result = result.replace('M', this.loc.monthsShort[d.month]);
+                    result = result.replace('M', locale.monthsShort[d.month]);
                 case /yyyy/.test(result):
                     result = result.replace('yyyy', d.year);
                 case /yy/.test(result):
@@ -395,6 +419,20 @@ var Datepicker;
         return conditions[_type];
     };
 
+    Datepicker.language = {
+        ru: {
+            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+            today: 'Сегодня',
+            clear: 'Очистить',
+            dateFormat: 'dd.mm.yyyy',
+            firstDay: 1
+        }
+    };
+
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@@ -414,17 +452,6 @@ var Datepicker;
     };
 
 })(window, jQuery, '');
-Datepicker.language = {
-    ru: {
-        days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-        daysShort: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-        months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-        monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-        today: 'Сегодня',
-        clear: 'Очистить'
-    }
-};
-
 ;(function () {
     var template = '' +
         '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
@@ -574,9 +601,6 @@ Datepicker.language = {
 
 })();
 
-Datepicker.Cell = function () {
-
-};
 ;(function () {
     var templates = {
         days:'' +
@@ -628,7 +652,7 @@ Datepicker.Cell = function () {
             if (i > 7) return html;
             if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.daysShort[curDay] + '</div>';
+            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.daysMin[curDay] + '</div>';
 
             return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
@@ -643,8 +667,8 @@ Datepicker.Cell = function () {
             var totalMonthDays = Datepicker.getDaysCount(date),
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
-                daysFromPevMonth = firstMonthDay - this.opts.firstDay,
+                daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
-                daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
+                daysFromNextMonth = 6 - lastMonthDay + this.d.loc.firstDay;
 
             daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
             daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
@@ -783,7 +807,7 @@ Datepicker.Cell = function () {
 
         _renderTypes: {
             days: function () {
-                var dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                var dayNames = this._getDayNamesHtml(this.d.loc.firstDay),
                     days = this._getDaysHtml(this.d.currentDate);
 
                 this.$cells.html(days);

gulpfile.js

@@ -7,9 +7,7 @@ var gulp = require('gulp'),
 
 gulp.task('js', function () {
     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/'))
@@ -24,7 +22,12 @@ gulp.task('sass', function () {
         .pipe(livereload())
 });
 
-gulp.task('build', ['js', 'sass']);
+gulp.task('locale', function () {
+    gulp.src('js/datepicker/i18n/*.js')
+        .pipe(gulp.dest('dist/js/i18n'))
+});
+
+gulp.task('build', ['js', 'sass', 'locale']);
 
 gulp.task('pageSass', function () {
     gulp.src('sass/page-init.scss')

index.html

@@ -14,6 +14,7 @@
             </article>
         </div>
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
+        <script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
         <script type="text/javascript">
             $('.calendar').datepicker({
                 todayButton: true,

js/datepicker/body.js

@@ -49,7 +49,7 @@
             if (i > 7) return html;
             if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
 
-            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.daysShort[curDay] + '</div>';
+            html += '<div class="datepicker--day-name' + (this.d.isWeekend(curDay) ? " -weekend-" : "") + '">' + this.d.loc.daysMin[curDay] + '</div>';
 
             return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
         },
@@ -64,8 +64,8 @@
             var totalMonthDays = Datepicker.getDaysCount(date),
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
-                daysFromPevMonth = firstMonthDay - this.opts.firstDay,
+                daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
-                daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
+                daysFromNextMonth = 6 - lastMonthDay + this.d.loc.firstDay;
 
             daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
             daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
@@ -204,7 +204,7 @@
 
         _renderTypes: {
             days: function () {
-                var dayNames = this._getDayNamesHtml(this.opts.firstDay),
+                var dayNames = this._getDayNamesHtml(this.d.loc.firstDay),
                     days = this._getDaysHtml(this.d.currentDate);
 
                 this.$cells.html(days);

js/datepicker/cell.js

@@ -1,3 +0,0 @@
-Datepicker.Cell = function () {
-
-};

js/datepicker/datepicker.js

@@ -12,10 +12,10 @@ var Datepicker;
             //TODO сделать работу с инпутом
             inline: true,
             language: 'ru',
-            start: '', // Start date
+            startDate: new Date(),
-            firstDay: 1, // Week's first day
+            firstDay: '',
             weekends: [6, 0],
-            dateFormat: 'dd.mm.yyyy',
+            dateFormat: '',
             toggleSelected: true,
 
             view: 'days',
@@ -53,15 +53,13 @@ var Datepicker;
 
         this.opts = $.extend({}, defaults, options);
 
-        if (!this.opts.start) {
+        if (!this.opts.startDate) {
-            this.opts.start = new Date();
+            this.opts.startDate = new Date();
         }
         if (this.containerBuilt && !this.opts.inline) {
             this._buildDatepickersContainer();
         }
 
-        this.loc = Datepicker.language[this.opts.language];
-
         if ($body == undefined) {
             $body = $('body');
         }
@@ -69,7 +67,7 @@ var Datepicker;
         this.inited = false;
         this.silent = false; // Need to prevent unnecessary rendering
 
-        this.currentDate = this.opts.start;
+        this.currentDate = this.opts.startDate;
         this.currentView = this.opts.view;
         this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
         this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
@@ -86,6 +84,7 @@ var Datepicker;
 
         init: function () {
             this._buildBaseHtml();
+            this._defineLocale(this.opts.language);
 
             this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
@@ -99,6 +98,26 @@ var Datepicker;
             return this.opts.weekends.indexOf(day) !== -1;
         },
 
+        _defineLocale: function (lang) {
+            if (typeof lang == 'string') {
+                this.loc = Datepicker.language[lang];
+                if (!this.loc) {
+                    console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
+                    this.loc = Datepicker.language.ru
+                }
+            } else {
+                this.loc = $.extend({}, Datepicker.language.ru, lang)
+            }
+
+            if (this.opts.dateFormat) {
+                this.loc.dateFormat = this.opts.dateFormat
+            }
+
+            if (this.opts.firstDay) {
+                this.loc.firstDay = this.opts.firstDay
+            }
+        },
+
         _buildDatepickersContainer: function () {
             this.containerBuilt = true;
             $body.append('<div class="datepickers-container" id="datepickers-container"></div>');
@@ -177,6 +196,7 @@ var Datepicker;
 
         formatDate: function (string, date) {
             var result = string,
+                locale = this.loc,
                 d = Datepicker.getParsedDate(date);
 
             switch (true) {
@@ -184,6 +204,10 @@ var Datepicker;
                     result = result.replace('dd', d.fullDate);
                 case /d/.test(result):
                     result = result.replace('d', d.date);
+                case /DD/.test(result):
+                    result = result.replace('DD', locale.days[d.day]);
+                case /D/.test(result):
+                    result = result.replace('D', locale.daysShort[d.day]);
                 case /mm/.test(result):
                     result = result.replace('mm', d.fullMonth);
                 case /m/.test(result):
@@ -191,7 +215,7 @@ var Datepicker;
                 case /MM/.test(result):
                     result = result.replace('MM', this.loc.months[d.month]);
                 case /M/.test(result):
-                    result = result.replace('M', this.loc.monthsShort[d.month]);
+                    result = result.replace('M', locale.monthsShort[d.month]);
                 case /yyyy/.test(result):
                     result = result.replace('yyyy', d.year);
                 case /yy/.test(result):
@@ -395,6 +419,20 @@ var Datepicker;
         return conditions[_type];
     };
 
+    Datepicker.language = {
+        ru: {
+            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+            today: 'Сегодня',
+            clear: 'Очистить',
+            dateFormat: 'dd.mm.yyyy',
+            firstDay: 1
+        }
+    };
+
     $.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,10 +0,0 @@
-Datepicker.language = {
-    ru: {
-        days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-        daysShort: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-        months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-        monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-        today: 'Сегодня',
-        clear: 'Очистить'
-    }
-};

js/datepicker/i18n/datepicker.en.js

@@ -0,0 +1,11 @@
+Datepicker.language['en'] = {
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: 'Today',
+    clear: 'Clear',
+    dateFormat: 'mm/dd/yy',
+    firstDay: 0
+};