mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
170 lines
4.8 KiB
JavaScript
170 lines
4.8 KiB
JavaScript
var Datepicker;
|
||
|
||
(function (window, $, undefined) {
|
||
var pluginName = 'datepicker',
|
||
$body, $datepickersContainer,
|
||
baseTemplate = '' +
|
||
'<div class="datepicker">' +
|
||
'<header class="datepicker--header"></header>' +
|
||
'<div class="datepicker--content"></div>' +
|
||
'</div>',
|
||
defaults = {
|
||
inline: true,
|
||
region: 'ru',
|
||
firstDay: 1,
|
||
start: '',
|
||
format: 'dd.mm.yyyy'
|
||
};
|
||
|
||
Datepicker = function (el, options) {
|
||
this.$el = typeof el == 'string' ? $(el) : el;
|
||
|
||
this.opts = $.extend({}, defaults, options);
|
||
|
||
if (!this.opts.start) {
|
||
this.opts.start = new Date();
|
||
}
|
||
if (this.containerBuilt && !this.opts.inline) {
|
||
this._buildDatepickersContainer();
|
||
}
|
||
|
||
this.loc = Datepicker.region[this.opts.region];
|
||
|
||
if ($body == undefined) {
|
||
$body = $('body');
|
||
}
|
||
|
||
this.init()
|
||
};
|
||
|
||
Datepicker.getDaysCount = function (date) {
|
||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||
};
|
||
|
||
Datepicker.getParsedDate = function (date) {
|
||
return {
|
||
year: date.getUTCFullYear(),
|
||
month: date.getUTCMonth(),
|
||
day: date.getUTCDay()
|
||
}
|
||
};
|
||
|
||
Datepicker.prototype = {
|
||
containerBuilt: false,
|
||
init: function () {
|
||
this._buildBaseHtml();
|
||
|
||
this.days = new Datepicker.Body(this, 'days', this.opts)
|
||
|
||
},
|
||
|
||
_buildDatepickersContainer: function () {
|
||
this.containerBuilt = true;
|
||
$body.append('<div class="datepickers-container" id="datepickers-container"></div>')
|
||
$datepickersContainer = $('#datepickers-container');
|
||
},
|
||
|
||
_buildBaseHtml: function () {
|
||
var $appendTarget = this.$el;
|
||
if(!this.opts.inline) {
|
||
$appendTarget = $datepickersContainer;
|
||
}
|
||
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
|
||
this.$content = $('.datepicker--content', this.$datepicker);
|
||
this.$header = $('.datepicker--header', this.$datepicker);
|
||
},
|
||
|
||
_defineDOM: function () {
|
||
|
||
}
|
||
};
|
||
|
||
|
||
$.fn[pluginName] = function ( options ) {
|
||
if (Datepicker.prototype[options]) {
|
||
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||
} else {
|
||
return this.each(function () {
|
||
if (!$.data(this, pluginName)) {
|
||
$.data(this, pluginName,
|
||
new Datepicker( this, options ));
|
||
} else {
|
||
var _this = $.data(this, pluginName),
|
||
oldOpts = _this.opts;
|
||
|
||
_this.opts = $.extend({}, oldOpts, options);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
})(window, jQuery, '');
|
||
;(function () {
|
||
Datepicker.region = {
|
||
'ru': {
|
||
days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
|
||
}
|
||
}
|
||
})();
|
||
|
||
Datepicker.Cell = function () {
|
||
|
||
};
|
||
;(function () {
|
||
var templates = {
|
||
days:'' +
|
||
'<div class="datepicker--days">' +
|
||
'<div class="datepicker--days--names"></div>' +
|
||
'<div class="datepicker--days--cells"></div>' +
|
||
'</div>'
|
||
};
|
||
|
||
Datepicker.Body = function (d, type, opts) {
|
||
this.d = d;
|
||
this.type = type;
|
||
this.opts = opts;
|
||
|
||
this.viewDate = opts.start;
|
||
|
||
this.init();
|
||
};
|
||
|
||
Datepicker.Body.prototype = {
|
||
init: function () {
|
||
this._render();
|
||
},
|
||
|
||
_buildBaseHtml: function () {
|
||
this.$el = $(templates[this.type]).appendTo(this.d.$content);
|
||
this.$names = $('.datepicker--days--names', this.$el);
|
||
this.$cells = $('.datepicker--days--cells', this.$el);
|
||
},
|
||
|
||
_getDayNamesHtml: function (firstDay, curDay, html, i) {
|
||
curDay = curDay != undefined ? curDay : firstDay;
|
||
html = html ? html : '';
|
||
i = i != undefined ? i : 0;
|
||
|
||
if (i > 7) return html;
|
||
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
|
||
|
||
html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
|
||
|
||
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
|
||
},
|
||
|
||
_renderDays: function () {
|
||
var count = Datepicker.getDaysCount(this.viewDate),
|
||
dayNames = this._getDayNamesHtml(this.opts.firstDay),
|
||
firstDayIndex = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth(), 1).getDay();
|
||
|
||
this.$names.html(dayNames)
|
||
},
|
||
|
||
_render: function () {
|
||
this._buildBaseHtml();
|
||
this._renderDays();
|
||
}
|
||
};
|
||
})();
|