mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add base range functionality
This commit is contained in:
t1m0n
parent
e028692caf
commit
08e4c68156
39
dist/css/datepicker.css
vendored
39
dist/css/datepicker.css
vendored
@ -7,6 +7,13 @@
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-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;
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: #e5f7ff; }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -45,15 +52,16 @@
|
||||
.datepicker--cell.-current-.-focus- {
|
||||
color: #4a4a4a; }
|
||||
.datepicker--cell.-in-range- {
|
||||
background: #a2ddf6;
|
||||
color: #fff;
|
||||
background: #E0F6FF;
|
||||
color: #4a4a4a;
|
||||
padding: 2px 0;
|
||||
background-clip: content-box;
|
||||
border-radius: 0; }
|
||||
.datepicker--cell.-in-range-.-focus- {
|
||||
background-color: #c6efff; }
|
||||
.datepicker--cell.-disabled- {
|
||||
cursor: default;
|
||||
color: #aeaeae;
|
||||
background: none; }
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-disabled-.-focus- {
|
||||
color: #aeaeae;
|
||||
background: #f0f0f0; }
|
||||
@ -71,6 +79,8 @@
|
||||
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;
|
||||
@ -128,6 +138,13 @@
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-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;
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: #e5f7ff; }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -245,6 +262,13 @@
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-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;
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: #e5f7ff; }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
@ -345,6 +369,13 @@
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-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;
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: #e5f7ff; }
|
||||
.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
27
dist/js/datepicker.js
vendored
27
dist/js/datepicker.js
vendored
@ -378,7 +378,7 @@ var Datepicker;
|
||||
this.selectedDates = [date]
|
||||
}
|
||||
} else {
|
||||
this. selectedDates = [date];
|
||||
this.selectedDates = [date];
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
@ -950,12 +950,18 @@ var Datepicker;
|
||||
|
||||
this.focused = date;
|
||||
this.silent = false;
|
||||
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.views[this.currentView]._update();
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseLeaveCell: function (e) {
|
||||
var $cell = $(e.target).closest('.datepicker--cell'),
|
||||
date = this._getDateFromCell($cell);
|
||||
|
||||
$cell.removeClass('-focus-');
|
||||
|
||||
this.silent = true;
|
||||
this.focused = '';
|
||||
this.silent = false;
|
||||
@ -985,6 +991,7 @@ var Datepicker;
|
||||
set date (val) {
|
||||
if (!(val instanceof Date)) return;
|
||||
|
||||
this.prevDate = this.currentDate;
|
||||
this.currentDate = val;
|
||||
|
||||
if (this.inited && !this.silent) {
|
||||
@ -1181,7 +1188,7 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_bindEvents: function () {
|
||||
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this));
|
||||
this.$el.on('mouseup', '.datepicker--cell', $.proxy(this._onClickCell, this));
|
||||
},
|
||||
|
||||
_buildBaseHtml: function () {
|
||||
@ -1381,10 +1388,23 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
console.log('render');
|
||||
this._renderTypes[this.type].bind(this)();
|
||||
},
|
||||
|
||||
_update: function () {
|
||||
var $cells = $('.datepicker--cell', this.$cells),
|
||||
_this = this,
|
||||
classes,
|
||||
$cell,
|
||||
date;
|
||||
$cells.each(function (cell, i) {
|
||||
$cell = $(this);
|
||||
date = _this.d._getDateFromCell($(this));
|
||||
classes = _this._getCellContents(date, _this.d.cellType);
|
||||
$cell.attr('class',classes.classes)
|
||||
});
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
@ -1408,7 +1428,6 @@ var Datepicker;
|
||||
this.d.down(new Date(year, month, date));
|
||||
return;
|
||||
}
|
||||
|
||||
// Select date if min view is reached
|
||||
var selectedDate = new Date(year, month, date),
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
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
@ -33,7 +33,7 @@
|
||||
},
|
||||
|
||||
_bindEvents: function () {
|
||||
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this));
|
||||
this.$el.on('mouseup', '.datepicker--cell', $.proxy(this._onClickCell, this));
|
||||
},
|
||||
|
||||
_buildBaseHtml: function () {
|
||||
@ -233,10 +233,23 @@
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
console.log('render');
|
||||
this._renderTypes[this.type].bind(this)();
|
||||
},
|
||||
|
||||
_update: function () {
|
||||
var $cells = $('.datepicker--cell', this.$cells),
|
||||
_this = this,
|
||||
classes,
|
||||
$cell,
|
||||
date;
|
||||
$cells.each(function (cell, i) {
|
||||
$cell = $(this);
|
||||
date = _this.d._getDateFromCell($(this));
|
||||
classes = _this._getCellContents(date, _this.d.cellType);
|
||||
$cell.attr('class',classes.classes)
|
||||
});
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
@ -260,7 +273,6 @@
|
||||
this.d.down(new Date(year, month, date));
|
||||
return;
|
||||
}
|
||||
|
||||
// Select date if min view is reached
|
||||
var selectedDate = new Date(year, month, date),
|
||||
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
|
||||
|
||||
@ -378,7 +378,7 @@ var Datepicker;
|
||||
this.selectedDates = [date]
|
||||
}
|
||||
} else {
|
||||
this. selectedDates = [date];
|
||||
this.selectedDates = [date];
|
||||
}
|
||||
|
||||
this._setInputValue();
|
||||
@ -950,12 +950,18 @@ var Datepicker;
|
||||
|
||||
this.focused = date;
|
||||
this.silent = false;
|
||||
|
||||
if (this.opts.range && this.selectedDates.length == 1) {
|
||||
this.views[this.currentView]._update();
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseLeaveCell: function (e) {
|
||||
var $cell = $(e.target).closest('.datepicker--cell'),
|
||||
date = this._getDateFromCell($cell);
|
||||
|
||||
$cell.removeClass('-focus-');
|
||||
|
||||
this.silent = true;
|
||||
this.focused = '';
|
||||
this.silent = false;
|
||||
@ -985,6 +991,7 @@ var Datepicker;
|
||||
set date (val) {
|
||||
if (!(val instanceof Date)) return;
|
||||
|
||||
this.prevDate = this.currentDate;
|
||||
this.currentDate = val;
|
||||
|
||||
if (this.inited && !this.silent) {
|
||||
|
||||
@ -13,6 +13,7 @@ $yearsPerRow: 4;
|
||||
$textColor: (
|
||||
button: #5cc4ef,
|
||||
otherMonth: #dedede,
|
||||
otherMonthInRange: #ccc,
|
||||
disabled: #aeaeae,
|
||||
currentDate: #4EB5E6,
|
||||
common: #4a4a4a,
|
||||
@ -23,7 +24,10 @@ $textColor: (
|
||||
$bg: (
|
||||
selected: #5cc4ef,
|
||||
selectedHover: darken(#5cc4ef, 5),
|
||||
inRange: lighten(#5cc4ef, 15),
|
||||
inRange: #E0F6FF,
|
||||
inRangeHover: darken(#E0F6FF, 5),
|
||||
inRangeOtherMonth: lighten(#E0F6FF, 3),
|
||||
inRangeOtherMonthHover: lighten(#E0F6FF, 1),
|
||||
hover: #f0f0f0
|
||||
);
|
||||
|
||||
@ -61,6 +65,18 @@ $transitionOffset: 8px;
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
background: lighten(map_get($bg, selected), 15);
|
||||
&.-focus- {
|
||||
background: lighten(map_get($bg, selected), 10);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background-color: map_get($bg, inRangeOtherMonth);
|
||||
color: darken(map_get($textColor, otherMonth), 7);
|
||||
|
||||
&.-focus- {
|
||||
background-color: map_get($bg, inRangeOtherMonthHover);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
||||
@ -38,16 +38,19 @@
|
||||
|
||||
&.-in-range- {
|
||||
background: map_get($bg, inRange);
|
||||
color: #fff;
|
||||
color: map_get($textColor, common);
|
||||
padding: 2px 0;
|
||||
background-clip: content-box;
|
||||
border-radius: 0;
|
||||
|
||||
&.-focus- {
|
||||
background-color: map_get($bg, inRangeHover);
|
||||
}
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
cursor: default;
|
||||
color: map_get($textColor, disabled);
|
||||
background: none;
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($textColor, disabled);
|
||||
@ -81,6 +84,10 @@
|
||||
&.-range-to- {
|
||||
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
|
||||
}
|
||||
|
||||
&.-range-from-.-range-to- {
|
||||
border-radius: $datepickerBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
// Day names
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user