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

add minRange and maxRange, flip ranges

Browse Source
This commit is contained in:
t1m0n 2015-12-09 11:32:25 +03:00
parent 08e4c68156
commit aa59bb60c5
8 changed files with 133 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
dist/css/datepicker.css vendored
View File

@ -2,7 +2,7 @@
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
@ -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: #effaff;
background-color: #EAF9FF;
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #e5f7ff; }
background-color: #effaff; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -52,13 +52,13 @@
.datepicker--cell.-current-.-focus- {
color: #4a4a4a; }
.datepicker--cell.-in-range- {
background: #E0F6FF;
background: #EAF9FF;
color: #4a4a4a;
padding: 2px 0;
padding: 0;
background-clip: content-box;
border-radius: 0; }
.datepicker--cell.-in-range-.-focus- {
background-color: #c6efff; }
background-color: #d0f2ff; }
.datepicker--cell.-disabled- {
cursor: default;
color: #aeaeae; }
@ -67,6 +67,12 @@
background: #f0f0f0; }
.datepicker--cell.-disabled-.-current-:hover {
color: #aeaeae; }
.datepicker--cell.-range-from- {
border-radius: 4px 0 0 4px; }
.datepicker--cell.-range-to- {
border-radius: 0 4px 4px 0; }
.datepicker--cell.-range-from-.-range-to- {
border-radius: 4px; }
.datepicker--cell.-selected- {
color: #fff;
background: #5cc4ef; }
@ -75,12 +81,6 @@
background: #5cc4ef; }
.datepicker--cell.-selected-.-focus- {
background: #45bced; }
.datepicker--cell.-range-from- {
border-radius: 4px 0 0 4px; }
.datepicker--cell.-range-to- {
border-radius: 0 4px 4px 0; }
.datepicker--cell.-range-from-.-range-to- {
border-radius: 4px; }
.datepicker--days-names {
display: -webkit-flex;
@ -133,7 +133,7 @@
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
@ -141,10 +141,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: #effaff;
background-color: #EAF9FF;
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #e5f7ff; }
background-color: #effaff; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -257,7 +257,7 @@
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
@ -265,10 +265,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: #effaff;
background-color: #EAF9FF;
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #e5f7ff; }
background-color: #effaff; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
@ -364,7 +364,7 @@
color: #dedede; }
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
color: #c5c5c5; }
.-disabled-.datepicker--cell-day.-other-month-:hover, .-disabled-.datepicker--cell-year.-other-decade-:hover {
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
color: #dedede; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
@ -372,10 +372,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: #effaff;
background-color: #EAF9FF;
color: #cccccc; }
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
background-color: #e5f7ff; }
background-color: #effaff; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }

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

File diff suppressed because one or more lines are too long

54
dist/js/datepicker.js vendored
View File

@ -367,15 +367,21 @@ var Datepicker;
}
} else if (this.opts.range) {
if (len == 2) {
this.selectedDates = [date]
this.selectedDates = [date];
this.minRange = date;
this.maxRange = '';
} else if (len == 1) {
if (Datepicker.less(this.selectedDates[0], date, this.cellType)) {
this.selectedDates = [date]
this.selectedDates.push(date);
if (!this.maxRange){
this.maxRange = date;
} else {
this.selectedDates.push(date);
this.minRange = date;
}
this.selectedDates = [this.minRange, this.maxRange]
} else {
this.selectedDates = [date]
this.selectedDates = [date];
this.minRange = date;
}
} else {
this.selectedDates = [date];
@ -422,6 +428,8 @@ var Datepicker;
clear: function () {
this.selectedDates = [];
this.minRange = '';
this.maxRange = '';
this.views[this.currentView]._render();
if (this.opts.onSelect) {
this._triggerOnChange()
@ -952,6 +960,12 @@ var Datepicker;
this.silent = false;
if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0];
this.maxRange = '';
if (Datepicker.less(this.minRange, this.focused)) {
this.maxRange = this.minRange;
this.minRange = '';
}
this.views[this.currentView]._update();
}
},
@ -976,6 +990,14 @@ var Datepicker;
}
}
this._focused = val;
if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0];
this.maxRange = '';
if (Datepicker.less(this.minRange, this._focused)) {
this.maxRange = this.minRange;
this.minRange = '';
}
}
if (this.silent) return;
this.date = val;
},
@ -1109,10 +1131,12 @@ var Datepicker;
};
Datepicker.less = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false;
return date.getTime() < dateCompareTo.getTime();
};
Datepicker.bigger = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false;
return date.getTime() > dateCompareTo.getTime();
};
@ -1258,20 +1282,32 @@ var Datepicker;
}
if (this.opts.range) {
if (D.isSame(this.d.selectedDates[0], date)) classes += ' -range-from-';
if (D.isSame(this.d.selectedDates[1], date)) classes += ' -range-to-';
if (D.isSame(this.d.minRange, date, type)) classes += ' -range-from-';
if (D.isSame(this.d.maxRange, date, type)) classes += ' -range-to-';
if (this.d.selectedDates.length == 1 && this.d.focused) {
if (Datepicker.bigger(this.d.selectedDates[0], date) && D.less(this.d.focused, date)) {
if (
(Datepicker.bigger(this.d.minRange, date) && D.less(this.d.focused, date)) ||
(Datepicker.less(this.d.maxRange, date) && D.bigger(this.d.focused, date)))
{
classes += ' -in-range-'
}
if (Datepicker.less(this.d.maxRange, date) && D.isSame(this.d.focused, date)) {
classes += ' -range-from-'
}
if (Datepicker.bigger(this.d.minRange, date) && D.isSame(this.d.focused, date)) {
classes += ' -range-to-'
}
} else if (this.d.selectedDates.length == 2) {
if (D.bigger(this.d.selectedDates[0], date) && D.less(this.d.selectedDates[1], date)) {
if (D.bigger(this.d.minRange, date) && D.less(this.d.maxRange, date)) {
classes += ' -in-range-'
}
}
}
if (D.isSame(currentDate, date, type)) classes += ' -current-';
if (this.d.focused && D.isSame(date, this.d.focused, type)) classes += ' -focus-';
if (this.d._isSelected(date, type)) classes += ' -selected-';

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

File diff suppressed because one or more lines are too long

20
src/js/body.js
View File

@ -103,20 +103,32 @@
}
if (this.opts.range) {
if (D.isSame(this.d.selectedDates[0], date)) classes += ' -range-from-';
if (D.isSame(this.d.selectedDates[1], date)) classes += ' -range-to-';
if (D.isSame(this.d.minRange, date, type)) classes += ' -range-from-';
if (D.isSame(this.d.maxRange, date, type)) classes += ' -range-to-';
if (this.d.selectedDates.length == 1 && this.d.focused) {
if (Datepicker.bigger(this.d.selectedDates[0], date) && D.less(this.d.focused, date)) {
if (
(Datepicker.bigger(this.d.minRange, date) && D.less(this.d.focused, date)) ||
(Datepicker.less(this.d.maxRange, date) && D.bigger(this.d.focused, date)))
{
classes += ' -in-range-'
}
if (Datepicker.less(this.d.maxRange, date) && D.isSame(this.d.focused, date)) {
classes += ' -range-from-'
}
if (Datepicker.bigger(this.d.minRange, date) && D.isSame(this.d.focused, date)) {
classes += ' -range-to-'
}
} else if (this.d.selectedDates.length == 2) {
if (D.bigger(this.d.selectedDates[0], date) && D.less(this.d.selectedDates[1], date)) {
if (D.bigger(this.d.minRange, date) && D.less(this.d.maxRange, date)) {
classes += ' -in-range-'
}
}
}
if (D.isSame(currentDate, date, type)) classes += ' -current-';
if (this.d.focused && D.isSame(date, this.d.focused, type)) classes += ' -focus-';
if (this.d._isSelected(date, type)) classes += ' -selected-';

34
src/js/datepicker.js
View File

@ -367,15 +367,21 @@ var Datepicker;
}
} else if (this.opts.range) {
if (len == 2) {
this.selectedDates = [date]
this.selectedDates = [date];
this.minRange = date;
this.maxRange = '';
} else if (len == 1) {
if (Datepicker.less(this.selectedDates[0], date, this.cellType)) {
this.selectedDates = [date]
this.selectedDates.push(date);
if (!this.maxRange){
this.maxRange = date;
} else {
this.selectedDates.push(date);
this.minRange = date;
}
this.selectedDates = [this.minRange, this.maxRange]
} else {
this.selectedDates = [date]
this.selectedDates = [date];
this.minRange = date;
}
} else {
this.selectedDates = [date];
@ -422,6 +428,8 @@ var Datepicker;
clear: function () {
this.selectedDates = [];
this.minRange = '';
this.maxRange = '';
this.views[this.currentView]._render();
if (this.opts.onSelect) {
this._triggerOnChange()
@ -952,6 +960,12 @@ var Datepicker;
this.silent = false;
if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0];
this.maxRange = '';
if (Datepicker.less(this.minRange, this.focused)) {
this.maxRange = this.minRange;
this.minRange = '';
}
this.views[this.currentView]._update();
}
},
@ -976,6 +990,14 @@ var Datepicker;
}
}
this._focused = val;
if (this.opts.range && this.selectedDates.length == 1) {
this.minRange = this.selectedDates[0];
this.maxRange = '';
if (Datepicker.less(this.minRange, this._focused)) {
this.maxRange = this.minRange;
this.minRange = '';
}
}
if (this.silent) return;
this.date = val;
},
@ -1109,10 +1131,12 @@ var Datepicker;
};
Datepicker.less = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false;
return date.getTime() < dateCompareTo.getTime();
};
Datepicker.bigger = function (dateCompareTo, date, type) {
if (!dateCompareTo || !date) return false;
return date.getTime() > dateCompareTo.getTime();
};

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

@ -24,10 +24,7 @@ $textColor: (
$bg: (
selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5),
inRange: #E0F6FF,
inRangeHover: darken(#E0F6FF, 5),
inRangeOtherMonth: lighten(#E0F6FF, 3),
inRangeOtherMonthHover: lighten(#E0F6FF, 1),
inRange: #EAF9FF,
hover: #f0f0f0
);
@ -57,7 +54,7 @@ $transitionOffset: 8px;
}
&.-disabled- {
&:hover {
&.-focus- {
color: map_get($textColor, otherMonth);
}
}
@ -71,14 +68,15 @@ $transitionOffset: 8px;
}
&.-in-range- {
background-color: map_get($bg, inRangeOtherMonth);
background-color: map_get($bg, inRange);
color: darken(map_get($textColor, otherMonth), 7);
&.-focus- {
background-color: map_get($bg, inRangeOtherMonthHover);
background-color: lighten(map_get($bg, inRange), 1);
}
}
&:empty {
background: none;
border: none;

28
src/sass/cell.scss
View File

@ -39,12 +39,12 @@
&.-in-range- {
background: map_get($bg, inRange);
color: map_get($textColor, common);
padding: 2px 0;
padding: 0;
background-clip: content-box;
border-radius: 0;
&.-focus- {
background-color: map_get($bg, inRangeHover);
background-color: darken(map_get($bg, inRange), 5);
}
}
@ -64,6 +64,19 @@
}
}
&.-range-from- {
//background: darken(map_get($bg, hover), 3);
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
}
&.-range-to- {
//background: darken(map_get($bg, hover), 3);
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
}
&.-range-from-.-range-to- {
border-radius: $datepickerBorderRadius;
}
&.-selected- {
color: #fff;
background: map_get($bg, selected);
@ -77,17 +90,6 @@
background: map_get($bg, selectedHover);
}
}
&.-range-from- {
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
}
&.-range-to- {
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
}
&.-range-from-.-range-to- {
border-radius: $datepickerBorderRadius;
}
}
// Day names