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

Browse Source
This commit is contained in:
t1m0n 2015-10-16 14:52:23 +03:00
parent 835750568f
commit 41b938eaf8
8 changed files with 211 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dist/css/datepicker.css vendored
View File

@ -43,7 +43,14 @@
.datepicker--nav-action {
width: 32px; }
.datepicker--nav-action:hover {
background: #f6f6f6; }
background: #eee; }
.datepicker--nav-title {
align-self: center;
padding: 4px;
border-radius: 2px; }
.datepicker--nav-title:hover {
background: #eee; }
/* -------------------------------------------------
Datepicker cells
@ -69,3 +76,9 @@
.datepicker--cell-month {
width: 33.33%;
height: 40px; }
.datepicker--cell-year {
width: 25%;
height: 40px; }
.datepicker--cell-year.-another-decade- {
color: #ddd; }

96
dist/js/datepicker.js vendored
View File

@ -95,6 +95,10 @@ var Datepicker;
break;
case 'months':
this.date = new Date(d.year + 1, d.month, 1);
break;
case 'years':
this.date = new Date(d.year + 10, 0, 1);
break;
}
},
@ -107,6 +111,10 @@ var Datepicker;
break;
case 'months':
this.date = new Date(d.year - 1, d.month, 1);
break;
case 'years':
this.date = new Date(d.year - 10, 0, 1);
break;
}
},
@ -136,6 +144,8 @@ var Datepicker;
if (this.inited) {
if (!this.views[val]) {
this.views[val] = new Datepicker.Body(this, val, this.opts)
} else {
this.views[val]._render();
}
this.views[this.prevView].hide();
@ -164,6 +174,12 @@ var Datepicker;
}
};
Datepicker.getDecade = function (date) {
var firstYear = Math.floor(date.getFullYear() / 10) * 10;
return [firstYear, firstYear + 9];
};
Datepicker.template = function (str, data) {
return str.replace(/#\{([\w]+)\}/g, function (source, match) {
if (data[match] || data[match] === 0) {
@ -239,9 +255,11 @@ var Datepicker;
_getTitle: function (date) {
var month = this.d.loc.months[date.getMonth()],
year = date.getFullYear(),
decade = Datepicker.getDecade(date),
types = {
days: month + ', ' + year,
months: year
months: year,
years: decade[0] + ' - ' + decade[1]
};
return types[this.d.view];
@ -297,6 +315,12 @@ Datepicker.Cell = function () {
init: function () {
this._buildBaseHtml();
this._render();
this._bindEvents();
},
_bindEvents: function () {
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this));
},
_buildBaseHtml: function () {
@ -354,7 +378,7 @@ Datepicker.Cell = function () {
if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
return '<div class="' + _class + '">' + date.getDate() + '</div>';
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
},
/**
@ -381,7 +405,33 @@ Datepicker.Cell = function () {
d = Datepicker.getParsedDate(date),
loc = this.d.loc;
return '<div class="' + _class + '">' + loc.months[d.month] + '</div>'
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
},
_getYearsHtml: function (date) {
var d = Datepicker.getParsedDate(date),
decade = Datepicker.getDecade(date),
firstYear = decade[0] - 1,
html = '',
i = firstYear;
for (i; i <= decade[1] + 1; i++) {
html += this._getYearHtml(new Date(i , 0));
}
return html;
},
_getYearHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-year",
decade = Datepicker.getDecade(this.d.date),
d = Datepicker.getParsedDate(date);
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -another-decade-';
}
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
},
_renderTypes: {
@ -398,18 +448,12 @@ Datepicker.Cell = function () {
this.$cells.html(html)
},
years: function () {
this.$cells.html('Years')
var html = this._getYearsHtml(this.d.currentDate);
this.$cells.html(html)
}
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
this.$cells.html(days);
this.$names.html(dayNames)
},
_render: function () {
this._renderTypes[this.type].bind(this)()
},
@ -422,6 +466,34 @@ Datepicker.Cell = function () {
hide: function () {
this.$el.removeClass('active');
this.active = false;
},
// Events
// -------------------------------------------------
_handleClick: {
days: function (el) {
},
months: function (el) {
var month = el.data('month'),
d = this.d.parsedDate;
this.d.date = new Date(d.year, month, 1);
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.date = new Date(year, 0, 1);
this.d.view = 'months';
}
},
_onClickCell: function (e) {
var $el = $(e.target).closest('.datepicker--cell');
this._handleClick[this.d.currentView].bind(this)($el);
}
};
})();

76
js/datepicker/body.js
View File

@ -27,6 +27,12 @@
init: function () {
this._buildBaseHtml();
this._render();
this._bindEvents();
},
_bindEvents: function () {
this.$el.on('click', '.datepicker--cell', $.proxy(this._onClickCell, this));
},
_buildBaseHtml: function () {
@ -84,7 +90,7 @@
if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
return '<div class="' + _class + '">' + date.getDate() + '</div>';
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
},
/**
@ -111,7 +117,33 @@
d = Datepicker.getParsedDate(date),
loc = this.d.loc;
return '<div class="' + _class + '">' + loc.months[d.month] + '</div>'
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
},
_getYearsHtml: function (date) {
var d = Datepicker.getParsedDate(date),
decade = Datepicker.getDecade(date),
firstYear = decade[0] - 1,
html = '',
i = firstYear;
for (i; i <= decade[1] + 1; i++) {
html += this._getYearHtml(new Date(i , 0));
}
return html;
},
_getYearHtml: function (date) {
var _class = "datepicker--cell datepicker--cell-year",
decade = Datepicker.getDecade(this.d.date),
d = Datepicker.getParsedDate(date);
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -another-decade-';
}
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
},
_renderTypes: {
@ -128,18 +160,12 @@
this.$cells.html(html)
},
years: function () {
this.$cells.html('Years')
var html = this._getYearsHtml(this.d.currentDate);
this.$cells.html(html)
}
},
_renderDays: function () {
var dayNames = this._getDayNamesHtml(this.opts.firstDay),
days = this._getDaysHtml(this.d.currentDate);
this.$cells.html(days);
this.$names.html(dayNames)
},
_render: function () {
this._renderTypes[this.type].bind(this)()
},
@ -152,6 +178,34 @@
hide: function () {
this.$el.removeClass('active');
this.active = false;
},
// Events
// -------------------------------------------------
_handleClick: {
days: function (el) {
},
months: function (el) {
var month = el.data('month'),
d = this.d.parsedDate;
this.d.date = new Date(d.year, month, 1);
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.date = new Date(year, 0, 1);
this.d.view = 'months';
}
},
_onClickCell: function (e) {
var $el = $(e.target).closest('.datepicker--cell');
this._handleClick[this.d.currentView].bind(this)($el);
}
};
})();

16
js/datepicker/datepicker.js
View File

@ -95,6 +95,10 @@ var Datepicker;
break;
case 'months':
this.date = new Date(d.year + 1, d.month, 1);
break;
case 'years':
this.date = new Date(d.year + 10, 0, 1);
break;
}
},
@ -107,6 +111,10 @@ var Datepicker;
break;
case 'months':
this.date = new Date(d.year - 1, d.month, 1);
break;
case 'years':
this.date = new Date(d.year - 10, 0, 1);
break;
}
},
@ -136,6 +144,8 @@ var Datepicker;
if (this.inited) {
if (!this.views[val]) {
this.views[val] = new Datepicker.Body(this, val, this.opts)
} else {
this.views[val]._render();
}
this.views[this.prevView].hide();
@ -164,6 +174,12 @@ var Datepicker;
}
};
Datepicker.getDecade = function (date) {
var firstYear = Math.floor(date.getFullYear() / 10) * 10;
return [firstYear, firstYear + 9];
};
Datepicker.template = function (str, data) {
return str.replace(/#\{([\w]+)\}/g, function (source, match) {
if (data[match] || data[match] === 0) {

4
js/datepicker/navigation.js
View File

@ -37,9 +37,11 @@
_getTitle: function (date) {
var month = this.d.loc.months[date.getMonth()],
year = date.getFullYear(),
decade = Datepicker.getDecade(date),
types = {
days: month + ', ' + year,
months: year
months: year,
years: decade[0] + ' - ' + decade[1]
};
return types[this.d.view];

17
sass/datepicker/_cell.scss
View File

@ -44,4 +44,21 @@
.datepicker--cell-month {
width: 33.33%;
height: 40px;
}
// Years
// -------------------------------------------------
.datepicker--years {}
// Month cells
// -------------------------
.datepicker--cell-year {
width: 100% / $yearsPerRow;
height: 40px;
&.-another-decade- {
color: $colorAnotherMonth;
}
}

12
sass/datepicker/_navigation.scss
View File

@ -23,6 +23,16 @@
width: $dayCellSize;
&:hover {
background: #f6f6f6;
background: $colorCellHover;
}
}
.datepicker--nav-title {
align-self: center;
padding: 4px;
border-radius: $datepickerBorderRadius;
&:hover {
background: $colorCellHover;
}
}

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

@ -1,6 +1,7 @@
$dayCellSize: 32px;
$datepickerWidth: 7 * $dayCellSize;
$datepickerBorderRadius: 2px;
$yearsPerRow: 4;
$navigationHeight: 32px;