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 minView option, add showOtherYears option

Browse Source
This commit is contained in:
t1m0n 2015-11-10 12:03:21 +03:00
parent 8b2feab2d0
commit 50ddae9304
6 changed files with 187 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dist/css/datepicker.css vendored
View File

@ -1,3 +1,13 @@
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
@ -24,6 +34,16 @@
height: 32px;
text-align: center; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* -------------------------------------------------
Navigation
------------------------------------------------- */
@ -57,6 +77,16 @@
cursor: default;
background: none; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
@ -94,14 +124,6 @@
.datepicker--cell-day {
border-radius: 50%; }
.datepicker--cell-day.-other-month- {
color: #ddd; }
.datepicker--cell-day.-other-month-.-selected- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-.-selected-.-disabled- {
background: none;
border: none; }
.datepicker--cell-month {
width: 33.33%;
@ -110,5 +132,3 @@
.datepicker--cell-year {
width: 25%;
height: 40px; }
.datepicker--cell-year.-other-decade- {
color: #ddd; }

113
dist/js/datepicker.js vendored
View File

@ -12,20 +12,23 @@ var Datepicker;
//TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
start: '', // Start date
firstDay: 1, // Week's first day
weekends: [6, 0],
defaultView: 'days',
//TODO сделать минимальный вид
minView: 'days',
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
//TODO сделать тоже самое с годами
defaultView: 'years',
minView: 'years',
showOtherMonths: true,
selectOtherMonths: true,
moveToOtherMonthsOnSelect: true,
showOtherYears: true,
selectOtherYears: true,
moveToOtherYearsOnSelect: true,
minDate: '',
maxDate: '',
disableNavWhenOutOfRange: true,
@ -77,13 +80,15 @@ var Datepicker;
Datepicker.prototype = {
containerBuilt: false,
viewIndexes: ['days', 'months', 'years'],
init: function () {
this._buildBaseHtml();
this.nav = new Datepicker.Navigation(this, this.opts);
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.view = this.currentView;
this.inited = true;
},
@ -193,11 +198,25 @@ var Datepicker;
},
selectDate: function (date) {
var d = this.parsedDate;
var d = this.parsedDate,
newDate = '';
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
if (this.view == 'days') {
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
newDate = new Date(date.getFullYear(), date.getMonth(), 1);
}
}
if (this.view == 'years') {
if (date.getFullYear() != d.year && this.opts.moveToOtherYearsOnSelect) {
newDate = new Date(date.getFullYear(), 0, 1);
}
}
if (newDate) {
this.silent = true;
this.date = new Date(date.getFullYear(),date.getMonth(), 1);
this.date = newDate;
this.silent = false;
this.nav._render()
}
@ -276,6 +295,7 @@ var Datepicker;
set view (val) {
this.prevView = this.currentView;
this.currentView = val;
this.viewIndex = this.viewIndexes.indexOf(val);
if (this.inited) {
if (!this.views[val]) {
@ -297,7 +317,6 @@ var Datepicker;
},
get minTime() {
// Reset hours to 00:00, in case of new Date() is passed as option to minDate
var min = Datepicker.getParsedDate(this.minDate);
return new Date(min.year, min.month, min.date).getTime()
},
@ -308,6 +327,9 @@ var Datepicker;
}
};
// Utils
// -------------------------------------------------
Datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};
@ -606,7 +628,7 @@ Datepicker.Cell = function () {
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
if (!this.opts.selectOtherMonths) {
_class += " -disabled-";
}
@ -653,6 +675,7 @@ Datepicker.Cell = function () {
}
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
if (this.d._isSelected(date, 'month')) _class += ' -selected-';
if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
@ -688,9 +711,16 @@ Datepicker.Cell = function () {
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -other-decade-';
if (!this.opts.selectOtherYears) {
_class += " -disabled-";
}
if (!this.opts.showOtherYears) html = '';
}
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
if (this.d._isSelected(date, 'year')) _class += ' -selected-';
if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
@ -733,43 +763,38 @@ Datepicker.Cell = function () {
// Events
// -------------------------------------------------
_handleClick: {
days: function (el) {
var date = el.data('date'),
month = el.data('month'),
year = el.data('year'),
selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;
_handleClick: function (el) {
var date = el.data('date') || 1,
month = el.data('month') || 0,
year = el.data('year') || this.d.parsedDate.year;
if (!alreadySelected) {
this.d.selectDate(selectedDate);
} else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
triggerOnChange = false;
}
if (triggerOnChange) {
this.d._triggerOnChange()
}
},
months: function (el) {
var month = el.data('month'),
d = this.d.parsedDate;
// Change view if min view does not reach yet
if (this.d.view != this.opts.minView) {
var nextViewIndex = this.d.viewIndex - 1;
this.d.silent = true;
this.d.date = new Date(d.year, month, 1);
this.d.date = new Date(year, month, date);
this.d.silent = false;
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.view = this.d.viewIndexes[nextViewIndex];
this.d.silent = true;
this.d.date = new Date(year, 0, 1);
this.d.silent = false;
this.d.view = 'months';
return;
}
// Select date if min view is reached
var selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, this.d.view.substring(0, this.d.view.length - 1)),
triggerOnChange = true;
if (!alreadySelected) {
this.d.selectDate(selectedDate);
} else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
triggerOnChange = false;
}
if (triggerOnChange) {
this.d._triggerOnChange()
}
},
@ -778,7 +803,7 @@ Datepicker.Cell = function () {
if ($el.hasClass('-disabled-')) return;
this._handleClick[this.d.currentView].bind(this)($el);
this._handleClick.bind(this)($el);
}
};
})();

71
js/datepicker/body.js
View File

@ -104,7 +104,7 @@
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
if (!this.opts.selectOtherMonths) {
_class += " -disabled-";
}
@ -151,6 +151,7 @@
}
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
if (this.d._isSelected(date, 'month')) _class += ' -selected-';
if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
@ -186,9 +187,16 @@
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -other-decade-';
if (!this.opts.selectOtherYears) {
_class += " -disabled-";
}
if (!this.opts.showOtherYears) html = '';
}
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
if (this.d._isSelected(date, 'year')) _class += ' -selected-';
if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
@ -231,43 +239,38 @@
// Events
// -------------------------------------------------
_handleClick: {
days: function (el) {
var date = el.data('date'),
month = el.data('month'),
year = el.data('year'),
selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, 'day'),
triggerOnChange = true;
_handleClick: function (el) {
var date = el.data('date') || 1,
month = el.data('month') || 0,
year = el.data('year') || this.d.parsedDate.year;
if (!alreadySelected) {
this.d.selectDate(selectedDate);
} else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
triggerOnChange = false;
}
if (triggerOnChange) {
this.d._triggerOnChange()
}
},
months: function (el) {
var month = el.data('month'),
d = this.d.parsedDate;
// Change view if min view does not reach yet
if (this.d.view != this.opts.minView) {
var nextViewIndex = this.d.viewIndex - 1;
this.d.silent = true;
this.d.date = new Date(d.year, month, 1);
this.d.date = new Date(year, month, date);
this.d.silent = false;
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.view = this.d.viewIndexes[nextViewIndex];
this.d.silent = true;
this.d.date = new Date(year, 0, 1);
this.d.silent = false;
this.d.view = 'months';
return;
}
// Select date if min view is reached
var selectedDate = new Date(year, month, date),
alreadySelected = this.d._isSelected(selectedDate, this.d.view.substring(0, this.d.view.length - 1)),
triggerOnChange = true;
if (!alreadySelected) {
this.d.selectDate(selectedDate);
} else if (alreadySelected && this.opts.toggleSelected){
this.d.removeDate(selectedDate);
} else if (alreadySelected && !this.opts.toggleSelected) {
triggerOnChange = false;
}
if (triggerOnChange) {
this.d._triggerOnChange()
}
},
@ -276,7 +279,7 @@
if ($el.hasClass('-disabled-')) return;
this._handleClick[this.d.currentView].bind(this)($el);
this._handleClick.bind(this)($el);
}
};
})();

42
js/datepicker/datepicker.js
View File

@ -12,20 +12,23 @@ var Datepicker;
//TODO сделать работу с инпутом
inline: true,
region: 'ru',
firstDay: 1, // Week's first day
start: '', // Start date
firstDay: 1, // Week's first day
weekends: [6, 0],
defaultView: 'days',
//TODO сделать минимальный вид
minView: 'days',
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
//TODO сделать тоже самое с годами
defaultView: 'years',
minView: 'years',
showOtherMonths: true,
selectOtherMonths: true,
moveToOtherMonthsOnSelect: true,
showOtherYears: true,
selectOtherYears: true,
moveToOtherYearsOnSelect: true,
minDate: '',
maxDate: '',
disableNavWhenOutOfRange: true,
@ -77,13 +80,15 @@ var Datepicker;
Datepicker.prototype = {
containerBuilt: false,
viewIndexes: ['days', 'months', 'years'],
init: function () {
this._buildBaseHtml();
this.nav = new Datepicker.Navigation(this, this.opts);
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.view = this.currentView;
this.inited = true;
},
@ -193,11 +198,25 @@ var Datepicker;
},
selectDate: function (date) {
var d = this.parsedDate;
var d = this.parsedDate,
newDate = '';
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
if (this.view == 'days') {
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
newDate = new Date(date.getFullYear(), date.getMonth(), 1);
}
}
if (this.view == 'years') {
if (date.getFullYear() != d.year && this.opts.moveToOtherYearsOnSelect) {
newDate = new Date(date.getFullYear(), 0, 1);
}
}
if (newDate) {
this.silent = true;
this.date = new Date(date.getFullYear(),date.getMonth(), 1);
this.date = newDate;
this.silent = false;
this.nav._render()
}
@ -276,6 +295,7 @@ var Datepicker;
set view (val) {
this.prevView = this.currentView;
this.currentView = val;
this.viewIndex = this.viewIndexes.indexOf(val);
if (this.inited) {
if (!this.views[val]) {
@ -297,7 +317,6 @@ var Datepicker;
},
get minTime() {
// Reset hours to 00:00, in case of new Date() is passed as option to minDate
var min = Datepicker.getParsedDate(this.minDate);
return new Date(min.year, min.month, min.date).getTime()
},
@ -308,6 +327,9 @@ var Datepicker;
}
};
// Utils
// -------------------------------------------------
Datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};

15
sass/datepicker/_cell.scss
View File

@ -57,18 +57,7 @@
border-radius: 50%;
&.-other-month- {
color: $colorAnotherMonth;
&.-selected- {
color: #fff;
background: lighten($colorCellSelected, 20%);
&.-disabled- {
background: none;
border: none;
}
}
@extend %otherMonth;
}
}
@ -99,6 +88,6 @@
height: 40px;
&.-other-decade- {
color: $colorAnotherMonth;
@extend %otherMonth;
}
}

18
sass/datepicker/datepicker-config.scss
View File

@ -13,4 +13,20 @@ $colorAnotherMonth: #ddd;
$colorCellHover: #eee;
$colorCellCurrent: #60C4F5;
$colorCellSelected: skyblue;
$colorCellWeekend: '';
$colorCellWeekend: '';
// Objects
%otherMonth {
color: $colorAnotherMonth;
font-size: .9em;
&.-selected- {
color: #fff;
background: lighten($colorCellSelected, 20%);
}
&:empty {
background: none;
border: none;
}
}