mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
complete 'range' feature
This commit is contained in:
t1m0n
parent
aa59bb60c5
commit
fca5ef4782
37
dist/css/datepicker.css
vendored
37
dist/css/datepicker.css
vendored
@ -10,10 +10,10 @@
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-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; }
|
||||
.-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 {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -43,38 +43,45 @@
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
z-index: 1;
|
||||
/*&:hover, */ }
|
||||
z-index: 1; }
|
||||
.datepicker--cell.-focus- {
|
||||
background: #f0f0f0; }
|
||||
.datepicker--cell.-current- {
|
||||
color: #4EB5E6; }
|
||||
.datepicker--cell.-current-.-focus- {
|
||||
color: #4a4a4a; }
|
||||
.datepicker--cell.-current-.-in-range- {
|
||||
color: #4EB5E6; }
|
||||
.datepicker--cell.-in-range- {
|
||||
background: #EAF9FF;
|
||||
background: rgba(92, 196, 239, 0.1);
|
||||
color: #4a4a4a;
|
||||
padding: 0;
|
||||
background-clip: content-box;
|
||||
border-radius: 0; }
|
||||
.datepicker--cell.-in-range-.-focus- {
|
||||
background-color: #d0f2ff; }
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell.-disabled- {
|
||||
cursor: default;
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-disabled-.-focus- {
|
||||
color: #aeaeae;
|
||||
background: #f0f0f0; }
|
||||
.datepicker--cell.-disabled-.-current-:hover {
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-disabled-.-in-range- {
|
||||
color: #a1a1a1; }
|
||||
.datepicker--cell.-disabled-.-current-.-focus- {
|
||||
color: #aeaeae; }
|
||||
.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; }
|
||||
.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; }
|
||||
.datepicker--cell.-range-from-.-range-to- {
|
||||
border-radius: 4px; }
|
||||
.datepicker--cell.-selected- {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: #5cc4ef; }
|
||||
.datepicker--cell.-selected-.-current- {
|
||||
color: #fff;
|
||||
@ -141,10 +148,10 @@
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-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; }
|
||||
.-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 {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -265,10 +272,10 @@
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-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; }
|
||||
.-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 {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -372,10 +379,10 @@
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-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; }
|
||||
.-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 {
|
||||
background: none;
|
||||
border: none; }
|
||||
|
||||
2
dist/css/datepicker.min.css
vendored
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
73
dist/js/datepicker.js
vendored
73
dist/js/datepicker.js
vendored
@ -44,7 +44,7 @@ var Datepicker;
|
||||
|
||||
multipleDates: false, // Boolean or Number
|
||||
multipleDatesSeparator: ',',
|
||||
range: true,
|
||||
range: false,
|
||||
|
||||
todayButton: false,
|
||||
clearButton: false,
|
||||
@ -84,7 +84,8 @@ var Datepicker;
|
||||
'altLeft': [18, 37],
|
||||
'altDown': [18, 40],
|
||||
'ctrlShiftUp': [16, 17, 38]
|
||||
};
|
||||
},
|
||||
datepicker;
|
||||
|
||||
Datepicker = function (el, options) {
|
||||
this.el = el;
|
||||
@ -124,8 +125,9 @@ var Datepicker;
|
||||
this.init()
|
||||
};
|
||||
|
||||
datepicker = Datepicker;
|
||||
|
||||
Datepicker.prototype = {
|
||||
datepicker.prototype = {
|
||||
viewIndexes: ['days', 'months', 'years'],
|
||||
|
||||
init: function () {
|
||||
@ -236,7 +238,7 @@ var Datepicker;
|
||||
}
|
||||
|
||||
var selectedDates = this.selectedDates,
|
||||
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
|
||||
parsedSelected = datepicker.getParsedDate(selectedDates[0]),
|
||||
formattedDates,
|
||||
_this = this,
|
||||
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
|
||||
if (this.opts.multipleDates) {
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = Datepicker.getParsedDate(date);
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
|
||||
})
|
||||
}
|
||||
@ -298,8 +300,8 @@ var Datepicker;
|
||||
date = date || this.date;
|
||||
var result = string,
|
||||
locale = this.loc,
|
||||
decade = Datepicker.getDecade(date),
|
||||
d = Datepicker.getParsedDate(date);
|
||||
decade = datepicker.getDecade(date),
|
||||
d = datepicker.getParsedDate(date);
|
||||
|
||||
switch (true) {
|
||||
case /@/.test(result):
|
||||
@ -407,7 +409,7 @@ var Datepicker;
|
||||
if (!(date instanceof Date)) return;
|
||||
|
||||
return selected.some(function (curDate, i) {
|
||||
if (Datepicker.isSame(curDate, date)) {
|
||||
if (datepicker.isSame(curDate, date)) {
|
||||
selected.splice(i, 1);
|
||||
_this.views[_this.currentView]._render();
|
||||
_this._setInputValue();
|
||||
@ -431,6 +433,7 @@ var Datepicker;
|
||||
this.minRange = '';
|
||||
this.maxRange = '';
|
||||
this.views[this.currentView]._render();
|
||||
this._setInputValue();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange()
|
||||
}
|
||||
@ -485,7 +488,7 @@ var Datepicker;
|
||||
|
||||
_isSelected: function (checkDate, cellType) {
|
||||
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) {
|
||||
return _this.formatDate(altFormat, date)
|
||||
});
|
||||
altValues = altValues.join(this.opts.multipleDatesSeparator);
|
||||
this.$altField.val(altValues);
|
||||
}
|
||||
|
||||
@ -519,9 +523,9 @@ var Datepicker;
|
||||
*/
|
||||
_isInRange: function (date, type) {
|
||||
var time = date.getTime(),
|
||||
d = Datepicker.getParsedDate(date),
|
||||
min = Datepicker.getParsedDate(this.minDate),
|
||||
max = Datepicker.getParsedDate(this.maxDate),
|
||||
d = datepicker.getParsedDate(date),
|
||||
min = datepicker.getParsedDate(this.minDate),
|
||||
max = datepicker.getParsedDate(this.maxDate),
|
||||
dMinTime = new Date(d.year, d.month, min.date).getTime(),
|
||||
dMaxTime = new Date(d.year, d.month, max.date).getTime(),
|
||||
types = {
|
||||
@ -663,7 +667,7 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_handleHotKey: function (key) {
|
||||
var date = Datepicker.getParsedDate(this._getFocusedDate()),
|
||||
var date = datepicker.getParsedDate(this._getFocusedDate()),
|
||||
focusedParsed,
|
||||
o = this.opts,
|
||||
newDate,
|
||||
@ -711,7 +715,7 @@ var Datepicker;
|
||||
break;
|
||||
}
|
||||
|
||||
totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m));
|
||||
totalDaysInNextMonth = datepicker.getDaysCount(new Date(y,m));
|
||||
newDate = new Date(y,m,d);
|
||||
|
||||
// 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;
|
||||
|
||||
focusedParsed = Datepicker.getParsedDate(newDate);
|
||||
focusedParsed = datepicker.getParsedDate(newDate);
|
||||
if (monthChanged && o.onChangeMonth) {
|
||||
o.onChangeMonth(focusedParsed.month, focusedParsed.year)
|
||||
}
|
||||
@ -780,7 +784,7 @@ var Datepicker;
|
||||
_focusNextCell: function (keyCode, type) {
|
||||
type = type || this.cellType;
|
||||
|
||||
var date = Datepicker.getParsedDate(this._getFocusedDate()),
|
||||
var date = datepicker.getParsedDate(this._getFocusedDate()),
|
||||
y = date.year,
|
||||
m = date.month,
|
||||
d = date.date;
|
||||
@ -847,7 +851,7 @@ var Datepicker;
|
||||
_getCell: function (date, type) {
|
||||
type = type || this.cellType;
|
||||
|
||||
var d = Datepicker.getParsedDate(date),
|
||||
var d = datepicker.getParsedDate(date),
|
||||
selector = '.datepicker--cell[data-year="' + d.year + '"]',
|
||||
$cell;
|
||||
|
||||
@ -962,7 +966,7 @@ var Datepicker;
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.minRange = this.selectedDates[0];
|
||||
this.maxRange = '';
|
||||
if (Datepicker.less(this.minRange, this.focused)) {
|
||||
if (datepicker.less(this.minRange, this.focused)) {
|
||||
this.maxRange = this.minRange;
|
||||
this.minRange = '';
|
||||
}
|
||||
@ -993,7 +997,7 @@ var Datepicker;
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.minRange = this.selectedDates[0];
|
||||
this.maxRange = '';
|
||||
if (Datepicker.less(this.minRange, this._focused)) {
|
||||
if (datepicker.less(this.minRange, this._focused)) {
|
||||
this.maxRange = this.minRange;
|
||||
this.minRange = '';
|
||||
}
|
||||
@ -1007,7 +1011,7 @@ var Datepicker;
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
return datepicker.getParsedDate(this.date);
|
||||
},
|
||||
|
||||
set date (val) {
|
||||
@ -1069,28 +1073,28 @@ var Datepicker;
|
||||
},
|
||||
|
||||
get minTime() {
|
||||
var min = Datepicker.getParsedDate(this.minDate);
|
||||
var min = datepicker.getParsedDate(this.minDate);
|
||||
return new Date(min.year, min.month, min.date).getTime()
|
||||
},
|
||||
|
||||
get maxTime() {
|
||||
var max = Datepicker.getParsedDate(this.maxDate);
|
||||
var max = datepicker.getParsedDate(this.maxDate);
|
||||
return new Date(max.year, max.month, max.date).getTime()
|
||||
},
|
||||
|
||||
get curDecade() {
|
||||
return Datepicker.getDecade(this.date)
|
||||
return datepicker.getDecade(this.date)
|
||||
}
|
||||
};
|
||||
|
||||
// Utils
|
||||
// -------------------------------------------------
|
||||
|
||||
Datepicker.getDaysCount = function (date) {
|
||||
datepicker.getDaysCount = function (date) {
|
||||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||||
};
|
||||
|
||||
Datepicker.getParsedDate = function (date) {
|
||||
datepicker.getParsedDate = function (date) {
|
||||
return {
|
||||
year: date.getFullYear(),
|
||||
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;
|
||||
|
||||
return [firstYear, firstYear + 9];
|
||||
};
|
||||
|
||||
Datepicker.template = function (str, data) {
|
||||
datepicker.template = function (str, data) {
|
||||
return str.replace(/#\{([\w]+)\}/g, function (source, match) {
|
||||
if (data[match] || data[match] === 0) {
|
||||
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;
|
||||
var d1 = Datepicker.getParsedDate(date1),
|
||||
d2 = Datepicker.getParsedDate(date2),
|
||||
var d1 = datepicker.getParsedDate(date1),
|
||||
d2 = datepicker.getParsedDate(date2),
|
||||
_type = type ? type : 'day',
|
||||
|
||||
conditions = {
|
||||
@ -1130,12 +1134,12 @@ var Datepicker;
|
||||
return conditions[_type];
|
||||
};
|
||||
|
||||
Datepicker.less = function (dateCompareTo, date, type) {
|
||||
datepicker.less = function (dateCompareTo, date, type) {
|
||||
if (!dateCompareTo || !date) return false;
|
||||
return date.getTime() < dateCompareTo.getTime();
|
||||
};
|
||||
|
||||
Datepicker.bigger = function (dateCompareTo, date, type) {
|
||||
datepicker.bigger = function (dateCompareTo, date, type) {
|
||||
if (!dateCompareTo || !date) return false;
|
||||
return date.getTime() > dateCompareTo.getTime();
|
||||
};
|
||||
@ -1155,8 +1159,8 @@ var Datepicker;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
if (Datepicker.prototype[options]) {
|
||||
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
if (datepicker.prototype[options]) {
|
||||
datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
} else {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
@ -1554,6 +1558,7 @@ var Datepicker;
|
||||
},
|
||||
html = Datepicker.template(button, data);
|
||||
|
||||
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
|
||||
this.$buttonsContainer.append(html);
|
||||
},
|
||||
|
||||
|
||||
2
dist/js/datepicker.min.js
vendored
2
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -44,7 +44,7 @@ var Datepicker;
|
||||
|
||||
multipleDates: false, // Boolean or Number
|
||||
multipleDatesSeparator: ',',
|
||||
range: true,
|
||||
range: false,
|
||||
|
||||
todayButton: false,
|
||||
clearButton: false,
|
||||
@ -84,7 +84,8 @@ var Datepicker;
|
||||
'altLeft': [18, 37],
|
||||
'altDown': [18, 40],
|
||||
'ctrlShiftUp': [16, 17, 38]
|
||||
};
|
||||
},
|
||||
datepicker;
|
||||
|
||||
Datepicker = function (el, options) {
|
||||
this.el = el;
|
||||
@ -124,8 +125,9 @@ var Datepicker;
|
||||
this.init()
|
||||
};
|
||||
|
||||
datepicker = Datepicker;
|
||||
|
||||
Datepicker.prototype = {
|
||||
datepicker.prototype = {
|
||||
viewIndexes: ['days', 'months', 'years'],
|
||||
|
||||
init: function () {
|
||||
@ -236,7 +238,7 @@ var Datepicker;
|
||||
}
|
||||
|
||||
var selectedDates = this.selectedDates,
|
||||
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
|
||||
parsedSelected = datepicker.getParsedDate(selectedDates[0]),
|
||||
formattedDates,
|
||||
_this = this,
|
||||
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
|
||||
if (this.opts.multipleDates) {
|
||||
dates = selectedDates.map(function(date) {
|
||||
var parsedDate = Datepicker.getParsedDate(date);
|
||||
var parsedDate = datepicker.getParsedDate(date);
|
||||
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
|
||||
})
|
||||
}
|
||||
@ -298,8 +300,8 @@ var Datepicker;
|
||||
date = date || this.date;
|
||||
var result = string,
|
||||
locale = this.loc,
|
||||
decade = Datepicker.getDecade(date),
|
||||
d = Datepicker.getParsedDate(date);
|
||||
decade = datepicker.getDecade(date),
|
||||
d = datepicker.getParsedDate(date);
|
||||
|
||||
switch (true) {
|
||||
case /@/.test(result):
|
||||
@ -407,7 +409,7 @@ var Datepicker;
|
||||
if (!(date instanceof Date)) return;
|
||||
|
||||
return selected.some(function (curDate, i) {
|
||||
if (Datepicker.isSame(curDate, date)) {
|
||||
if (datepicker.isSame(curDate, date)) {
|
||||
selected.splice(i, 1);
|
||||
_this.views[_this.currentView]._render();
|
||||
_this._setInputValue();
|
||||
@ -431,6 +433,7 @@ var Datepicker;
|
||||
this.minRange = '';
|
||||
this.maxRange = '';
|
||||
this.views[this.currentView]._render();
|
||||
this._setInputValue();
|
||||
if (this.opts.onSelect) {
|
||||
this._triggerOnChange()
|
||||
}
|
||||
@ -485,7 +488,7 @@ var Datepicker;
|
||||
|
||||
_isSelected: function (checkDate, cellType) {
|
||||
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) {
|
||||
return _this.formatDate(altFormat, date)
|
||||
});
|
||||
altValues = altValues.join(this.opts.multipleDatesSeparator);
|
||||
this.$altField.val(altValues);
|
||||
}
|
||||
|
||||
@ -519,9 +523,9 @@ var Datepicker;
|
||||
*/
|
||||
_isInRange: function (date, type) {
|
||||
var time = date.getTime(),
|
||||
d = Datepicker.getParsedDate(date),
|
||||
min = Datepicker.getParsedDate(this.minDate),
|
||||
max = Datepicker.getParsedDate(this.maxDate),
|
||||
d = datepicker.getParsedDate(date),
|
||||
min = datepicker.getParsedDate(this.minDate),
|
||||
max = datepicker.getParsedDate(this.maxDate),
|
||||
dMinTime = new Date(d.year, d.month, min.date).getTime(),
|
||||
dMaxTime = new Date(d.year, d.month, max.date).getTime(),
|
||||
types = {
|
||||
@ -663,7 +667,7 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_handleHotKey: function (key) {
|
||||
var date = Datepicker.getParsedDate(this._getFocusedDate()),
|
||||
var date = datepicker.getParsedDate(this._getFocusedDate()),
|
||||
focusedParsed,
|
||||
o = this.opts,
|
||||
newDate,
|
||||
@ -711,7 +715,7 @@ var Datepicker;
|
||||
break;
|
||||
}
|
||||
|
||||
totalDaysInNextMonth = Datepicker.getDaysCount(new Date(y,m));
|
||||
totalDaysInNextMonth = datepicker.getDaysCount(new Date(y,m));
|
||||
newDate = new Date(y,m,d);
|
||||
|
||||
// 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;
|
||||
|
||||
focusedParsed = Datepicker.getParsedDate(newDate);
|
||||
focusedParsed = datepicker.getParsedDate(newDate);
|
||||
if (monthChanged && o.onChangeMonth) {
|
||||
o.onChangeMonth(focusedParsed.month, focusedParsed.year)
|
||||
}
|
||||
@ -780,7 +784,7 @@ var Datepicker;
|
||||
_focusNextCell: function (keyCode, type) {
|
||||
type = type || this.cellType;
|
||||
|
||||
var date = Datepicker.getParsedDate(this._getFocusedDate()),
|
||||
var date = datepicker.getParsedDate(this._getFocusedDate()),
|
||||
y = date.year,
|
||||
m = date.month,
|
||||
d = date.date;
|
||||
@ -847,7 +851,7 @@ var Datepicker;
|
||||
_getCell: function (date, type) {
|
||||
type = type || this.cellType;
|
||||
|
||||
var d = Datepicker.getParsedDate(date),
|
||||
var d = datepicker.getParsedDate(date),
|
||||
selector = '.datepicker--cell[data-year="' + d.year + '"]',
|
||||
$cell;
|
||||
|
||||
@ -962,7 +966,7 @@ var Datepicker;
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.minRange = this.selectedDates[0];
|
||||
this.maxRange = '';
|
||||
if (Datepicker.less(this.minRange, this.focused)) {
|
||||
if (datepicker.less(this.minRange, this.focused)) {
|
||||
this.maxRange = this.minRange;
|
||||
this.minRange = '';
|
||||
}
|
||||
@ -993,7 +997,7 @@ var Datepicker;
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.minRange = this.selectedDates[0];
|
||||
this.maxRange = '';
|
||||
if (Datepicker.less(this.minRange, this._focused)) {
|
||||
if (datepicker.less(this.minRange, this._focused)) {
|
||||
this.maxRange = this.minRange;
|
||||
this.minRange = '';
|
||||
}
|
||||
@ -1007,7 +1011,7 @@ var Datepicker;
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
return datepicker.getParsedDate(this.date);
|
||||
},
|
||||
|
||||
set date (val) {
|
||||
@ -1069,28 +1073,28 @@ var Datepicker;
|
||||
},
|
||||
|
||||
get minTime() {
|
||||
var min = Datepicker.getParsedDate(this.minDate);
|
||||
var min = datepicker.getParsedDate(this.minDate);
|
||||
return new Date(min.year, min.month, min.date).getTime()
|
||||
},
|
||||
|
||||
get maxTime() {
|
||||
var max = Datepicker.getParsedDate(this.maxDate);
|
||||
var max = datepicker.getParsedDate(this.maxDate);
|
||||
return new Date(max.year, max.month, max.date).getTime()
|
||||
},
|
||||
|
||||
get curDecade() {
|
||||
return Datepicker.getDecade(this.date)
|
||||
return datepicker.getDecade(this.date)
|
||||
}
|
||||
};
|
||||
|
||||
// Utils
|
||||
// -------------------------------------------------
|
||||
|
||||
Datepicker.getDaysCount = function (date) {
|
||||
datepicker.getDaysCount = function (date) {
|
||||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||||
};
|
||||
|
||||
Datepicker.getParsedDate = function (date) {
|
||||
datepicker.getParsedDate = function (date) {
|
||||
return {
|
||||
year: date.getFullYear(),
|
||||
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;
|
||||
|
||||
return [firstYear, firstYear + 9];
|
||||
};
|
||||
|
||||
Datepicker.template = function (str, data) {
|
||||
datepicker.template = function (str, data) {
|
||||
return str.replace(/#\{([\w]+)\}/g, function (source, match) {
|
||||
if (data[match] || data[match] === 0) {
|
||||
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;
|
||||
var d1 = Datepicker.getParsedDate(date1),
|
||||
d2 = Datepicker.getParsedDate(date2),
|
||||
var d1 = datepicker.getParsedDate(date1),
|
||||
d2 = datepicker.getParsedDate(date2),
|
||||
_type = type ? type : 'day',
|
||||
|
||||
conditions = {
|
||||
@ -1130,12 +1134,12 @@ var Datepicker;
|
||||
return conditions[_type];
|
||||
};
|
||||
|
||||
Datepicker.less = function (dateCompareTo, date, type) {
|
||||
datepicker.less = function (dateCompareTo, date, type) {
|
||||
if (!dateCompareTo || !date) return false;
|
||||
return date.getTime() < dateCompareTo.getTime();
|
||||
};
|
||||
|
||||
Datepicker.bigger = function (dateCompareTo, date, type) {
|
||||
datepicker.bigger = function (dateCompareTo, date, type) {
|
||||
if (!dateCompareTo || !date) return false;
|
||||
return date.getTime() > dateCompareTo.getTime();
|
||||
};
|
||||
@ -1155,8 +1159,8 @@ var Datepicker;
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
if (Datepicker.prototype[options]) {
|
||||
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
if (datepicker.prototype[options]) {
|
||||
datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
} else {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, pluginName)) {
|
||||
|
||||
@ -66,6 +66,7 @@
|
||||
},
|
||||
html = Datepicker.template(button, data);
|
||||
|
||||
if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
|
||||
this.$buttonsContainer.append(html);
|
||||
},
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ $textColor: (
|
||||
$bg: (
|
||||
selected: #5cc4ef,
|
||||
selectedHover: darken(#5cc4ef, 5),
|
||||
inRange: #EAF9FF,
|
||||
inRange: rgba(#5cc4ef, .1),
|
||||
hover: #f0f0f0
|
||||
);
|
||||
|
||||
@ -72,7 +72,7 @@ $transitionOffset: 8px;
|
||||
color: darken(map_get($textColor, otherMonth), 7);
|
||||
|
||||
&.-focus- {
|
||||
background-color: lighten(map_get($bg, inRange), 1);
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
height: $dayCellSize;
|
||||
z-index: 1;
|
||||
|
||||
/*&:hover, */&.-focus- {
|
||||
&.-focus- {
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
|
||||
@ -30,10 +30,9 @@
|
||||
color: map_get($textColor, common);
|
||||
}
|
||||
|
||||
//&:hover {
|
||||
// color: map_get($textColor, common);
|
||||
// //background: rgba(map_get($textColor, currentDate), .05);
|
||||
//}
|
||||
&.-in-range- {
|
||||
color: map_get($textColor, currentDate);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
@ -44,7 +43,7 @@
|
||||
border-radius: 0;
|
||||
|
||||
&.-focus- {
|
||||
background-color: darken(map_get($bg, inRange), 5);
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,31 +53,38 @@
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($textColor, disabled);
|
||||
background: map_get($bg, hover);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
color: darken(map_get($textColor, disabled), 5);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
&:hover {
|
||||
&.-focus- {
|
||||
color: map_get($textColor, disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-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;
|
||||
}
|
||||
&.-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;
|
||||
}
|
||||
|
||||
&.-range-from-.-range-to- {
|
||||
border-radius: $datepickerBorderRadius;
|
||||
|
||||
}
|
||||
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: map_get($bg, selected);
|
||||
|
||||
&.-current- {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user