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

change next, prev month days count, begin prev() and next() methods

Browse Source
This commit is contained in:
t1m0n 2015-10-15 13:21:11 +03:00
parent 24c1c8f89d
commit 68131a2dde
5 changed files with 141 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
dist/js/datepicker.js vendored
View File

@ -14,6 +14,7 @@ var Datepicker;
firstDay: 1, // Week's first day firstDay: 1, // Week's first day
start: '', // Start date start: '', // Start date
weekends: [6, 0], weekends: [6, 0],
defaultView: 'days',
format: 'dd.mm.yyyy', format: 'dd.mm.yyyy',
// navigation // navigation
@ -39,7 +40,11 @@ var Datepicker;
$body = $('body'); $body = $('body');
} }
this.inited = false;
this.currentDate = this.opts.start; this.currentDate = this.opts.start;
this.view = this.opts.defaultView;
this.activeView = this.opts.defaultView;
this.init() this.init()
}; };
@ -52,11 +57,12 @@ var Datepicker;
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
this.days = new Datepicker.Body(this, 'days', this.opts); this.days = new Datepicker.Body(this, 'days', this.opts);
this.inited = true;
}, },
isWeekend: function (day) { isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1; return this.opts.weekends.indexOf(day) !== -1;
}, },
_buildDatepickersContainer: function () { _buildDatepickersContainer: function () {
@ -77,9 +83,39 @@ var Datepicker;
_defineDOM: function () { _defineDOM: function () {
},
next: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month + 1, 1);
},
prev: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month - 1, 1);
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
} }
}; };
Object.defineProperty(Datepicker.prototype , 'date', {
set: function (val) {
this.currentDate = val;
if (this.inited) {
this[this.activeView]._render();
this.nav._render();
}
return val;
},
get: function () {
return this.currentDate
}
});
Datepicker.getDaysCount = function (date) { Datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@ -87,9 +123,9 @@ var Datepicker;
Datepicker.getParsedDate = function (date) { Datepicker.getParsedDate = function (date) {
return { return {
year: date.getUTCFullYear(), year: date.getFullYear(),
month: date.getUTCMonth(), month: date.getMonth(),
day: date.getUTCDay() day: date.getDay()
} }
}; };
@ -133,9 +169,9 @@ var Datepicker;
;(function () { ;(function () {
var template = '' + var template = '' +
'<div class="datepicker--nav-action">#{prevHtml}</div>' + '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
'<div class="datepicker--nav-title">#{title}</div>' + '<div class="datepicker--nav-title">#{title}</div>' +
'<div class="datepicker--nav-action">#{nextHtml}</div>'; '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>';
Datepicker.Navigation = function (d, opts) { Datepicker.Navigation = function (d, opts) {
this.d = d; this.d = d;
@ -147,20 +183,37 @@ var Datepicker;
Datepicker.Navigation.prototype = { Datepicker.Navigation.prototype = {
init: function () { init: function () {
this._buildBaseHtml(); this._buildBaseHtml();
this._bindEvents();
}, },
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
},
_buildBaseHtml: function () { _buildBaseHtml: function () {
var title = this._getTitle(this.d.currentDate); this._render();
this.$navButton = $('.datepicker--nav-action', this.d.$nav);
},
_render: function () {
var title = this._getTitle(this.d.currentDate),
html = Datepicker.template(template, $.extend({title: title}, this.opts)); html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html); this.d.$nav.html(html);
}, },
_getTitle: function (date) { _getTitle: function (date) {
var month = this.d.loc.months[date.getUTCMonth()], var month = this.d.loc.months[date.getMonth()],
year = date.getUTCFullYear(); year = date.getFullYear();
return month + ', ' + year; return month + ', ' + year;
},
_onClickNavButton: function (e) {
var $el = $(e.target),
action = $el.data('action');
this.d[action]();
} }
} }
@ -188,6 +241,7 @@ Datepicker.Cell = function () {
Datepicker.Body.prototype = { Datepicker.Body.prototype = {
init: function () { init: function () {
this._buildBaseHtml();
this._render(); this._render();
}, },
@ -218,17 +272,19 @@ Datepicker.Cell = function () {
*/ */
_getDaysHtml: function (date) { _getDaysHtml: function (date) {
var totalMonthDays = Datepicker.getDaysCount(date), var totalMonthDays = Datepicker.getDaysCount(date),
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(), firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(), lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
daysFromPevMonth = firstMonthDay - this.opts.firstDay,
daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
remainingDays = 6 - lastMonthDay + this.opts.firstDay, daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
var startDayIndex = -daysFromPevMonth + 1,
m, y, m, y,
html = ''; html = '';
for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) { for (var i = startDayIndex, max = totalMonthDays + daysFromNextMonth; i <= max; i++) {
y = date.getFullYear(); y = date.getFullYear();
m = date.getMonth(); m = date.getMonth();
@ -256,7 +312,6 @@ Datepicker.Cell = function () {
}, },
_render: function () { _render: function () {
this._buildBaseHtml();
this._renderDays(); this._renderDays();
} }
}; };

12
js/datepicker/body.js
View File

@ -17,6 +17,7 @@
Datepicker.Body.prototype = { Datepicker.Body.prototype = {
init: function () { init: function () {
this._buildBaseHtml();
this._render(); this._render();
}, },
@ -47,17 +48,19 @@
*/ */
_getDaysHtml: function (date) { _getDaysHtml: function (date) {
var totalMonthDays = Datepicker.getDaysCount(date), var totalMonthDays = Datepicker.getDaysCount(date),
firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(), firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(), lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
daysFromPevMonth = firstMonthDay - this.opts.firstDay,
daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
remainingDays = 6 - lastMonthDay + this.opts.firstDay, daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
var startDayIndex = -daysFromPevMonth + 1,
m, y, m, y,
html = ''; html = '';
for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) { for (var i = startDayIndex, max = totalMonthDays + daysFromNextMonth; i <= max; i++) {
y = date.getFullYear(); y = date.getFullYear();
m = date.getMonth(); m = date.getMonth();
@ -85,7 +88,6 @@
}, },
_render: function () { _render: function () {
this._buildBaseHtml();
this._renderDays(); this._renderDays();
} }
}; };

44
js/datepicker/datepicker.js
View File

@ -14,6 +14,7 @@ var Datepicker;
firstDay: 1, // Week's first day firstDay: 1, // Week's first day
start: '', // Start date start: '', // Start date
weekends: [6, 0], weekends: [6, 0],
defaultView: 'days',
format: 'dd.mm.yyyy', format: 'dd.mm.yyyy',
// navigation // navigation
@ -39,7 +40,11 @@ var Datepicker;
$body = $('body'); $body = $('body');
} }
this.inited = false;
this.currentDate = this.opts.start; this.currentDate = this.opts.start;
this.view = this.opts.defaultView;
this.activeView = this.opts.defaultView;
this.init() this.init()
}; };
@ -52,11 +57,12 @@ var Datepicker;
this.nav = new Datepicker.Navigation(this, this.opts); this.nav = new Datepicker.Navigation(this, this.opts);
this.days = new Datepicker.Body(this, 'days', this.opts); this.days = new Datepicker.Body(this, 'days', this.opts);
this.inited = true;
}, },
isWeekend: function (day) { isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1; return this.opts.weekends.indexOf(day) !== -1;
}, },
_buildDatepickersContainer: function () { _buildDatepickersContainer: function () {
@ -77,9 +83,39 @@ var Datepicker;
_defineDOM: function () { _defineDOM: function () {
},
next: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month + 1, 1);
},
prev: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month - 1, 1);
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
} }
}; };
Object.defineProperty(Datepicker.prototype , 'date', {
set: function (val) {
this.currentDate = val;
if (this.inited) {
this[this.activeView]._render();
this.nav._render();
}
return val;
},
get: function () {
return this.currentDate
}
});
Datepicker.getDaysCount = function (date) { Datepicker.getDaysCount = function (date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@ -87,9 +123,9 @@ var Datepicker;
Datepicker.getParsedDate = function (date) { Datepicker.getParsedDate = function (date) {
return { return {
year: date.getUTCFullYear(), year: date.getFullYear(),
month: date.getUTCMonth(), month: date.getMonth(),
day: date.getUTCDay() day: date.getDay()
} }
}; };

29
js/datepicker/navigation.js
View File

@ -1,8 +1,8 @@
;(function () { ;(function () {
var template = '' + var template = '' +
'<div class="datepicker--nav-action">#{prevHtml}</div>' + '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
'<div class="datepicker--nav-title">#{title}</div>' + '<div class="datepicker--nav-title">#{title}</div>' +
'<div class="datepicker--nav-action">#{nextHtml}</div>'; '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>';
Datepicker.Navigation = function (d, opts) { Datepicker.Navigation = function (d, opts) {
this.d = d; this.d = d;
@ -14,20 +14,37 @@
Datepicker.Navigation.prototype = { Datepicker.Navigation.prototype = {
init: function () { init: function () {
this._buildBaseHtml(); this._buildBaseHtml();
this._bindEvents();
}, },
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
},
_buildBaseHtml: function () { _buildBaseHtml: function () {
var title = this._getTitle(this.d.currentDate); this._render();
this.$navButton = $('.datepicker--nav-action', this.d.$nav);
},
_render: function () {
var title = this._getTitle(this.d.currentDate),
html = Datepicker.template(template, $.extend({title: title}, this.opts)); html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html); this.d.$nav.html(html);
}, },
_getTitle: function (date) { _getTitle: function (date) {
var month = this.d.loc.months[date.getUTCMonth()], var month = this.d.loc.months[date.getMonth()],
year = date.getUTCFullYear(); year = date.getFullYear();
return month + ', ' + year; return month + ', ' + year;
},
_onClickNavButton: function (e) {
var $el = $(e.target),
action = $el.data('action');
this.d[action]();
} }
} }

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

@ -10,4 +10,4 @@ $colorAnotherMonth: #ddd;
$colorCellHover: ''; $colorCellHover: '';
$colorCellCurrent: ''; $colorCellCurrent: '';
$colorCellSelected: ''; $colorCellSelected: '';
$colorCellWeekend: ''; $colorCellWeekend: '';