diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index fd076c3..3501c8e 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -8,8 +8,7 @@
width: 224px; }
.datepicker--body {
- display: none;
- margin: -1px; }
+ display: none; }
.datepicker--body.active {
display: block; }
@@ -77,12 +76,26 @@
color: #60C4F5; }
.datepicker--cell.-current-:hover {
background: rgba(96, 196, 245, 0.05); }
+ .datepicker--cell.-disabled- {
+ cursor: default;
+ background: none; }
.datepicker--cell.-selected- {
color: #fff;
background: skyblue; }
+ .datepicker--cell.-selected-.-current- {
+ color: #fff;
+ background: skyblue; }
-.datepicker--cell-day.-other-month- {
- color: #ddd; }
+.datepicker--cell-day {
+ border-radius: 50%; }
+ .datepicker--cell-day.-other-month- {
+ color: #ddd; }
+ .datepicker--cell-day.-other-month-.-selected- {
+ color: #fff;
+ background: #def2fa; }
+ .datepicker--cell-day.-other-month-.-selected-.-disabled- {
+ background: none;
+ border: none; }
.datepicker--cell-month {
width: 33.33%;
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index b04f56e..5748216 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -9,6 +9,7 @@ var Datepicker;
'
' +
'',
defaults = {
+ //TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
@@ -18,8 +19,10 @@ var Datepicker;
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
- showOtherMonths: '',
- selectOtherMonths: '',
+ //TODO сделать тоже самое с годами
+ showOtherMonths: true,
+ selectOtherMonths: true,
+ moveToOtherMonthsOnSelect: true,
//TODO сделать минимальные, максимальные даты
minDate: '',
@@ -56,7 +59,7 @@ var Datepicker;
}
this.inited = false;
-
+ this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.start;
this.currentView = this.opts.defaultView;
this.selectedDates = [];
@@ -184,6 +187,15 @@ var Datepicker;
},
selectDate: function (date) {
+ var d = this.parsedDate;
+
+ if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
+ this.silent = true;
+ this.date = new Date(date.getFullYear(),date.getMonth(), 1);
+ this.silent = false;
+ this.nav._render()
+ }
+
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
this.selectedDates.push(date);
@@ -221,7 +233,7 @@ var Datepicker;
set date (val) {
this.currentDate = val;
- if (this.inited) {
+ if (this.inited && !this.silent) {
this.views[this.view]._render();
this.nav._render();
}
@@ -487,14 +499,27 @@ Datepicker.Cell = function () {
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
- d = Datepicker.getParsedDate(date);
+ d = Datepicker.getParsedDate(date),
+ html = d.date;
+
if (this.d.isWeekend(d.day)) _class += " -weekend-";
- if (d.month != this.d.parsedDate.month) _class += " -other-month-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+ if (d.month != this.d.parsedDate.month) {
+ _class += " -other-month-";
- return '' + date.getDate() + '
';
+ if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
+ _class += " -disabled-";
+ }
+
+ if (!this.opts.showOtherMonths) html = '';
+ }
+
+ return '' + html + '
';
},
/**
@@ -577,7 +602,7 @@ Datepicker.Cell = function () {
},
_render: function () {
- this._renderTypes[this.type].bind(this)()
+ this._renderTypes[this.type].bind(this)();
},
show: function () {
@@ -595,10 +620,12 @@ Datepicker.Cell = function () {
_handleClick: {
days: function (el) {
+ if (el.hasClass('-disabled-')) return;
+
var date = el.data('date'),
month = el.data('month'),
- d = this.d.parsedDate,
- selectedDate = new Date(d.year, month, date),
+ year = el.data('year'),
+ selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index c45b69a..6507ed1 100644
--- a/js/datepicker/body.js
+++ b/js/datepicker/body.js
@@ -87,14 +87,27 @@
_getDayHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
- d = Datepicker.getParsedDate(date);
+ d = Datepicker.getParsedDate(date),
+ html = d.date;
+
if (this.d.isWeekend(d.day)) _class += " -weekend-";
- if (d.month != this.d.parsedDate.month) _class += " -other-month-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+ if (d.month != this.d.parsedDate.month) {
+ _class += " -other-month-";
- return '' + date.getDate() + '
';
+ if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
+ _class += " -disabled-";
+ }
+
+ if (!this.opts.showOtherMonths) html = '';
+ }
+
+ return '' + html + '
';
},
/**
@@ -177,7 +190,7 @@
},
_render: function () {
- this._renderTypes[this.type].bind(this)()
+ this._renderTypes[this.type].bind(this)();
},
show: function () {
@@ -195,10 +208,12 @@
_handleClick: {
days: function (el) {
+ if (el.hasClass('-disabled-')) return;
+
var date = el.data('date'),
month = el.data('month'),
- d = this.d.parsedDate,
- selectedDate = new Date(d.year, month, date),
+ year = el.data('year'),
+ selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index f01814b..bbf3110 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -9,6 +9,7 @@ var Datepicker;
'' +
'',
defaults = {
+ //TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
@@ -18,8 +19,10 @@ var Datepicker;
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
- showOtherMonths: '',
- selectOtherMonths: '',
+ //TODO сделать тоже самое с годами
+ showOtherMonths: true,
+ selectOtherMonths: true,
+ moveToOtherMonthsOnSelect: true,
//TODO сделать минимальные, максимальные даты
minDate: '',
@@ -56,7 +59,7 @@ var Datepicker;
}
this.inited = false;
-
+ this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.start;
this.currentView = this.opts.defaultView;
this.selectedDates = [];
@@ -184,6 +187,15 @@ var Datepicker;
},
selectDate: function (date) {
+ var d = this.parsedDate;
+
+ if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
+ this.silent = true;
+ this.date = new Date(date.getFullYear(),date.getMonth(), 1);
+ this.silent = false;
+ this.nav._render()
+ }
+
if (this.opts.multipleDates) {
if (!this._isSelected(date)) {
this.selectedDates.push(date);
@@ -221,7 +233,7 @@ var Datepicker;
set date (val) {
this.currentDate = val;
- if (this.inited) {
+ if (this.inited && !this.silent) {
this.views[this.view]._render();
this.nav._render();
}
diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss
index ea23475..0eaad0d 100644
--- a/sass/datepicker/_cell.scss
+++ b/sass/datepicker/_cell.scss
@@ -33,9 +33,19 @@
}
}
+ &.-disabled- {
+ cursor: default;
+ background: none;
+ }
+
&.-selected- {
color: #fff;
- background: skyblue;
+ background: $colorCellSelected;
+
+ &.-current- {
+ color: #fff;
+ background: $colorCellSelected;
+ }
}
}
@@ -43,8 +53,21 @@
// -------------------------------------------------
.datepicker--cell-day {
+ border-radius: 50%;
+
&.-other-month- {
color: $colorAnotherMonth;
+
+ &.-selected- {
+ color: #fff;
+ background: lighten($colorCellSelected, 20%);
+
+ &.-disabled- {
+ background: none;
+ border: none;
+ }
+
+ }
}
}
diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
index 89f517a..5a9f079 100644
--- a/sass/datepicker/_datepicker.scss
+++ b/sass/datepicker/_datepicker.scss
@@ -16,7 +16,6 @@
.datepicker--body {
display: none;
- margin: -1px;
&.active {
display: block;
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
index 3c8cb72..ea59101 100644
--- a/sass/datepicker/datepicker-config.scss
+++ b/sass/datepicker/datepicker-config.scss
@@ -12,5 +12,5 @@ $colorGrey: #ddd;
$colorAnotherMonth: #ddd;
$colorCellHover: #eee;
$colorCellCurrent: #60C4F5;
-$colorCellSelected: '';
+$colorCellSelected: skyblue;
$colorCellWeekend: '';
\ No newline at end of file