mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
711 lines
23 KiB
JavaScript
711 lines
23 KiB
JavaScript
var Datepicker;
|
||
|
||
(function (window, $, undefined) {
|
||
var pluginName = 'datepicker',
|
||
$body, $datepickersContainer,
|
||
containerBuilt = false,
|
||
baseTemplate = '' +
|
||
'<div class="datepicker">' +
|
||
'<nav class="datepicker--nav"></nav>' +
|
||
'<div class="datepicker--content"></div>' +
|
||
'</div>',
|
||
defaults = {
|
||
inline: false,
|
||
language: 'ru',
|
||
startDate: new Date(),
|
||
firstDay: '',
|
||
weekends: [6, 0],
|
||
dateFormat: '',
|
||
toggleSelected: true,
|
||
|
||
position: 'bottom left',
|
||
offset: 8,
|
||
|
||
view: 'days',
|
||
minView: 'days',
|
||
|
||
showOtherMonths: true,
|
||
selectOtherMonths: true,
|
||
moveToOtherMonthsOnSelect: true,
|
||
|
||
showOtherYears: true,
|
||
selectOtherYears: true,
|
||
moveToOtherYearsOnSelect: true,
|
||
|
||
minDate: '',
|
||
maxDate: '',
|
||
disableNavWhenOutOfRange: true,
|
||
|
||
multipleDates: false, // Boolean or Number
|
||
multipleDatesSeparator: ',',
|
||
|
||
todayButton: false,
|
||
clearButton: false,
|
||
|
||
showEvent: 'focus',
|
||
autoClose: false,
|
||
|
||
// navigation
|
||
prevHtml: '«',
|
||
nextHtml: '»',
|
||
navTitles: {
|
||
days: 'MM, yyyy',
|
||
months: 'yyyy',
|
||
years: 'yyyy1 - yyyy2'
|
||
},
|
||
|
||
// events
|
||
onSelect: '',
|
||
onChangeMonth: '',
|
||
onChangeYear: '',
|
||
onChangeDecade: '',
|
||
onChangeView: '',
|
||
onRenderCell: ''
|
||
};
|
||
|
||
Datepicker = function (el, options) {
|
||
this.el = el;
|
||
this.$el = $(el);
|
||
|
||
this.opts = $.extend(true, {}, defaults, options);
|
||
|
||
if ($body == undefined) {
|
||
$body = $('body');
|
||
}
|
||
|
||
if (!this.opts.startDate) {
|
||
this.opts.startDate = new Date();
|
||
}
|
||
|
||
if (this.el.nodeName == 'INPUT') {
|
||
this.elIsInput = true;
|
||
}
|
||
|
||
this.inited = false;
|
||
this.visible = false;
|
||
this.silent = false; // Need to prevent unnecessary rendering
|
||
|
||
this.currentDate = this.opts.startDate;
|
||
this.currentView = this.opts.view;
|
||
this._createShortCuts();
|
||
this.selectedDates = [];
|
||
this.views = {};
|
||
|
||
this.init()
|
||
};
|
||
|
||
|
||
Datepicker.prototype = {
|
||
viewIndexes: ['days', 'months', 'years'],
|
||
|
||
init: function () {
|
||
if (!containerBuilt && !this.opts.inline && this.elIsInput) {
|
||
this._buildDatepickersContainer();
|
||
}
|
||
this._buildBaseHtml();
|
||
this._defineLocale(this.opts.language);
|
||
this._syncWithMinMaxDates();
|
||
|
||
if (this.elIsInput) {
|
||
if (!this.opts.inline) {
|
||
// Set extra classes for proper transitions
|
||
this._setPositionClasses(this.opts.position);
|
||
this._bindEvents()
|
||
}
|
||
}
|
||
|
||
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
|
||
this.views[this.currentView].show();
|
||
this.nav = new Datepicker.Navigation(this, this.opts);
|
||
this.view = this.currentView;
|
||
|
||
this.inited = true;
|
||
},
|
||
|
||
_createShortCuts: function () {
|
||
|
||
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
||
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
||
},
|
||
|
||
_bindEvents : function () {
|
||
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
|
||
this.$el.on('blur', this._onBlur.bind(this));
|
||
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
|
||
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
|
||
},
|
||
|
||
isWeekend: function (day) {
|
||
return this.opts.weekends.indexOf(day) !== -1;
|
||
},
|
||
|
||
_defineLocale: function (lang) {
|
||
if (typeof lang == 'string') {
|
||
this.loc = Datepicker.language[lang];
|
||
if (!this.loc) {
|
||
console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
|
||
this.loc = Datepicker.language.ru
|
||
}
|
||
} else {
|
||
this.loc = $.extend({}, Datepicker.language.ru, lang)
|
||
}
|
||
|
||
if (this.opts.dateFormat) {
|
||
this.loc.dateFormat = this.opts.dateFormat
|
||
}
|
||
|
||
if (this.opts.firstDay) {
|
||
this.loc.firstDay = this.opts.firstDay
|
||
}
|
||
},
|
||
|
||
_buildDatepickersContainer: function () {
|
||
containerBuilt = true;
|
||
$body.append('<div class="datepickers-container" id="datepickers-container"></div>');
|
||
$datepickersContainer = $('#datepickers-container');
|
||
},
|
||
|
||
_buildBaseHtml: function () {
|
||
var $appendTarget,
|
||
$inline = $('<div class="datepicker-inline">');
|
||
|
||
if(this.el.nodeName == 'INPUT') {
|
||
if (!this.opts.inline) {
|
||
$appendTarget = $datepickersContainer;
|
||
} else {
|
||
$appendTarget = $inline.insertAfter(this.$el)
|
||
}
|
||
} else {
|
||
$appendTarget = $inline.insertAfter(this.$el)
|
||
}
|
||
|
||
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
|
||
this.$content = $('.datepicker--content', this.$datepicker);
|
||
this.$nav = $('.datepicker--nav', this.$datepicker);
|
||
},
|
||
|
||
_triggerOnChange: function () {
|
||
if (!this.selectedDates.length) {
|
||
return this.opts.onSelect('', '', this);
|
||
}
|
||
|
||
var selectedDates = this.selectedDates,
|
||
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
|
||
formattedDates,
|
||
_this = this,
|
||
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
|
||
|
||
formattedDates = selectedDates.map(function (date) {
|
||
return _this.formatDate(_this.loc.dateFormat, date)
|
||
}).join(this.opts.multipleDatesSeparator);
|
||
|
||
// Create new dates array, to separate it from original selectedDates
|
||
if (this.opts.multipleDates) {
|
||
dates = selectedDates.map(function(date) {
|
||
var parsedDate = Datepicker.getParsedDate(date);
|
||
return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
|
||
})
|
||
}
|
||
|
||
this.opts.onSelect(formattedDates, dates, this);
|
||
},
|
||
|
||
next: function () {
|
||
var d = this.parsedDate,
|
||
o = this.opts;
|
||
switch (this.view) {
|
||
case 'days':
|
||
this.date = new Date(d.year, d.month + 1, 1);
|
||
if (o.onChangeMonth) o.onChangeMonth(d.month + 1);
|
||
break;
|
||
case 'months':
|
||
this.date = new Date(d.year + 1, d.month, 1);
|
||
if (o.onChangeYear) o.onChangeYear(d.year + 1);
|
||
break;
|
||
case 'years':
|
||
this.date = new Date(d.year + 10, 0, 1);
|
||
if (o.onChangeDecade) o.onChangeDecade(this.curDecade);
|
||
break;
|
||
}
|
||
},
|
||
|
||
prev: function () {
|
||
var d = this.parsedDate,
|
||
o = this.opts;
|
||
switch (this.view) {
|
||
case 'days':
|
||
this.date = new Date(d.year, d.month - 1, 1);
|
||
if (o.onChangeMonth) o.onChangeMonth(d.month - 1);
|
||
break;
|
||
case 'months':
|
||
this.date = new Date(d.year - 1, d.month, 1);
|
||
if (o.onChangeYear) o.onChangeYear(d.year - 1);
|
||
break;
|
||
case 'years':
|
||
this.date = new Date(d.year - 10, 0, 1);
|
||
if (o.onChangeDecade) o.onChangeDecade(this.curDecade);
|
||
break;
|
||
}
|
||
},
|
||
|
||
formatDate: function (string, date) {
|
||
date = date || this.date;
|
||
var result = string,
|
||
locale = this.loc,
|
||
decade = Datepicker.getDecade(date),
|
||
d = Datepicker.getParsedDate(date);
|
||
|
||
switch (true) {
|
||
case /dd/.test(result):
|
||
result = result.replace(/\bdd\b/, d.fullDate);
|
||
case /d/.test(result):
|
||
result = result.replace(/\bd\b/, d.date);
|
||
case /DD/.test(result):
|
||
result = result.replace(/\bDD\b/, locale.days[d.day]);
|
||
case /D/.test(result):
|
||
result = result.replace(/\bD\b/, locale.daysShort[d.day]);
|
||
case /mm/.test(result):
|
||
result = result.replace(/\bmm\b/, d.fullMonth);
|
||
case /m/.test(result):
|
||
result = result.replace(/\bm\b/, d.month + 1);
|
||
case /MM/.test(result):
|
||
result = result.replace(/\bMM\b/, this.loc.months[d.month]);
|
||
case /M/.test(result):
|
||
result = result.replace(/\bM\b/, locale.monthsShort[d.month]);
|
||
case /yyyy/.test(result):
|
||
result = result.replace(/\byyyy\b/, d.year);
|
||
case /yyyy1/.test(result):
|
||
result = result.replace(/\byyyy1\b/, decade[0]);
|
||
case /yyyy2/.test(result):
|
||
result = result.replace(/\byyyy2\b/, decade[1]);
|
||
case /yy/.test(result):
|
||
result = result.replace(/\byy\b/, d.year.toString().slice(-2));
|
||
}
|
||
|
||
return result;
|
||
},
|
||
|
||
selectDate: function (date) {
|
||
var d = this.parsedDate,
|
||
newDate = '';
|
||
|
||
if (this.view == 'days') {
|
||
if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
|
||
newDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||
|
||
}
|
||
}
|
||
|
||
if (this.view == 'years') {
|
||
if (date.getFullYear() != d.year && this.opts.moveToOtherYearsOnSelect) {
|
||
newDate = new Date(date.getFullYear(), 0, 1);
|
||
}
|
||
}
|
||
|
||
if (newDate) {
|
||
this.silent = true;
|
||
this.date = newDate;
|
||
this.silent = false;
|
||
this.nav._render()
|
||
}
|
||
|
||
if (this.opts.multipleDates) {
|
||
if (this.selectedDates.length === this.opts.multipleDates) return;
|
||
if (!this._isSelected(date)) {
|
||
this.selectedDates.push(date);
|
||
}
|
||
} else {
|
||
this.selectedDates = [date];
|
||
}
|
||
|
||
this._setInputValue();
|
||
|
||
if (this.opts.onSelect) {
|
||
this._triggerOnChange();
|
||
}
|
||
|
||
if (this.opts.autoClose) {
|
||
this.hide();
|
||
} else {
|
||
this.views[this.currentView]._render()
|
||
}
|
||
},
|
||
|
||
removeDate: function (date) {
|
||
var selected = this.selectedDates,
|
||
_this = this;
|
||
|
||
return selected.some(function (curDate, i) {
|
||
if (Datepicker.isSame(curDate, date)) {
|
||
selected.splice(i, 1);
|
||
_this.views[_this.currentView]._render();
|
||
_this._setInputValue();
|
||
if (_this.opts.onSelect) {
|
||
_this._triggerOnChange();
|
||
}
|
||
return true
|
||
}
|
||
})
|
||
},
|
||
|
||
today: function () {
|
||
this.silent = true;
|
||
this.view = this.opts.minView;
|
||
this.silent = false;
|
||
this.date = new Date();
|
||
},
|
||
|
||
clear: function () {
|
||
this.selectedDates = [];
|
||
this.views[this.currentView]._render();
|
||
this._triggerOnChange()
|
||
},
|
||
|
||
/**
|
||
* Updates datepicker options
|
||
* @param {String|Object} param - parameter's name to update. If object then it will extend current options
|
||
* @param {String|Number|Object} [value] - new param value
|
||
*/
|
||
update: function (param, value) {
|
||
var len = arguments.length;
|
||
if (len == 2) {
|
||
this.opts[param] = value;
|
||
} else if (len == 1 && typeof param == 'object') {
|
||
this.opts = $.extend(true, this.opts, param)
|
||
}
|
||
|
||
this._createShortCuts();
|
||
this._syncWithMinMaxDates();
|
||
this._defineLocale(this.opts.language);
|
||
this.nav._addButtonsIfNeed();
|
||
this.nav._render();
|
||
this.views[this.currentView]._render();
|
||
|
||
if (this.elIsInput && !this.opts.inline) {
|
||
this._setPositionClasses(this.opts.position);
|
||
if (this.visible) {
|
||
this.setPosition(this.opts.position)
|
||
}
|
||
}
|
||
|
||
return this;
|
||
},
|
||
|
||
_syncWithMinMaxDates: function () {
|
||
var curTime = this.date.getTime();
|
||
this.silent = true;
|
||
if (this.minTime > curTime) {
|
||
this.date = this.minDate;
|
||
}
|
||
|
||
if (this.maxTime < curTime) {
|
||
this.date = this.maxDate;
|
||
}
|
||
this.silent = false;
|
||
},
|
||
|
||
_isSelected: function (checkDate, cellType) {
|
||
return this.selectedDates.some(function (date) {
|
||
return Datepicker.isSame(date, checkDate, cellType)
|
||
})
|
||
},
|
||
|
||
_setInputValue: function () {
|
||
var _this = this,
|
||
format = this.loc.dateFormat,
|
||
value = this.selectedDates.map(function (date) {
|
||
return _this.formatDate(format, date)
|
||
});
|
||
|
||
value.join(this.opts.multipleDatesSeparator);
|
||
|
||
this.$el.val(value)
|
||
},
|
||
|
||
/**
|
||
* Check if date is between minDate and maxDate
|
||
* @param date {object} - date object
|
||
* @param type {string} - cell type
|
||
* @returns {boolean}
|
||
* @private
|
||
*/
|
||
_isInRange: function (date, type) {
|
||
var time = date.getTime(),
|
||
d = Datepicker.getParsedDate(date),
|
||
min = Datepicker.getParsedDate(this.minDate),
|
||
max = Datepicker.getParsedDate(this.maxDate),
|
||
dMinTime = new Date(d.year, d.month, min.date).getTime(),
|
||
dMaxTime = new Date(d.year, d.month, max.date).getTime(),
|
||
types = {
|
||
day: time >= this.minTime && time <= this.maxTime,
|
||
month: dMinTime >= this.minTime && dMaxTime <= this.maxTime,
|
||
year: d.year >= min.year && d.year <= max.year
|
||
};
|
||
return type ? types[type] : types.day
|
||
},
|
||
|
||
_getDimensions: function ($el) {
|
||
var offset = $el.offset();
|
||
|
||
return {
|
||
width: $el.outerWidth(),
|
||
height: $el.outerHeight(),
|
||
left: offset.left,
|
||
top: offset.top
|
||
}
|
||
},
|
||
|
||
_setPositionClasses: function (pos) {
|
||
pos = pos.split(' ');
|
||
var main = pos[0],
|
||
sec = pos[1],
|
||
classes = 'datepicker -' + main + '-' + sec + '- -from-' + main + '-';
|
||
|
||
if (this.visible) classes += ' active';
|
||
|
||
this.$datepicker
|
||
.removeAttr('class')
|
||
.addClass(classes);
|
||
},
|
||
|
||
setPosition: function (position) {
|
||
var dims = this._getDimensions(this.$el),
|
||
selfDims = this._getDimensions(this.$datepicker),
|
||
pos = position.split(' '),
|
||
top, left,
|
||
offset = this.opts.offset,
|
||
main = pos[0],
|
||
secondary = pos[1];
|
||
|
||
switch (main) {
|
||
case 'top':
|
||
top = dims.top - selfDims.height - offset;
|
||
break;
|
||
case 'right':
|
||
left = dims.left + dims.width + offset;
|
||
break;
|
||
case 'bottom':
|
||
top = dims.top + dims.height + offset;
|
||
break;
|
||
case 'left':
|
||
left = dims.left - selfDims.width - offset;
|
||
break;
|
||
}
|
||
|
||
switch(secondary) {
|
||
case 'top':
|
||
top = dims.top;
|
||
break;
|
||
case 'right':
|
||
left = dims.left + dims.width - selfDims.width;
|
||
break;
|
||
case 'bottom':
|
||
top = dims.top + dims.height - selfDims.height;
|
||
break;
|
||
case 'left':
|
||
left = dims.left;
|
||
break;
|
||
case 'center':
|
||
if (/left|right/.test(main)) {
|
||
top = dims.top + dims.height/2 - selfDims.height/2;
|
||
} else {
|
||
left = dims.left + dims.width/2 - selfDims.width/2;
|
||
}
|
||
}
|
||
|
||
this.$datepicker
|
||
.css({
|
||
left: left,
|
||
top: top
|
||
})
|
||
},
|
||
|
||
show: function () {
|
||
this.setPosition(this.opts.position);
|
||
this.$datepicker.addClass('active');
|
||
this.visible = true;
|
||
},
|
||
|
||
hide: function () {
|
||
this.$datepicker
|
||
.removeClass('active')
|
||
.css({
|
||
left: '-100000px'
|
||
});
|
||
|
||
this.inFocus = false;
|
||
this.visible = false;
|
||
this.$el.blur();
|
||
},
|
||
|
||
_onShowEvent: function () {
|
||
if (!this.visible) {
|
||
this.show();
|
||
}
|
||
},
|
||
|
||
_onBlur: function () {
|
||
if (!this.inFocus && this.visible) {
|
||
this.hide();
|
||
}
|
||
},
|
||
|
||
_onMouseDownDatepicker: function (e) {
|
||
this.inFocus = true;
|
||
},
|
||
|
||
_onMouseUpDatepicker: function (e) {
|
||
this.inFocus = false;
|
||
this.$el.focus()
|
||
},
|
||
|
||
get parsedDate() {
|
||
return Datepicker.getParsedDate(this.date);
|
||
},
|
||
|
||
set date (val) {
|
||
this.currentDate = val;
|
||
|
||
if (this.inited && !this.silent) {
|
||
this.views[this.view]._render();
|
||
this.nav._render();
|
||
}
|
||
|
||
return val;
|
||
},
|
||
|
||
get date () {
|
||
return this.currentDate
|
||
},
|
||
|
||
set view (val) {
|
||
this.viewIndex = this.viewIndexes.indexOf(val);
|
||
|
||
if (this.viewIndex < 0) {
|
||
return;
|
||
}
|
||
|
||
this.prevView = this.currentView;
|
||
this.currentView = val;
|
||
|
||
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();
|
||
this.views[val].show();
|
||
this.nav._render();
|
||
|
||
if (this.opts.onChangeView) {
|
||
this.opts.onChangeView(val)
|
||
}
|
||
}
|
||
|
||
return val
|
||
},
|
||
|
||
get view() {
|
||
return this.currentView;
|
||
},
|
||
|
||
get cellType() {
|
||
return this.view.substring(0, this.view.length - 1)
|
||
},
|
||
|
||
get minTime() {
|
||
var min = Datepicker.getParsedDate(this.minDate);
|
||
return new Date(min.year, min.month, min.date).getTime()
|
||
},
|
||
|
||
get maxTime() {
|
||
var max = Datepicker.getParsedDate(this.maxDate);
|
||
return new Date(max.year, max.month, max.date).getTime()
|
||
},
|
||
|
||
get curDecade() {
|
||
return Datepicker.getDecade(this.date)
|
||
}
|
||
};
|
||
|
||
// Utils
|
||
// -------------------------------------------------
|
||
|
||
Datepicker.getDaysCount = function (date) {
|
||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||
};
|
||
|
||
Datepicker.getParsedDate = function (date) {
|
||
return {
|
||
year: date.getFullYear(),
|
||
month: date.getMonth(),
|
||
fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
|
||
date: date.getDate(),
|
||
fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
|
||
day: date.getDay()
|
||
}
|
||
};
|
||
|
||
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) {
|
||
return data[match]
|
||
}
|
||
});
|
||
};
|
||
|
||
Datepicker.isSame = function (date1, date2, type) {
|
||
var d1 = Datepicker.getParsedDate(date1),
|
||
d2 = Datepicker.getParsedDate(date2),
|
||
_type = type ? type : 'day',
|
||
|
||
conditions = {
|
||
day: d1.date == d2.date && d1.month == d2.month && d1.year == d2.year,
|
||
month: d1.month == d2.month && d1.year == d2.year,
|
||
year: d1.year == d2.year
|
||
};
|
||
|
||
return conditions[_type];
|
||
};
|
||
|
||
Datepicker.language = {
|
||
ru: {
|
||
days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
|
||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
|
||
monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
|
||
today: 'Сегодня',
|
||
clear: 'Очистить',
|
||
dateFormat: 'dd.mm.yyyy',
|
||
firstDay: 1
|
||
}
|
||
};
|
||
|
||
$.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); |