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 months view

Browse Source
This commit is contained in:
t1m0n 2015-10-16 11:47:25 +03:00
parent 68131a2dde
commit 835750568f
8 changed files with 301 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dist/css/datepicker.css vendored
View File

@ -7,6 +7,11 @@
box-sizing: content-box;
width: 224px; }
.datepicker--body {
display: none; }
.datepicker--body.active {
display: block; }
.datepicker--days-names {
display: flex;
flex-wrap: wrap; }
@ -48,11 +53,19 @@
flex-wrap: wrap; }
.datepicker--cell {
border-radius: 2px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px; }
.datepicker--cell:hover {
background: #eee; }
.datepicker--cell-day.-another-month- {
color: #ddd; }
.datepicker--cell-month {
width: 33.33%;
height: 40px; }

145
dist/js/datepicker.js vendored
View File

@ -43,8 +43,8 @@ var Datepicker;
this.inited = false;
this.currentDate = this.opts.start;
this.view = this.opts.defaultView;
this.activeView = this.opts.defaultView;
this.currentView = this.opts.defaultView;
this.views = {};
this.init()
};
@ -56,7 +56,9 @@ var Datepicker;
this._buildBaseHtml();
this.nav = new Datepicker.Navigation(this, this.opts);
this.days = new Datepicker.Body(this, 'days', this.opts);
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.inited = true;
},
@ -87,34 +89,67 @@ var Datepicker;
next: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month + 1, 1);
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month + 1, 1);
break;
case 'months':
this.date = new Date(d.year + 1, d.month, 1);
}
},
prev: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month - 1, 1);
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month - 1, 1);
break;
case 'months':
this.date = new Date(d.year - 1, d.month, 1);
}
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
}
};
},
Object.defineProperty(Datepicker.prototype , 'date', {
set: function (val) {
set date (val) {
this.currentDate = val;
if (this.inited) {
this[this.activeView]._render();
this.views[this.view]._render();
this.nav._render();
}
return val;
},
get: function () {
get date () {
return this.currentDate
},
set view (val) {
this.prevView = this.currentView;
this.currentView = val;
if (this.inited) {
if (!this.views[val]) {
this.views[val] = new Datepicker.Body(this, val, this.opts)
}
this.views[this.prevView].hide();
this.views[val].show();
this.nav._render();
}
return val
},
get view() {
return this.currentView;
}
});
};
Datepicker.getDaysCount = function (date) {
@ -156,8 +191,6 @@ var Datepicker;
};
})(window, jQuery, '');
;(function () {
Datepicker.region = {
'ru': {
@ -188,6 +221,7 @@ var Datepicker;
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
},
_buildBaseHtml: function () {
@ -204,9 +238,13 @@ var Datepicker;
_getTitle: function (date) {
var month = this.d.loc.months[date.getMonth()],
year = date.getFullYear();
year = date.getFullYear(),
types = {
days: month + ', ' + year,
months: year
};
return month + ', ' + year;
return types[this.d.view];
},
_onClickNavButton: function (e) {
@ -214,6 +252,14 @@ var Datepicker;
action = $el.data('action');
this.d[action]();
},
_onClickNavTitle: function () {
if (this.d.view == 'days') {
return this.d.view = 'months'
}
this.d.view = 'years';
}
}
@ -225,9 +271,17 @@ Datepicker.Cell = function () {
;(function () {
var templates = {
days:'' +
'<div class="datepicker--days">' +
'<div class="datepicker--days datepicker--body">' +
'<div class="datepicker--days-names"></div>' +
'<div class="datepicker--cells datepicker--cells-days"></div>' +
'</div>',
months: '' +
'<div class="datepicker--months datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-months"></div>' +
'</div>',
years: '' +
'<div class="datepicker--years datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-years"></div>' +
'</div>'
};
@ -303,6 +357,51 @@ Datepicker.Cell = function () {
return '<div class="' + _class + '">' + date.getDate() + '</div>';
},
/**
* Generates months html
* @param {object} date - date instance
* @returns {string}
* @private
*/
_getMonthsHtml: function (date) {
var html = '',
d = Datepicker.getParsedDate(date),
i = 0;
while(i < 12) {
html += this._getMonthHtml(new Date(d.year, i));
i++
}
return html;
},
_getMonthHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-month",
d = Datepicker.getParsedDate(date),
loc = this.d.loc;
return '<div class="' + _class + '">' + loc.months[d.month] + '</div>'
},
_renderTypes: {
days: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
this.$cells.html(days);
this.$names.html(dayNames)
},
months: function () {
var html = this._getMonthsHtml(this.d.currentDate);
this.$cells.html(html)
},
years: function () {
this.$cells.html('Years')
}
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
@ -312,7 +411,17 @@ Datepicker.Cell = function () {
},
_render: function () {
this._renderDays();
this._renderTypes[this.type].bind(this)()
},
show: function () {
this.$el.addClass('active');
this.acitve = true;
},
hide: function () {
this.$el.removeClass('active');
this.active = false;
}
};
})();

67
js/datepicker/body.js
View File

@ -1,9 +1,17 @@
;(function () {
var templates = {
days:'' +
'<div class="datepicker--days">' +
'<div class="datepicker--days datepicker--body">' +
'<div class="datepicker--days-names"></div>' +
'<div class="datepicker--cells datepicker--cells-days"></div>' +
'</div>',
months: '' +
'<div class="datepicker--months datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-months"></div>' +
'</div>',
years: '' +
'<div class="datepicker--years datepicker--body">' +
'<div class="datepicker--cells datepicker--cells-years"></div>' +
'</div>'
};
@ -79,6 +87,51 @@
return '<div class="' + _class + '">' + date.getDate() + '</div>';
},
/**
* Generates months html
* @param {object} date - date instance
* @returns {string}
* @private
*/
_getMonthsHtml: function (date) {
var html = '',
d = Datepicker.getParsedDate(date),
i = 0;
while(i < 12) {
html += this._getMonthHtml(new Date(d.year, i));
i++
}
return html;
},
_getMonthHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-month",
d = Datepicker.getParsedDate(date),
loc = this.d.loc;
return '<div class="' + _class + '">' + loc.months[d.month] + '</div>'
},
_renderTypes: {
days: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
this.$cells.html(days);
this.$names.html(dayNames)
},
months: function () {
var html = this._getMonthsHtml(this.d.currentDate);
this.$cells.html(html)
},
years: function () {
this.$cells.html('Years')
}
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
@ -88,7 +141,17 @@
},
_render: function () {
this._renderDays();
this._renderTypes[this.type].bind(this)()
},
show: function () {
this.$el.addClass('active');
this.acitve = true;
},
hide: function () {
this.$el.removeClass('active');
this.active = false;
}
};
})();

62
js/datepicker/datepicker.js
View File

@ -43,8 +43,8 @@ var Datepicker;
this.inited = false;
this.currentDate = this.opts.start;
this.view = this.opts.defaultView;
this.activeView = this.opts.defaultView;
this.currentView = this.opts.defaultView;
this.views = {};
this.init()
};
@ -56,7 +56,9 @@ var Datepicker;
this._buildBaseHtml();
this.nav = new Datepicker.Navigation(this, this.opts);
this.days = new Datepicker.Body(this, 'days', this.opts);
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.inited = true;
},
@ -87,34 +89,67 @@ var Datepicker;
next: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month + 1, 1);
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month + 1, 1);
break;
case 'months':
this.date = new Date(d.year + 1, d.month, 1);
}
},
prev: function () {
var d = this.parsedDate;
this.date = new Date(d.year, d.month - 1, 1);
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month - 1, 1);
break;
case 'months':
this.date = new Date(d.year - 1, d.month, 1);
}
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
}
};
},
Object.defineProperty(Datepicker.prototype , 'date', {
set: function (val) {
set date (val) {
this.currentDate = val;
if (this.inited) {
this[this.activeView]._render();
this.views[this.view]._render();
this.nav._render();
}
return val;
},
get: function () {
get date () {
return this.currentDate
},
set view (val) {
this.prevView = this.currentView;
this.currentView = val;
if (this.inited) {
if (!this.views[val]) {
this.views[val] = new Datepicker.Body(this, val, this.opts)
}
this.views[this.prevView].hide();
this.views[val].show();
this.nav._render();
}
return val
},
get view() {
return this.currentView;
}
});
};
Datepicker.getDaysCount = function (date) {
@ -155,5 +190,4 @@ var Datepicker;
}
};
})(window, jQuery, '');
})(window, jQuery, '');

17
js/datepicker/navigation.js
View File

@ -19,6 +19,7 @@
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
},
_buildBaseHtml: function () {
@ -35,9 +36,13 @@
_getTitle: function (date) {
var month = this.d.loc.months[date.getMonth()],
year = date.getFullYear();
year = date.getFullYear(),
types = {
days: month + ', ' + year,
months: year
};
return month + ', ' + year;
return types[this.d.view];
},
_onClickNavButton: function (e) {
@ -45,6 +50,14 @@
action = $el.data('action');
this.d[action]();
},
_onClickNavTitle: function () {
if (this.d.view == 'days') {
return this.d.view = 'months'
}
this.d.view = 'years';
}
}

20
sass/datepicker/_cell.scss
View File

@ -10,11 +10,17 @@
}
.datepicker--cell {
border-radius: $datepickerBorderRadius;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: $dayCellSize;
height: $dayCellSize;
&:hover {
background: $colorCellHover;
}
}
// Day cell
@ -24,4 +30,18 @@
&.-another-month- {
color: $colorAnotherMonth;
}
}
// Months
// -------------------------------------------------
.datepicker--months {}
// Month cells
// -------------------------
.datepicker--cell-month {
width: 33.33%;
height: 40px;
}

15
sass/datepicker/_datepicker.scss
View File

@ -6,15 +6,21 @@
.datepicker {
border: 1px solid $colorGrey;
border-radius: 2px;
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
width: $datepickerWidth;
}
// Days
// Body
// -------------------------------------------------
.datepicker--days {}
.datepicker--body {
display: none;
&.active {
display: block;
}
}
// Day names
@ -31,4 +37,5 @@
width: $dayCellSize;
height: $dayCellSize;
text-align: center;
}
}

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

@ -1,5 +1,6 @@
$dayCellSize: 32px;
$datepickerWidth: 7 * $dayCellSize;
$datepickerBorderRadius: 2px;
$navigationHeight: 32px;
@ -7,7 +8,7 @@ $navigationHeight: 32px;
$colorGrey: #ddd;
$colorAnotherMonth: #ddd;
$colorCellHover: '';
$colorCellHover: #eee;
$colorCellCurrent: '';
$colorCellSelected: '';
$colorCellWeekend: '';