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 { .datepicker--cell-year {
width: 25%; width: 25%;
height: 40px; } height: 40px; }
.datepicker--cell-year.-another-decade- { .datepicker--cell-year.-other-decade- {
color: #ddd; } color: #ddd; }

48
dist/js/datepicker.js vendored
View File

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

42
js/datepicker/body.js
View File

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

6
js/datepicker/datepicker.js
View File

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

2
sass/datepicker/_cell.scss
View File

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