vendor/assets/javascripts/pikaday.js in pikaday-gem-1.2.0 vs vendor/assets/javascripts/pikaday.js in pikaday-gem-1.4.0
- old
+ new
@@ -18,11 +18,11 @@
// AMD. Register as an anonymous module.
define(function (req)
{
// Load moment.js as an optional dependency
var id = 'moment';
- moment = req.defined && req.defined(id) ? req(id) : undefined;
+ try { moment = req(id); } catch (e) {}
return factory(moment);
});
} else {
root.Pikaday = factory(root.moment);
}
@@ -105,10 +105,16 @@
isDate = function(obj)
{
return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
},
+ isWeekend = function(date)
+ {
+ var day = date.getDay();
+ return day === 0 || day === 6;
+ },
+
isLeapYear = function(year)
{
// solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
},
@@ -132,11 +138,11 @@
extend = function(to, from, overwrite)
{
var prop, hasProp;
for (prop in from) {
hasProp = to[prop] !== undefined;
- if (hasProp && typeof from[prop] === 'object' && from[prop].nodeName === undefined) {
+ if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
if (isDate(from[prop])) {
if (overwrite) {
to[prop] = new Date(from[prop].getTime());
}
}
@@ -152,10 +158,21 @@
}
}
return to;
},
+ adjustCalendar = function(calendar) {
+ if (calendar.month < 0) {
+ calendar.year -= Math.ceil(Math.abs(calendar.month)/12);
+ calendar.month += 12;
+ }
+ if (calendar.month > 11) {
+ calendar.year += Math.floor(Math.abs(calendar.month)/12);
+ calendar.month -= 12;
+ }
+ return calendar;
+ },
/**
* defaults and localisation
*/
defaults = {
@@ -168,10 +185,13 @@
// position of the datepicker, relative to the field (default to bottom & left)
// ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
position: 'bottom left',
+ // automatically fit in the viewport even if it means repositioning from the position option
+ reposition: true,
+
// the default output format for `.toString()` and `field` value
format: 'YYYY-MM-DD',
// the initial date to view when first opened
defaultDate: null,
@@ -188,36 +208,52 @@
maxDate: null,
// number of years either side, or array of upper/lower range
yearRange: 10,
+ // show week numbers at head of row
+ showWeekNumber: false,
+
// used internally (don't config outside)
minYear: 0,
maxYear: 9999,
minMonth: undefined,
maxMonth: undefined,
+ startRange: null,
+ endRange: null,
+
isRTL: false,
// Additional text to append to the year in the calendar title
yearSuffix: '',
// Render the month after year in the calendar title
showMonthAfterYear: false,
- // how many months are visible (not implemented yet)
+ // how many months are visible
numberOfMonths: 1,
+ // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
+ // only used for the first display or when a selected date is not visible
+ mainCalendar: 'left',
+
+ // Specify a DOM element to render the calendar in
+ container: undefined,
+
// internationalization
i18n: {
previousMonth : 'Previous Month',
nextMonth : 'Next Month',
months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
},
+ // Theme Classname
+ theme: null,
+
// callback function
onSelect: null,
onOpen: null,
onClose: null,
onDraw: null
@@ -234,28 +270,49 @@
day -= 7;
}
return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
},
- renderDay = function(i, isSelected, isToday, isDisabled, isEmpty)
+ renderDay = function(opts)
{
- if (isEmpty) {
+ if (opts.isEmpty) {
return '<td class="is-empty"></td>';
}
var arr = [];
- if (isDisabled) {
+ if (opts.isDisabled) {
arr.push('is-disabled');
}
- if (isToday) {
+ if (opts.isToday) {
arr.push('is-today');
}
- if (isSelected) {
+ if (opts.isSelected) {
arr.push('is-selected');
}
- return '<td data-day="' + i + '" class="' + arr.join(' ') + '"><button class="pika-button" type="button">' + i + '</button>' + '</td>';
+ if (opts.isInRange) {
+ arr.push('is-inrange');
+ }
+ if (opts.isStartRange) {
+ arr.push('is-startrange');
+ }
+ if (opts.isEndRange) {
+ arr.push('is-endrange');
+ }
+ return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + '">' +
+ '<button class="pika-button pika-day" type="button" ' +
+ 'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' +
+ opts.day +
+ '</button>' +
+ '</td>';
},
+ renderWeek = function (d, m, y) {
+ // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
+ var onejan = new Date(y, 0, 1),
+ weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
+ return '<td class="pika-week">' + weekNum + '</td>';
+ },
+
renderRow = function(days, isRTL)
{
return '<tr>' + (isRTL ? days.reverse() : days).join('') + '</tr>';
},
@@ -265,37 +322,38 @@
},
renderHead = function(opts)
{
var i, arr = [];
+ if (opts.showWeekNumber) {
+ arr.push('<th></th>');
+ }
for (i = 0; i < 7; i++) {
arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
}
return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
},
- renderTitle = function(instance)
+ renderTitle = function(instance, c, year, month, refYear)
{
var i, j, arr,
opts = instance._o,
- month = instance._m,
- year = instance._y,
isMinYear = year === opts.minYear,
isMaxYear = year === opts.maxYear,
html = '<div class="pika-title">',
monthHtml,
yearHtml,
prev = true,
next = true;
for (arr = [], i = 0; i < 12; i++) {
- arr.push('<option value="' + i + '"' +
+ arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
(i === month ? ' selected': '') +
((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
opts.i18n.months[i] + '</option>');
}
- monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month">' + arr.join('') + '</select></div>';
+ monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
if (isArray(opts.yearRange)) {
i = opts.yearRange[0];
j = opts.yearRange[1] + 1;
} else {
@@ -306,11 +364,11 @@
for (arr = []; i < j && i <= opts.maxYear; i++) {
if (i >= opts.minYear) {
arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
}
}
- yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year">' + arr.join('') + '</select></div>';
+ yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
if (opts.showMonthAfterYear) {
html += yearHtml + monthHtml;
} else {
html += monthHtml + yearHtml;
@@ -322,12 +380,16 @@
if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
next = false;
}
- html += '<button class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
- html += '<button class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
+ if (c === 0) {
+ html += '<button class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
+ }
+ if (c === (instance._o.numberOfMonths - 1) ) {
+ html += '<button class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
+ }
return html += '</div>';
},
renderTable = function(opts, data)
@@ -355,26 +417,29 @@
return;
}
if (!hasClass(target, 'is-disabled')) {
if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
- self.setDate(new Date(self._y, self._m, parseInt(target.innerHTML, 10)));
+ self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
if (opts.bound) {
sto(function() {
self.hide();
+ if (opts.field) {
+ opts.field.blur();
+ }
}, 100);
}
- return;
}
else if (hasClass(target, 'pika-prev')) {
self.prevMonth();
}
else if (hasClass(target, 'pika-next')) {
self.nextMonth();
}
}
if (!hasClass(target, 'pika-select')) {
+ // if this is touch event prevent mouse events emulation
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
return false;
@@ -411,11 +476,13 @@
date = (date && date.isValid()) ? date.toDate() : null;
}
else {
date = new Date(Date.parse(opts.field.value));
}
- self.setDate(isDate(date) ? date : null);
+ if (isDate(date)) {
+ self.setDate(date);
+ }
if (!self._v) {
self.show();
}
};
@@ -429,10 +496,19 @@
self.show();
};
self._onInputBlur = function()
{
+ // IE allows pika div to gain focus; catch blur the input field
+ var pEl = document.activeElement;
+ do {
+ if (hasClass(pEl, 'pika-single')) {
+ return;
+ }
+ }
+ while ((pEl = pEl.parentNode));
+
if (!self._c) {
self._b = sto(function() {
self.hide();
}, 50);
}
@@ -452,28 +528,31 @@
target.setAttribute('onchange', 'return;');
addEvent(target, 'change', self._onChange);
}
}
do {
- if (hasClass(pEl, 'pika-single')) {
+ if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
return;
}
}
while ((pEl = pEl.parentNode));
- if (self._v && target !== opts.trigger) {
+ if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
self.hide();
}
};
self.el = document.createElement('div');
- self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '');
+ self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : '');
addEvent(self.el, 'mousedown', self._onMouseDown, true);
+ addEvent(self.el, 'touchend', self._onMouseDown, true);
addEvent(self.el, 'change', self._onChange);
if (opts.field) {
- if (opts.bound) {
+ if (opts.container) {
+ opts.container.appendChild(self.el);
+ } else if (opts.bound) {
document.body.appendChild(self.el);
} else {
opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
}
addEvent(opts.field, 'change', self._onInputChange);
@@ -507,11 +586,10 @@
addEvent(opts.trigger, 'focus', self._onInputFocus);
addEvent(opts.trigger, 'blur', self._onInputBlur);
} else {
this.show();
}
-
};
/**
* public Pikaday API
@@ -532,14 +610,20 @@
opts.isRTL = !!opts.isRTL;
opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;
+ opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null;
+
opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
+ opts.disableWeekends = !!opts.disableWeekends;
+
+ opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
+
var nom = parseInt(opts.numberOfMonths, 10) || 1;
opts.numberOfMonths = nom > 4 ? 4 : nom;
if (!isDate(opts.minDate)) {
opts.minDate = false;
@@ -549,18 +633,14 @@
}
if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
opts.maxDate = opts.minDate = false;
}
if (opts.minDate) {
- setToStartOfDay(opts.minDate);
- opts.minYear = opts.minDate.getFullYear();
- opts.minMonth = opts.minDate.getMonth();
+ this.setMinDate(opts.minDate);
}
if (opts.maxDate) {
- setToStartOfDay(opts.maxDate);
- opts.maxYear = opts.maxDate.getFullYear();
- opts.maxMonth = opts.maxDate.getMonth();
+ this.setMaxDate(opts.maxDate);
}
if (isArray(opts.yearRange)) {
var fallback = new Date().getFullYear() - 10;
opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
@@ -614,10 +694,16 @@
*/
setDate: function(date, preventOnSelect)
{
if (!date) {
this._d = null;
+
+ if (this._o.field) {
+ this._o.field.value = '';
+ fireEvent(this._o.field, 'change', { firedBy: this });
+ }
+
return this.draw();
}
if (typeof date === 'string') {
date = new Date(Date.parse(date));
}
@@ -650,15 +736,47 @@
/**
* change view to a specific date
*/
gotoDate: function(date)
{
+ var newCalendar = true;
+
if (!isDate(date)) {
return;
}
- this._y = date.getFullYear();
- this._m = date.getMonth();
+
+ if (this.calendars) {
+ var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
+ lastVisibleDate = new Date(this.calendars[this.calendars.length-1].year, this.calendars[this.calendars.length-1].month, 1),
+ visibleDate = date.getTime();
+ // get the end of the month
+ lastVisibleDate.setMonth(lastVisibleDate.getMonth()+1);
+ lastVisibleDate.setDate(lastVisibleDate.getDate()-1);
+ newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
+ }
+
+ if (newCalendar) {
+ this.calendars = [{
+ month: date.getMonth(),
+ year: date.getFullYear()
+ }];
+ if (this._o.mainCalendar === 'right') {
+ this.calendars[0].month += 1 - this._o.numberOfMonths;
+ }
+ }
+
+ this.adjustCalendars();
+ },
+
+ adjustCalendars: function() {
+ this.calendars[0] = adjustCalendar(this.calendars[0]);
+ for (var c = 1; c < this._o.numberOfMonths; c++) {
+ this.calendars[c] = adjustCalendar({
+ month: this.calendars[0].month + c,
+ year: this.calendars[0].year
+ });
+ }
this.draw();
},
gotoToday: function()
{
@@ -668,61 +786,73 @@
/**
* change view to a specific month (zero-index, e.g. 0: January)
*/
gotoMonth: function(month)
{
- if (!isNaN( (month = parseInt(month, 10)) )) {
- this._m = month < 0 ? 0 : month > 11 ? 11 : month;
- this.draw();
+ if (!isNaN(month)) {
+ this.calendars[0].month = parseInt(month, 10);
+ this.adjustCalendars();
}
},
nextMonth: function()
{
- if (++this._m > 11) {
- this._m = 0;
- this._y++;
- }
- this.draw();
+ this.calendars[0].month++;
+ this.adjustCalendars();
},
prevMonth: function()
{
- if (--this._m < 0) {
- this._m = 11;
- this._y--;
- }
- this.draw();
+ this.calendars[0].month--;
+ this.adjustCalendars();
},
/**
* change view to a specific full year (e.g. "2012")
*/
gotoYear: function(year)
{
if (!isNaN(year)) {
- this._y = parseInt(year, 10);
- this.draw();
+ this.calendars[0].year = parseInt(year, 10);
+ this.adjustCalendars();
}
},
/**
* change the minDate
*/
setMinDate: function(value)
{
+ setToStartOfDay(value);
this._o.minDate = value;
+ this._o.minYear = value.getFullYear();
+ this._o.minMonth = value.getMonth();
+ this.draw();
},
/**
* change the maxDate
*/
setMaxDate: function(value)
{
+ setToStartOfDay(value);
this._o.maxDate = value;
+ this._o.maxYear = value.getFullYear();
+ this._o.maxMonth = value.getMonth();
+ this.draw();
},
+ setStartRange: function(value)
+ {
+ this._o.startRange = value;
+ },
+
+ setEndRange: function(value)
+ {
+ this._o.endRange = value;
+ },
+
/**
* refresh the HTML
*/
draw: function(force)
{
@@ -731,11 +861,12 @@
}
var opts = this._o,
minYear = opts.minYear,
maxYear = opts.maxYear,
minMonth = opts.minMonth,
- maxMonth = opts.maxMonth;
+ maxMonth = opts.maxMonth,
+ html = '';
if (this._y <= minYear) {
this._y = minYear;
if (!isNaN(minMonth) && this._m < minMonth) {
this._m = minMonth;
@@ -746,14 +877,17 @@
if (!isNaN(maxMonth) && this._m > maxMonth) {
this._m = maxMonth;
}
}
- this.el.innerHTML = renderTitle(this) + this.render(this._y, this._m);
+ for (var c = 0; c < opts.numberOfMonths; c++) {
+ html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year) + this.render(this.calendars[c].year, this.calendars[c].month) + '</div>';
+ }
+ this.el.innerHTML = html;
+
if (opts.bound) {
- this.adjustPosition();
if(opts.field.type !== 'hidden') {
sto(function() {
opts.trigger.focus();
}, 1);
}
@@ -767,17 +901,24 @@
}
},
adjustPosition: function()
{
- var field = this._o.trigger, pEl = field,
- width = this.el.offsetWidth, height = this.el.offsetHeight,
- viewportWidth = window.innerWidth || document.documentElement.clientWidth,
- viewportHeight = window.innerHeight || document.documentElement.clientHeight,
- scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
- left, top, clientRect;
+ var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
+ if (this._o.container) return;
+
+ this.el.style.position = 'absolute';
+
+ field = this._o.trigger;
+ pEl = field;
+ width = this.el.offsetWidth;
+ height = this.el.offsetHeight;
+ viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+ viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+ scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+
if (typeof field.getBoundingClientRect === 'function') {
clientRect = field.getBoundingClientRect();
left = clientRect.left + window.pageXOffset;
top = clientRect.bottom + window.pageYOffset;
} else {
@@ -788,31 +929,29 @@
top += pEl.offsetTop;
}
}
// default position is bottom & left
- if (left + width > viewportWidth ||
+ if ((this._o.reposition && left + width > viewportWidth) ||
(
this._o.position.indexOf('right') > -1 &&
left - width + field.offsetWidth > 0
)
) {
left = left - width + field.offsetWidth;
}
- if (top + height > viewportHeight + scrollTop ||
+ if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
(
this._o.position.indexOf('top') > -1 &&
top - height - field.offsetHeight > 0
)
) {
top = top - height - field.offsetHeight;
}
- this.el.style.cssText = [
- 'position: absolute',
- 'left: ' + left + 'px',
- 'top: ' + top + 'px'
- ].join(';');
+
+ this.el.style.left = left + 'px';
+ this.el.style.top = top + 'px';
},
/**
* render HTML for a particular month
*/
@@ -838,18 +977,39 @@
}
cells += 7 - after;
for (var i = 0, r = 0; i < cells; i++)
{
var day = new Date(year, month, 1 + (i - before)),
- isDisabled = (opts.minDate && day < opts.minDate) || (opts.maxDate && day > opts.maxDate),
isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
isToday = compareDates(day, now),
- isEmpty = i < before || i >= (days + before);
+ isEmpty = i < before || i >= (days + before),
+ isStartRange = opts.startRange && compareDates(opts.startRange, day),
+ isEndRange = opts.endRange && compareDates(opts.endRange, day),
+ isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange,
+ isDisabled = (opts.minDate && day < opts.minDate) ||
+ (opts.maxDate && day > opts.maxDate) ||
+ (opts.disableWeekends && isWeekend(day)) ||
+ (opts.disableDayFn && opts.disableDayFn(day)),
+ dayConfig = {
+ day: 1 + (i - before),
+ month: month,
+ year: year,
+ isSelected: isSelected,
+ isToday: isToday,
+ isDisabled: isDisabled,
+ isEmpty: isEmpty,
+ isStartRange: isStartRange,
+ isEndRange: isEndRange,
+ isInRange: isInRange
+ };
- row.push(renderDay(1 + (i - before), isSelected, isToday, isDisabled, isEmpty));
+ row.push(renderDay(dayConfig));
if (++r === 7) {
+ if (opts.showWeekNumber) {
+ row.unshift(renderWeek(i - before, month, year));
+ }
data.push(renderRow(row, opts.isRTL));
row = [];
r = 0;
}
}
@@ -862,16 +1022,17 @@
},
show: function()
{
if (!this._v) {
- if (this._o.bound) {
- addEvent(document, 'click', this._onClick);
- }
removeClass(this.el, 'is-hidden');
this._v = true;
this.draw();
+ if (this._o.bound) {
+ addEvent(document, 'click', this._onClick);
+ this.adjustPosition();
+ }
if (typeof this._o.onOpen === 'function') {
this._o.onOpen.call(this);
}
}
},
@@ -881,11 +1042,13 @@
var v = this._v;
if (v !== false) {
if (this._o.bound) {
removeEvent(document, 'click', this._onClick);
}
- this.el.style.cssText = '';
+ this.el.style.position = 'static'; // reset
+ this.el.style.left = 'auto';
+ this.el.style.top = 'auto';
addClass(this.el, 'is-hidden');
this._v = false;
if (v !== undefined && typeof this._o.onClose === 'function') {
this._o.onClose.call(this);
}
@@ -897,10 +1060,11 @@
*/
destroy: function()
{
this.hide();
removeEvent(this.el, 'mousedown', this._onMouseDown, true);
+ removeEvent(this.el, 'touchend', this._onMouseDown, true);
removeEvent(this.el, 'change', this._onChange);
if (this._o.field) {
removeEvent(this._o.field, 'change', this._onInputChange);
if (this._o.bound) {
removeEvent(this._o.trigger, 'click', this._onInputClick);
@@ -915,6 +1079,6 @@
};
return Pikaday;
-}));
\ No newline at end of file
+}));