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 base range functionality

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

39
dist/css/datepicker.css vendored
View File

@ -7,6 +7,13 @@
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff; color: #fff;
background: #a2ddf6; } 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 { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -45,15 +52,16 @@
.datepicker--cell.-current-.-focus- { .datepicker--cell.-current-.-focus- {
color: #4a4a4a; } color: #4a4a4a; }
.datepicker--cell.-in-range- { .datepicker--cell.-in-range- {
background: #a2ddf6; background: #E0F6FF;
color: #fff; color: #4a4a4a;
padding: 2px 0; padding: 2px 0;
background-clip: content-box; background-clip: content-box;
border-radius: 0; } border-radius: 0; }
.datepicker--cell.-in-range-.-focus- {
background-color: #c6efff; }
.datepicker--cell.-disabled- { .datepicker--cell.-disabled- {
cursor: default; cursor: default;
color: #aeaeae; color: #aeaeae; }
background: none; }
.datepicker--cell.-disabled-.-focus- { .datepicker--cell.-disabled-.-focus- {
color: #aeaeae; color: #aeaeae;
background: #f0f0f0; } background: #f0f0f0; }
@ -71,6 +79,8 @@
border-radius: 4px 0 0 4px; } border-radius: 4px 0 0 4px; }
.datepicker--cell.-range-to- { .datepicker--cell.-range-to- {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
.datepicker--cell.-range-from-.-range-to- {
border-radius: 4px; }
.datepicker--days-names { .datepicker--days-names {
display: -webkit-flex; display: -webkit-flex;
@ -128,6 +138,13 @@
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff; color: #fff;
background: #a2ddf6; } 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 { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -245,6 +262,13 @@
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff; color: #fff;
background: #a2ddf6; } 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 { .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none; background: none;
border: none; } border: none; }
@ -345,6 +369,13 @@
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff; color: #fff;
background: #a2ddf6; } 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 { .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

27
dist/js/datepicker.js vendored
View File

@ -378,7 +378,7 @@ var Datepicker;
this.selectedDates = [date] this.selectedDates = [date]
} }
} else { } else {
this. selectedDates = [date]; this.selectedDates = [date];
} }
this._setInputValue(); this._setInputValue();
@ -950,12 +950,18 @@ var Datepicker;
this.focused = date; this.focused = date;
this.silent = false; this.silent = false;
if (this.opts.range && this.selectedDates.length == 1) {
this.views[this.currentView]._update();
}
}, },
_onMouseLeaveCell: function (e) { _onMouseLeaveCell: function (e) {
var $cell = $(e.target).closest('.datepicker--cell'), var $cell = $(e.target).closest('.datepicker--cell'),
date = this._getDateFromCell($cell); date = this._getDateFromCell($cell);
$cell.removeClass('-focus-'); $cell.removeClass('-focus-');
this.silent = true; this.silent = true;
this.focused = ''; this.focused = '';
this.silent = false; this.silent = false;
@ -985,6 +991,7 @@ var Datepicker;
set date (val) { set date (val) {
if (!(val instanceof Date)) return; if (!(val instanceof Date)) return;
this.prevDate = this.currentDate;
this.currentDate = val; this.currentDate = val;
if (this.inited && !this.silent) { if (this.inited && !this.silent) {
@ -1181,7 +1188,7 @@ var Datepicker;
}, },
_bindEvents: function () { _bindEvents: function () {
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this)); this.$el.on('mouseup', '.datepicker--cell', $.proxy(this._onClickCell, this));
}, },
_buildBaseHtml: function () { _buildBaseHtml: function () {
@ -1381,10 +1388,23 @@ var Datepicker;
}, },
_render: function () { _render: function () {
console.log('render');
this._renderTypes[this.type].bind(this)(); 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 () { show: function () {
this.$el.addClass('active'); this.$el.addClass('active');
this.acitve = true; this.acitve = true;
@ -1408,7 +1428,6 @@ var Datepicker;
this.d.down(new Date(year, month, date)); this.d.down(new Date(year, month, date));
return; return;
} }
// Select date if min view is reached // Select date if min view is reached
var selectedDate = new Date(year, month, date), var selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType); alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);

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

File diff suppressed because one or more lines are too long

18
src/js/body.js
View File

@ -33,7 +33,7 @@
}, },
_bindEvents: function () { _bindEvents: function () {
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this)); this.$el.on('mouseup', '.datepicker--cell', $.proxy(this._onClickCell, this));
}, },
_buildBaseHtml: function () { _buildBaseHtml: function () {
@ -233,10 +233,23 @@
}, },
_render: function () { _render: function () {
console.log('render');
this._renderTypes[this.type].bind(this)(); 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 () { show: function () {
this.$el.addClass('active'); this.$el.addClass('active');
this.acitve = true; this.acitve = true;
@ -260,7 +273,6 @@
this.d.down(new Date(year, month, date)); this.d.down(new Date(year, month, date));
return; return;
} }
// Select date if min view is reached // Select date if min view is reached
var selectedDate = new Date(year, month, date), var selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, this.d.cellType); alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);

9
src/js/datepicker.js
View File

@ -378,7 +378,7 @@ var Datepicker;
this.selectedDates = [date] this.selectedDates = [date]
} }
} else { } else {
this. selectedDates = [date]; this.selectedDates = [date];
} }
this._setInputValue(); this._setInputValue();
@ -950,12 +950,18 @@ var Datepicker;
this.focused = date; this.focused = date;
this.silent = false; this.silent = false;
if (this.opts.range && this.selectedDates.length == 1) {
this.views[this.currentView]._update();
}
}, },
_onMouseLeaveCell: function (e) { _onMouseLeaveCell: function (e) {
var $cell = $(e.target).closest('.datepicker--cell'), var $cell = $(e.target).closest('.datepicker--cell'),
date = this._getDateFromCell($cell); date = this._getDateFromCell($cell);
$cell.removeClass('-focus-'); $cell.removeClass('-focus-');
this.silent = true; this.silent = true;
this.focused = ''; this.focused = '';
this.silent = false; this.silent = false;
@ -985,6 +991,7 @@ var Datepicker;
set date (val) { set date (val) {
if (!(val instanceof Date)) return; if (!(val instanceof Date)) return;
this.prevDate = this.currentDate;
this.currentDate = val; this.currentDate = val;
if (this.inited && !this.silent) { if (this.inited && !this.silent) {

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

@ -13,6 +13,7 @@ $yearsPerRow: 4;
$textColor: ( $textColor: (
button: #5cc4ef, button: #5cc4ef,
otherMonth: #dedede, otherMonth: #dedede,
otherMonthInRange: #ccc,
disabled: #aeaeae, disabled: #aeaeae,
currentDate: #4EB5E6, currentDate: #4EB5E6,
common: #4a4a4a, common: #4a4a4a,
@ -23,7 +24,10 @@ $textColor: (
$bg: ( $bg: (
selected: #5cc4ef, selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5), selectedHover: darken(#5cc4ef, 5),
inRange: lighten(#5cc4ef, 15), inRange: #E0F6FF,
inRangeHover: darken(#E0F6FF, 5),
inRangeOtherMonth: lighten(#E0F6FF, 3),
inRangeOtherMonthHover: lighten(#E0F6FF, 1),
hover: #f0f0f0 hover: #f0f0f0
); );
@ -61,6 +65,18 @@ $transitionOffset: 8px;
&.-selected- { &.-selected- {
color: #fff; color: #fff;
background: lighten(map_get($bg, selected), 15); 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 { &:empty {

11
src/sass/cell.scss
View File

@ -38,16 +38,19 @@
&.-in-range- { &.-in-range- {
background: map_get($bg, inRange); background: map_get($bg, inRange);
color: #fff; color: map_get($textColor, common);
padding: 2px 0; padding: 2px 0;
background-clip: content-box; background-clip: content-box;
border-radius: 0; border-radius: 0;
&.-focus- {
background-color: map_get($bg, inRangeHover);
}
} }
&.-disabled- { &.-disabled- {
cursor: default; cursor: default;
color: map_get($textColor, disabled); color: map_get($textColor, disabled);
background: none;
&.-focus- { &.-focus- {
color: map_get($textColor, disabled); color: map_get($textColor, disabled);
@ -81,6 +84,10 @@
&.-range-to- { &.-range-to- {
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0; border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
} }
&.-range-from-.-range-to- {
border-radius: $datepickerBorderRadius;
}
} }
// Day names // Day names