jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

complete 'range' feature

Browse Source
This commit is contained in:
t1m0n 2015-12-09 14:14:20 +03:00
parent aa59bb60c5
commit fca5ef4782
8 changed files with 120 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
dist/css/datepicker.css vendored
View File

@ -10,10 +10,10 @@
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; } background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: #EAF9FF; background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; } color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #effaff; } background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -43,38 +43,45 @@
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
height: 32px; height: 32px;
z-index: 1; z-index: 1; }
/*&:hover, */ }
.datepicker--cell.-focus- { .datepicker--cell.-focus- {
background: #f0f0f0; } background: #f0f0f0; }
.datepicker--cell.-current- { .datepicker--cell.-current- {
color: #4EB5E6; } color: #4EB5E6; }
.datepicker--cell.-current-.-focus- { .datepicker--cell.-current-.-focus- {
color: #4a4a4a; } color: #4a4a4a; }
.datepicker--cell.-current-.-in-range- {
color: #4EB5E6; }
.datepicker--cell.-in-range- { .datepicker--cell.-in-range- {
background: #EAF9FF; background: rgba(92, 196, 239, 0.1);
color: #4a4a4a; color: #4a4a4a;
padding: 0; padding: 0;
background-clip: content-box; background-clip: content-box;
border-radius: 0; } border-radius: 0; }
.datepicker--cell.-in-range-.-focus- { .datepicker--cell.-in-range-.-focus- {
background-color: #d0f2ff; } background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell.-disabled- { .datepicker--cell.-disabled- {
cursor: default; cursor: default;
color: #aeaeae; } color: #aeaeae; }
.datepicker--cell.-disabled-.-focus- { .datepicker--cell.-disabled-.-focus- {
color: #aeaeae; color: #aeaeae; }
background: #f0f0f0; } .datepicker--cell.-disabled-.-in-range- {
.datepicker--cell.-disabled-.-current-:hover { color: #a1a1a1; }
.datepicker--cell.-disabled-.-current-.-focus- {
color: #aeaeae; } color: #aeaeae; }
.datepicker--cell.-range-from- { .datepicker--cell.-range-from- {
border: 1px solid rgba(92, 196, 239, 0.5);
background-color: rgba(92, 196, 239, 0.1);
border-radius: 4px 0 0 4px; } border-radius: 4px 0 0 4px; }
.datepicker--cell.-range-to- { .datepicker--cell.-range-to- {
border: 1px solid rgba(92, 196, 239, 0.5);
background-color: rgba(92, 196, 239, 0.1);
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
.datepicker--cell.-range-from-.-range-to- { .datepicker--cell.-range-from-.-range-to- {
border-radius: 4px; } border-radius: 4px; }
.datepicker--cell.-selected- { .datepicker--cell.-selected- {
color: #fff; color: #fff;
border: none;
background: #5cc4ef; } background: #5cc4ef; }
.datepicker--cell.-selected-.-current- { .datepicker--cell.-selected-.-current- {
color: #fff; color: #fff;
@ -141,10 +148,10 @@
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; } background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: #EAF9FF; background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; } color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #effaff; } background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -265,10 +272,10 @@
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; } background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: #EAF9FF; background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; } color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #effaff; } background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -372,10 +379,10 @@
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
background: #8ad5f4; } background: #8ad5f4; }
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
background-color: #EAF9FF; background-color: rgba(92, 196, 239, 0.1);
color: #cccccc; } color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #effaff; } background-color: rgba(92, 196, 239, 0.2); }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }

2
dist/css/datepicker.min.css vendored
View File

File diff suppressed because one or more lines are too long

73
dist/js/datepicker.js vendored
View File

@ -44,7 +44,7 @@ var Datepicker;
multipleDates: false, // Boolean or Number multipleDates: false, // Boolean or Number
multipleDatesSeparator: ',', multipleDatesSeparator: ',',
range: true, range: false,
todayButton: false, todayButton: false,
clearButton: false, clearButton: false,
@ -84,7 +84,8 @@ var Datepicker;
'altLeft': [18, 37], 'altLeft': [18, 37],
'altDown': [18, 40], 'altDown': [18, 40],
'ctrlShiftUp': [16, 17, 38] 'ctrlShiftUp': [16, 17, 38]
}; },
datepicker;
Datepicker = function (el, options) { Datepicker = function (el, options) {
this.el = el; this.el = el;
@ -124,8 +125,9 @@ var Datepicker;
this.init() this.init()
}; };
datepicker = Datepicker;
Datepicker.prototype = { datepicker.prototype = {
viewIndexes: ['days', 'months', 'years'], viewIndexes: ['days', 'months', 'years'],
init: function () { init: function () {
@ -236,7 +238,7 @@ var Datepicker;
} }
var selectedDates = this.selectedDates, var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]), parsedSelected = datepicker.getParsedDate(selectedDates[0]),
formattedDates, formattedDates,
_this = this, _this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date); dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -248,7 +250,7 @@ var Datepicker;
// Create new dates array, to separate it from original selectedDates // Create new dates array, to separate it from original selectedDates
if (this.opts.multipleDates) { if (this.opts.multipleDates) {
dates = selectedDates.map(function(date) { dates = selectedDates.map(function(date) {
var parsedDate = Datepicker.getParsedDate(date); var parsedDate = datepicker.getParsedDate(date);
return new Date(parsedDate.year, parsedDate.month, parsedDate.date) return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
}) })
} }
@ -298,8 +300,8 @@ var Datepicker;
date = date || this.date; date = date || this.date;
var result = string, var result = string,
locale = this.loc, locale = this.loc,
decade = Datepicker.getDecade(date), decade = datepicker.getDecade(date),
d = Datepicker.getParsedDate(date); d = datepicker.getParsedDate(date);
switch (true) { switch (true) {
case /@/.test(result): case /@/.test(result):
@ -407,7 +409,7 @@ var Datepicker;
if (!(date instanceof Date)) return; if (!(date instanceof Date)) return;
return selected.some(function (curDate, i) { return selected.some(function (curDate, i) {
if (Datepicker.isSame(curDate, date)) { if (datepicker.isSame(curDate, date)) {
selected.splice(i, 1); selected.splice(i, 1);
_this.views[_this.currentView]._render(); _this.views[_this.currentView]._render();
_this._setInputValue(); _this._setInputValue();
@ -431,6 +433,7 @@ var Datepicker;
this.minRange = ''; this.minRange = '';
this.maxRange = ''; this.maxRange = '';
this.views[this.currentView]._render(); this.views[this.currentView]._render();
this._setInputValue();
if (this.opts.onSelect) { if (this.opts.onSelect) {
this._triggerOnChange() this._triggerOnChange()
} }
@ -485,7 +488,7 @@ var Datepicker;
_isSelected: function (checkDate, cellType) { _isSelected: function (checkDate, cellType) {
return this.selectedDates.some(function (date) { return this.selectedDates.some(function (date) {
return Datepicker.isSame(date, checkDate, cellType) return datepicker.isSame(date, checkDate, cellType)
}) })
}, },
@ -502,6 +505,7 @@ var Datepicker;
altValues = this.selectedDates.map(function (date) { altValues = this.selectedDates.map(function (date) {
return _this.formatDate(altFormat, date) return _this.formatDate(altFormat, date)
}); });
altValues = altValues.join(this.opts.multipleDatesSeparator);
this.$altField.val(altValues); this.$altField.val(altValues);
} }
@ -519,9 +523,9 @@ var Datepicker;
*/ */
_isInRange: function (date, type) { _isInRange: function (date, type) {
var time = date.getTime(), var time = date.getTime(),
d = Datepicker.getParsedDate(date), d = datepicker.getParsedDate(date),
min = Datepicker.getParsedDate(this.minDate), min = datepicker.getParsedDate(this.minDate),
max = Datepicker.getParsedDate(this.maxDate), max = datepicker.getParsedDate(this.maxDate),
dMinTime = new Date(d.year, d.month, min.date).getTime(), dMinTime = new Date(d.year, d.month, min.date).getTime(),
dMaxTime = new Date(d.year, d.month, max.date).getTime(), dMaxTime = new Date(d.year, d.month, max.date).getTime(),
types = { types = {
@ -663,7 +667,7 @@ var Datepicker;
}, },
_handleHotKey: function (key) { _handleHotKey: function (key) {
var date = Datepicker.getParsedDate(this._getFocusedDate()), var date = datepicker.getParsedDate(this._getFocusedDate()),
focusedParsed, focusedParsed,
o = this.opts, o = this.opts,
newDate, newDate,
@ -711,7 +715,7 @@ var Datepicker;
break; break;
} }
totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m)); totalDaysInNextMonth = datepicker.getDaysCount(new Date(y,m));
newDate = new Date(y,m,d); newDate = new Date(y,m,d);
// If next month has less days than current, set date to total days in that month // If next month has less days than current, set date to total days in that month
@ -726,7 +730,7 @@ var Datepicker;
this.focused = newDate; this.focused = newDate;
focusedParsed = Datepicker.getParsedDate(newDate); focusedParsed = datepicker.getParsedDate(newDate);
if (monthChanged && o.onChangeMonth) { if (monthChanged && o.onChangeMonth) {
o.onChangeMonth(focusedParsed.month, focusedParsed.year) o.onChangeMonth(focusedParsed.month, focusedParsed.year)
} }
@ -780,7 +784,7 @@ var Datepicker;
_focusNextCell: function (keyCode, type) { _focusNextCell: function (keyCode, type) {
type = type || this.cellType; type = type || this.cellType;
var date = Datepicker.getParsedDate(this._getFocusedDate()), var date = datepicker.getParsedDate(this._getFocusedDate()),
y = date.year, y = date.year,
m = date.month, m = date.month,
d = date.date; d = date.date;
@ -847,7 +851,7 @@ var Datepicker;
_getCell: function (date, type) { _getCell: function (date, type) {
type = type || this.cellType; type = type || this.cellType;
var d = Datepicker.getParsedDate(date), var d = datepicker.getParsedDate(date),
selector = '.datepicker--cell[data-year="' + d.year + '"]', selector = '.datepicker--cell[data-year="' + d.year + '"]',
$cell; $cell;
@ -962,7 +966,7 @@ var Datepicker;
if (this.opts.range && this.selectedDates.length == 1) { if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0]; this.minRange = this.selectedDates[0];
this.maxRange = ''; this.maxRange = '';
if (Datepicker.less(this.minRange, this.focused)) { if (datepicker.less(this.minRange, this.focused)) {
this.maxRange = this.minRange; this.maxRange = this.minRange;
this.minRange = ''; this.minRange = '';
} }
@ -993,7 +997,7 @@ var Datepicker;
if (this.opts.range && this.selectedDates.length == 1) { if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0]; this.minRange = this.selectedDates[0];
this.maxRange = ''; this.maxRange = '';
if (Datepicker.less(this.minRange, this._focused)) { if (datepicker.less(this.minRange, this._focused)) {
this.maxRange = this.minRange; this.maxRange = this.minRange;
this.minRange = ''; this.minRange = '';
} }
@ -1007,7 +1011,7 @@ var Datepicker;
}, },
get parsedDate() { get parsedDate() {
return Datepicker.getParsedDate(this.date); return datepicker.getParsedDate(this.date);
}, },
set date (val) { set date (val) {
@ -1069,28 +1073,28 @@ var Datepicker;
}, },
get minTime() { get minTime() {
var min = Datepicker.getParsedDate(this.minDate); var min = datepicker.getParsedDate(this.minDate);
return new Date(min.year, min.month, min.date).getTime() return new Date(min.year, min.month, min.date).getTime()
}, },
get maxTime() { get maxTime() {
var max = Datepicker.getParsedDate(this.maxDate); var max = datepicker.getParsedDate(this.maxDate);
return new Date(max.year, max.month, max.date).getTime() return new Date(max.year, max.month, max.date).getTime()
}, },
get curDecade() { get curDecade() {
return Datepicker.getDecade(this.date) return datepicker.getDecade(this.date)
} }
}; };
// Utils // Utils
// ------------------------------------------------- // -------------------------------------------------
Datepicker.getDaysCount = function (date) { datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
}; };
Datepicker.getParsedDate = function (date) { datepicker.getParsedDate = function (date) {
return { return {
year: date.getFullYear(), year: date.getFullYear(),
month: date.getMonth(), month: date.getMonth(),
@ -1101,13 +1105,13 @@ var Datepicker;
} }
}; };
Datepicker.getDecade = function (date) { datepicker.getDecade = function (date) {
var firstYear = Math.floor(date.getFullYear() / 10) * 10; var firstYear = Math.floor(date.getFullYear() / 10) * 10;
return [firstYear, firstYear + 9]; return [firstYear, firstYear + 9];
}; };
Datepicker.template = function (str, data) { datepicker.template = function (str, data) {
return str.replace(/#\{([\w]+)\}/g, function (source, match) { return str.replace(/#\{([\w]+)\}/g, function (source, match) {
if (data[match] || data[match] === 0) { if (data[match] || data[match] === 0) {
return data[match] return data[match]
@ -1115,10 +1119,10 @@ var Datepicker;
}); });
}; };
Datepicker.isSame = function (date1, date2, type) { datepicker.isSame = function (date1, date2, type) {
if (!date1 || !date2) return false; if (!date1 || !date2) return false;
var d1 = Datepicker.getParsedDate(date1), var d1 = datepicker.getParsedDate(date1),
d2 = Datepicker.getParsedDate(date2), d2 = datepicker.getParsedDate(date2),
_type = type ? type : 'day', _type = type ? type : 'day',
conditions = { conditions = {
@ -1130,12 +1134,12 @@ var Datepicker;
return conditions[_type]; return conditions[_type];
}; };
Datepicker.less = function (dateCompareTo, date, type) { datepicker.less = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false; if (!dateCompareTo || !date) return false;
return date.getTime() < dateCompareTo.getTime(); return date.getTime() < dateCompareTo.getTime();
}; };
Datepicker.bigger = function (dateCompareTo, date, type) { datepicker.bigger = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false; if (!dateCompareTo || !date) return false;
return date.getTime() > dateCompareTo.getTime(); return date.getTime() > dateCompareTo.getTime();
}; };
@ -1155,8 +1159,8 @@ var Datepicker;
}; };
$.fn[pluginName] = function ( options ) { $.fn[pluginName] = function ( options ) {
if (Datepicker.prototype[options]) { if (datepicker.prototype[options]) {
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1)); datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
} else { } else {
return this.each(function () { return this.each(function () {
if (!$.data(this, pluginName)) { if (!$.data(this, pluginName)) {
@ -1554,6 +1558,7 @@ var Datepicker;
}, },
html = Datepicker.template(button, data); html = Datepicker.template(button, data);
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
this.$buttonsContainer.append(html); this.$buttonsContainer.append(html);
}, },

2
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

72
src/js/datepicker.js
View File

@ -44,7 +44,7 @@ var Datepicker;
multipleDates: false, // Boolean or Number multipleDates: false, // Boolean or Number
multipleDatesSeparator: ',', multipleDatesSeparator: ',',
range: true, range: false,
todayButton: false, todayButton: false,
clearButton: false, clearButton: false,
@ -84,7 +84,8 @@ var Datepicker;
'altLeft': [18, 37], 'altLeft': [18, 37],
'altDown': [18, 40], 'altDown': [18, 40],
'ctrlShiftUp': [16, 17, 38] 'ctrlShiftUp': [16, 17, 38]
}; },
datepicker;
Datepicker = function (el, options) { Datepicker = function (el, options) {
this.el = el; this.el = el;
@ -124,8 +125,9 @@ var Datepicker;
this.init() this.init()
}; };
datepicker = Datepicker;
Datepicker.prototype = { datepicker.prototype = {
viewIndexes: ['days', 'months', 'years'], viewIndexes: ['days', 'months', 'years'],
init: function () { init: function () {
@ -236,7 +238,7 @@ var Datepicker;
} }
var selectedDates = this.selectedDates, var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]), parsedSelected = datepicker.getParsedDate(selectedDates[0]),
formattedDates, formattedDates,
_this = this, _this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date); dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -248,7 +250,7 @@ var Datepicker;
// Create new dates array, to separate it from original selectedDates // Create new dates array, to separate it from original selectedDates
if (this.opts.multipleDates) { if (this.opts.multipleDates) {
dates = selectedDates.map(function(date) { dates = selectedDates.map(function(date) {
var parsedDate = Datepicker.getParsedDate(date); var parsedDate = datepicker.getParsedDate(date);
return new Date(parsedDate.year, parsedDate.month, parsedDate.date) return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
}) })
} }
@ -298,8 +300,8 @@ var Datepicker;
date = date || this.date; date = date || this.date;
var result = string, var result = string,
locale = this.loc, locale = this.loc,
decade = Datepicker.getDecade(date), decade = datepicker.getDecade(date),
d = Datepicker.getParsedDate(date); d = datepicker.getParsedDate(date);
switch (true) { switch (true) {
case /@/.test(result): case /@/.test(result):
@ -407,7 +409,7 @@ var Datepicker;
if (!(date instanceof Date)) return; if (!(date instanceof Date)) return;
return selected.some(function (curDate, i) { return selected.some(function (curDate, i) {
if (Datepicker.isSame(curDate, date)) { if (datepicker.isSame(curDate, date)) {
selected.splice(i, 1); selected.splice(i, 1);
_this.views[_this.currentView]._render(); _this.views[_this.currentView]._render();
_this._setInputValue(); _this._setInputValue();
@ -431,6 +433,7 @@ var Datepicker;
this.minRange = ''; this.minRange = '';
this.maxRange = ''; this.maxRange = '';
this.views[this.currentView]._render(); this.views[this.currentView]._render();
this._setInputValue();
if (this.opts.onSelect) { if (this.opts.onSelect) {
this._triggerOnChange() this._triggerOnChange()
} }
@ -485,7 +488,7 @@ var Datepicker;
_isSelected: function (checkDate, cellType) { _isSelected: function (checkDate, cellType) {
return this.selectedDates.some(function (date) { return this.selectedDates.some(function (date) {
return Datepicker.isSame(date, checkDate, cellType) return datepicker.isSame(date, checkDate, cellType)
}) })
}, },
@ -502,6 +505,7 @@ var Datepicker;
altValues = this.selectedDates.map(function (date) { altValues = this.selectedDates.map(function (date) {
return _this.formatDate(altFormat, date) return _this.formatDate(altFormat, date)
}); });
altValues = altValues.join(this.opts.multipleDatesSeparator);
this.$altField.val(altValues); this.$altField.val(altValues);
} }
@ -519,9 +523,9 @@ var Datepicker;
*/ */
_isInRange: function (date, type) { _isInRange: function (date, type) {
var time = date.getTime(), var time = date.getTime(),
d = Datepicker.getParsedDate(date), d = datepicker.getParsedDate(date),
min = Datepicker.getParsedDate(this.minDate), min = datepicker.getParsedDate(this.minDate),
max = Datepicker.getParsedDate(this.maxDate), max = datepicker.getParsedDate(this.maxDate),
dMinTime = new Date(d.year, d.month, min.date).getTime(), dMinTime = new Date(d.year, d.month, min.date).getTime(),
dMaxTime = new Date(d.year, d.month, max.date).getTime(), dMaxTime = new Date(d.year, d.month, max.date).getTime(),
types = { types = {
@ -663,7 +667,7 @@ var Datepicker;
}, },
_handleHotKey: function (key) { _handleHotKey: function (key) {
var date = Datepicker.getParsedDate(this._getFocusedDate()), var date = datepicker.getParsedDate(this._getFocusedDate()),
focusedParsed, focusedParsed,
o = this.opts, o = this.opts,
newDate, newDate,
@ -711,7 +715,7 @@ var Datepicker;
break; break;
} }
totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m)); totalDaysInNextMonth = datepicker.getDaysCount(new Date(y,m));
newDate = new Date(y,m,d); newDate = new Date(y,m,d);
// If next month has less days than current, set date to total days in that month // If next month has less days than current, set date to total days in that month
@ -726,7 +730,7 @@ var Datepicker;
this.focused = newDate; this.focused = newDate;
focusedParsed = Datepicker.getParsedDate(newDate); focusedParsed = datepicker.getParsedDate(newDate);
if (monthChanged && o.onChangeMonth) { if (monthChanged && o.onChangeMonth) {
o.onChangeMonth(focusedParsed.month, focusedParsed.year) o.onChangeMonth(focusedParsed.month, focusedParsed.year)
} }
@ -780,7 +784,7 @@ var Datepicker;
_focusNextCell: function (keyCode, type) { _focusNextCell: function (keyCode, type) {
type = type || this.cellType; type = type || this.cellType;
var date = Datepicker.getParsedDate(this._getFocusedDate()), var date = datepicker.getParsedDate(this._getFocusedDate()),
y = date.year, y = date.year,
m = date.month, m = date.month,
d = date.date; d = date.date;
@ -847,7 +851,7 @@ var Datepicker;
_getCell: function (date, type) { _getCell: function (date, type) {
type = type || this.cellType; type = type || this.cellType;
var d = Datepicker.getParsedDate(date), var d = datepicker.getParsedDate(date),
selector = '.datepicker--cell[data-year="' + d.year + '"]', selector = '.datepicker--cell[data-year="' + d.year + '"]',
$cell; $cell;
@ -962,7 +966,7 @@ var Datepicker;
if (this.opts.range && this.selectedDates.length == 1) { if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0]; this.minRange = this.selectedDates[0];
this.maxRange = ''; this.maxRange = '';
if (Datepicker.less(this.minRange, this.focused)) { if (datepicker.less(this.minRange, this.focused)) {
this.maxRange = this.minRange; this.maxRange = this.minRange;
this.minRange = ''; this.minRange = '';
} }
@ -993,7 +997,7 @@ var Datepicker;
if (this.opts.range && this.selectedDates.length == 1) { if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0]; this.minRange = this.selectedDates[0];
this.maxRange = ''; this.maxRange = '';
if (Datepicker.less(this.minRange, this._focused)) { if (datepicker.less(this.minRange, this._focused)) {
this.maxRange = this.minRange; this.maxRange = this.minRange;
this.minRange = ''; this.minRange = '';
} }
@ -1007,7 +1011,7 @@ var Datepicker;
}, },
get parsedDate() { get parsedDate() {
return Datepicker.getParsedDate(this.date); return datepicker.getParsedDate(this.date);
}, },
set date (val) { set date (val) {
@ -1069,28 +1073,28 @@ var Datepicker;
}, },
get minTime() { get minTime() {
var min = Datepicker.getParsedDate(this.minDate); var min = datepicker.getParsedDate(this.minDate);
return new Date(min.year, min.month, min.date).getTime() return new Date(min.year, min.month, min.date).getTime()
}, },
get maxTime() { get maxTime() {
var max = Datepicker.getParsedDate(this.maxDate); var max = datepicker.getParsedDate(this.maxDate);
return new Date(max.year, max.month, max.date).getTime() return new Date(max.year, max.month, max.date).getTime()
}, },
get curDecade() { get curDecade() {
return Datepicker.getDecade(this.date) return datepicker.getDecade(this.date)
} }
}; };
// Utils // Utils
// ------------------------------------------------- // -------------------------------------------------
Datepicker.getDaysCount = function (date) { datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
}; };
Datepicker.getParsedDate = function (date) { datepicker.getParsedDate = function (date) {
return { return {
year: date.getFullYear(), year: date.getFullYear(),
month: date.getMonth(), month: date.getMonth(),
@ -1101,13 +1105,13 @@ var Datepicker;
} }
}; };
Datepicker.getDecade = function (date) { datepicker.getDecade = function (date) {
var firstYear = Math.floor(date.getFullYear() / 10) * 10; var firstYear = Math.floor(date.getFullYear() / 10) * 10;
return [firstYear, firstYear + 9]; return [firstYear, firstYear + 9];
}; };
Datepicker.template = function (str, data) { datepicker.template = function (str, data) {
return str.replace(/#\{([\w]+)\}/g, function (source, match) { return str.replace(/#\{([\w]+)\}/g, function (source, match) {
if (data[match] || data[match] === 0) { if (data[match] || data[match] === 0) {
return data[match] return data[match]
@ -1115,10 +1119,10 @@ var Datepicker;
}); });
}; };
Datepicker.isSame = function (date1, date2, type) { datepicker.isSame = function (date1, date2, type) {
if (!date1 || !date2) return false; if (!date1 || !date2) return false;
var d1 = Datepicker.getParsedDate(date1), var d1 = datepicker.getParsedDate(date1),
d2 = Datepicker.getParsedDate(date2), d2 = datepicker.getParsedDate(date2),
_type = type ? type : 'day', _type = type ? type : 'day',
conditions = { conditions = {
@ -1130,12 +1134,12 @@ var Datepicker;
return conditions[_type]; return conditions[_type];
}; };
Datepicker.less = function (dateCompareTo, date, type) { datepicker.less = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false; if (!dateCompareTo || !date) return false;
return date.getTime() < dateCompareTo.getTime(); return date.getTime() < dateCompareTo.getTime();
}; };
Datepicker.bigger = function (dateCompareTo, date, type) { datepicker.bigger = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false; if (!dateCompareTo || !date) return false;
return date.getTime() > dateCompareTo.getTime(); return date.getTime() > dateCompareTo.getTime();
}; };
@ -1155,8 +1159,8 @@ var Datepicker;
}; };
$.fn[pluginName] = function ( options ) { $.fn[pluginName] = function ( options ) {
if (Datepicker.prototype[options]) { if (datepicker.prototype[options]) {
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1)); datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
} else { } else {
return this.each(function () { return this.each(function () {
if (!$.data(this, pluginName)) { if (!$.data(this, pluginName)) {

1
src/js/navigation.js
View File

@ -66,6 +66,7 @@
}, },
html = Datepicker.template(button, data); html = Datepicker.template(button, data);
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
this.$buttonsContainer.append(html); this.$buttonsContainer.append(html);
}, },

4
src/sass/_datepicker-config.scss
View File

@ -24,7 +24,7 @@ $textColor: (
$bg: ( $bg: (
selected: #5cc4ef, selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5), selectedHover: darken(#5cc4ef, 5),
inRange: #EAF9FF, inRange: rgba(#5cc4ef, .1),
hover: #f0f0f0 hover: #f0f0f0
); );
@ -72,7 +72,7 @@ $transitionOffset: 8px;
color: darken(map_get($textColor, otherMonth), 7); color: darken(map_get($textColor, otherMonth), 7);
&.-focus- { &.-focus- {
background-color: lighten(map_get($bg, inRange), 1); background-color: rgba(map_get($bg, inRange), .2);
} }
} }

26
src/sass/cell.scss
View File

@ -19,7 +19,7 @@
height: $dayCellSize; height: $dayCellSize;
z-index: 1; z-index: 1;
/*&:hover, */&.-focus- { &.-focus- {
background: map_get($bg, hover); background: map_get($bg, hover);
} }
@ -30,10 +30,9 @@
color: map_get($textColor, common); color: map_get($textColor, common);
} }
//&:hover { &.-in-range- {
// color: map_get($textColor, common); color: map_get($textColor, currentDate);
// //background: rgba(map_get($textColor, currentDate), .05); }
//}
} }
&.-in-range- { &.-in-range- {
@ -44,7 +43,7 @@
border-radius: 0; border-radius: 0;
&.-focus- { &.-focus- {
background-color: darken(map_get($bg, inRange), 5); background-color: rgba(map_get($bg, inRange), .2);
} }
} }
@ -54,31 +53,38 @@
&.-focus- { &.-focus- {
color: map_get($textColor, disabled); color: map_get($textColor, disabled);
background: map_get($bg, hover); }
&.-in-range- {
color: darken(map_get($textColor, disabled), 5);
} }
&.-current- { &.-current- {
&:hover { &.-focus- {
color: map_get($textColor, disabled); color: map_get($textColor, disabled);
} }
} }
} }
&.-range-from- { &.-range-from- {
//background: darken(map_get($bg, hover), 3); border: 1px solid rgba(map_get($bg, selected), .5);
background-color: map_get($bg, inRange);
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius; border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
} }
&.-range-to- { &.-range-to- {
//background: darken(map_get($bg, hover), 3); border: 1px solid rgba(map_get($bg, selected), .5);
background-color: map_get($bg, inRange);
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0; border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
} }
&.-range-from-.-range-to- { &.-range-from-.-range-to- {
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
} }
&.-selected- { &.-selected- {
color: #fff; color: #fff;
border: none;
background: map_get($bg, selected); background: map_get($bg, selected);
&.-current- { &.-current- {