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 onRenderCell option

Browse Source
This commit is contained in:
t1m0n 2015-11-09 11:38:01 +03:00
parent 4fcf1700bb
commit 7a2508384b
6 changed files with 74 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/datepicker.css vendored
View File

@ -107,5 +107,5 @@
.datepicker--cell-year {
width: 25%;
height: 40px; }
.datepicker--cell-year.-another-decade- {
.datepicker--cell-year.-other-decade- {
color: #ddd; }

48
dist/js/datepicker.js vendored
View File

@ -16,6 +16,8 @@ var Datepicker;
start: '', // Start date
weekends: [6, 0],
defaultView: 'days',
//TODO сделать минимальный вид
minView: 'days',
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
@ -37,8 +39,8 @@ var Datepicker;
nextHtml: '»',
// events
//TODO сделать обратный вызов
onChange: ''
onChange: '',
onRenderCell: ''
};
Datepicker = function (el, options) {
@ -583,13 +585,19 @@ Datepicker.Cell = function () {
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
d = Datepicker.getParsedDate(date),
render,
html = d.date;
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'day') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (this.d.isWeekend(d.day)) _class += " -weekend-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
if (!this.d._isInRange(date)) _class += ' -disabled-';
if (!this.d._isInRange(date) || render.disabled) _class += ' -disabled-';
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
@ -629,12 +637,20 @@ Datepicker.Cell = function () {
var _class = "datepicker--cell datepicker--cell-month",
d = Datepicker.getParsedDate(date),
currentDate = new Date(),
loc = this.d.loc;
loc = this.d.loc,
html = loc.months[d.month],
render = {};
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'month') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
},
_getYearsHtml: function (date) {
@ -655,16 +671,24 @@ Datepicker.Cell = function () {
var _class = "datepicker--cell datepicker--cell-year",
decade = Datepicker.getDecade(this.d.date),
currentDate = new Date(),
d = Datepicker.getParsedDate(date);
d = Datepicker.getParsedDate(date),
html = d.year,
render = {};
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'year') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -another-decade-';
_class += ' -other-decade-';
}
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
},
_renderTypes: {
@ -706,8 +730,6 @@ Datepicker.Cell = function () {
_handleClick: {
days: function (el) {
if (el.hasClass('-disabled-')) return;
var date = el.data('date'),
month = el.data('month'),
year = el.data('year'),
@ -749,6 +771,8 @@ Datepicker.Cell = function () {
_onClickCell: function (e) {
var $el = $(e.target).closest('.datepicker--cell');
if ($el.hasClass('-disabled-')) return;
this._handleClick[this.d.currentView].bind(this)($el);
}
};

1
index.html
View File

@ -16,7 +16,6 @@
<script type="text/javascript" src="dist/js/datepicker.js"></script>
<script type="text/javascript">
$('.calendar').datepicker({
maxDate: new Date(2016, 0, 10),
onChange: function (dateString, date, inst) {
console.log(dateString);
}

42
js/datepicker/body.js
View File

@ -88,13 +88,19 @@
var _class = "datepicker--cell datepicker--cell-day",
currentDate = new Date(),
d = Datepicker.getParsedDate(date),
render,
html = d.date;
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'day') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (this.d.isWeekend(d.day)) _class += " -weekend-";
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
if (this.d._isSelected(date, 'day')) _class += ' -selected-';
if (!this.d._isInRange(date)) _class += ' -disabled-';
if (!this.d._isInRange(date) || render.disabled) _class += ' -disabled-';
if (d.month != this.d.parsedDate.month) {
_class += " -other-month-";
@ -134,12 +140,20 @@
var _class = "datepicker--cell datepicker--cell-month",
d = Datepicker.getParsedDate(date),
currentDate = new Date(),
loc = this.d.loc;
loc = this.d.loc,
html = loc.months[d.month],
render = {};
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'month') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
if (!this.d._isInRange(date, 'month') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
return '<div class="' + _class + '" data-month="' + d.month + '">' + html + '</div>'
},
_getYearsHtml: function (date) {
@ -160,16 +174,24 @@
var _class = "datepicker--cell datepicker--cell-year",
decade = Datepicker.getDecade(this.d.date),
currentDate = new Date(),
d = Datepicker.getParsedDate(date);
d = Datepicker.getParsedDate(date),
html = d.year,
render = {};
if (this.opts.onRenderCell) {
render = this.opts.onRenderCell(date, 'year') || {};
html = render.html ? render.html : html;
_class += render.classes ? ' ' + render.classes : '';
}
if (d.year < decade[0] || d.year > decade[1]) {
_class += ' -another-decade-';
_class += ' -other-decade-';
}
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
if (!this.d._isInRange(date, 'year') || render.disabled) _class += ' -disabled-';
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
return '<div class="' + _class + '" data-year="' + d.year + '">' + html + '</div>'
},
_renderTypes: {
@ -211,8 +233,6 @@
_handleClick: {
days: function (el) {
if (el.hasClass('-disabled-')) return;
var date = el.data('date'),
month = el.data('month'),
year = el.data('year'),
@ -254,6 +274,8 @@
_onClickCell: function (e) {
var $el = $(e.target).closest('.datepicker--cell');
if ($el.hasClass('-disabled-')) return;
this._handleClick[this.d.currentView].bind(this)($el);
}
};

6
js/datepicker/datepicker.js
View File

@ -16,6 +16,8 @@ var Datepicker;
start: '', // Start date
weekends: [6, 0],
defaultView: 'days',
//TODO сделать минимальный вид
minView: 'days',
dateFormat: 'dd.mm.yyyy',
toggleSelected: true,
@ -37,8 +39,8 @@ var Datepicker;
nextHtml: '&raquo;',
// events
//TODO сделать обратный вызов
onChange: ''
onChange: '',
onRenderCell: ''
};
Datepicker = function (el, options) {

2
sass/datepicker/_cell.scss
View File

@ -98,7 +98,7 @@
width: 100% / $yearsPerRow;
height: 40px;
&.-another-decade- {
&.-other-decade- {
color: $colorAnotherMonth;
}
}