diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 0903e98..7c5359a 100644
--- a/dist/css/datepicker.css
+++ b/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
------------------------------------------------- */
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index f541e36..d17b5f2 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -5,7 +5,7 @@ var Datepicker;
$body, $datepickersContainer,
baseTemplate = '' +
'
',
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: '«',
+ nextHtml: '»'
};
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 = '' +
+ '#{prevHtml}
' +
+ '#{title}
' +
+ '#{nextHtml}
';
+
+ 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 '' + date.getDate() + '
';
},
_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)
diff --git a/gulpfile.js b/gulpfile.js
index 31443f7..cd84212 100644
--- a/gulpfile.js
+++ b/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())
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index d3c3e19..de90e9e 100644
--- a/js/datepicker/body.js
+++ b/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 '' + date.getDate() + '
';
},
_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)
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index a475f1d..7578ba3 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -5,7 +5,7 @@ var Datepicker;
$body, $datepickersContainer,
baseTemplate = '' +
'',
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: '«',
+ nextHtml: '»'
};
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));
diff --git a/js/datepicker/i18n.js b/js/datepicker/i18n.js
index 2ed4221..4b61fd0 100644
--- a/js/datepicker/i18n.js
+++ b/js/datepicker/i18n.js
@@ -1,7 +1,8 @@
;(function () {
Datepicker.region = {
'ru': {
- days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
+ days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+ months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
}
}
})();
diff --git a/js/datepicker/navigation.js b/js/datepicker/navigation.js
new file mode 100644
index 0000000..ff2be68
--- /dev/null
+++ b/js/datepicker/navigation.js
@@ -0,0 +1,34 @@
+;(function () {
+ var template = '' +
+ '#{prevHtml}
' +
+ '#{title}
' +
+ '#{nextHtml}
';
+
+ 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;
+ }
+ }
+
+})();
diff --git a/sass/datepicker.scss b/sass/datepicker.scss
index f8edb83..31103d0 100644
--- a/sass/datepicker.scss
+++ b/sass/datepicker.scss
@@ -1,2 +1,3 @@
@import "datepicker/datepicker";
+@import "datepicker/navigation";
@import "datepicker/cell";
\ No newline at end of file
diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
index f83c7f9..406b7b4 100644
--- a/sass/datepicker/_datepicker.scss
+++ b/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;
}
diff --git a/sass/datepicker/_navigation.scss b/sass/datepicker/_navigation.scss
new file mode 100644
index 0000000..cb3c711
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
index c74aac9..1688202 100644
--- a/sass/datepicker/datepicker-config.scss
+++ b/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: '';