assets/js/romo/datepicker.js in romo-0.17.1 vs assets/js/romo/datepicker.js in romo-0.18.0
- old
+ new
@@ -4,22 +4,18 @@
});
}
var RomoDatepicker = function(element) {
this.elem = $(element);
- this.monthNames = [
- "January", "February", "March", "April", "May", "June",
- "July", "August", "September", "October", "November", "December"
- ]
this.defaultFormat = 'yyyy-mm-dd'
this.defaultPrevClass = undefined;
this.defaultNextClass = undefined;
this.itemSelector = 'TD.romo-datepicker-day:not(.disabled)';
this.calTable = $();
this.date = undefined;
- this.today = this._getTodaysDate();
+ this.today = RomoDate.today();
this.prevValue = undefined;
this.doInit();
this.doBindElem();
this.doSetFormat();
@@ -82,18 +78,17 @@
}, this));
this.elem.on('datepicker:triggerSetDate', $.proxy(this.onTriggerSetDate, this));
}
RomoDatepicker.prototype.doSetFormat = function() {
- var format = this.elem.data('romo-datepicker-format') || this.defaultFormat;
- this.formatValues = this._parseFormatValues(format);
+ this.formatString = this.elem.data('romo-datepicker-format') || this.defaultFormat;
}
RomoDatepicker.prototype.doSetDate = function(value) {
- this.date = this._parseDate(value);
+ this.date = RomoDate.parse(value);
if (this.date !== undefined) {
- this.elem.val(this._formatDate(this.date));
+ this.elem.val(RomoDate.format(this.date, this.formatString));
} else {
this.elem.val(value);
}
}
@@ -149,11 +144,11 @@
this.calTable.find('.romo-datepicker-prev').on('click', $.proxy(this.onPrevClick, this));
this.calTable.find('.romo-datepicker-next').on('click', $.proxy(this.onNextClick, this));
}
RomoDatepicker.prototype.doRefreshUI = function(date) {
- var rDate = date || this.date || (new Date);
+ var rDate = date || this.date || this.today;
this._refreshCalendar(rDate);
this.elem.trigger('datepicker:refresh', [rDate, this]);
this.calTable.find(this.itemSelector).on('mouseenter', $.proxy(this.onItemEnter, this));
this.calTable.find(this.itemSelector).on('click', $.proxy(this.onItemClick, this));
@@ -161,33 +156,19 @@
this.romoDropdown.popupElem.on('mousedown', $.proxy(this.onPopupMouseDown, this));
this.romoDropdown.popupElem.on('mouseup', $.proxy(this.onPopupMouseUp, this));
}
RomoDatepicker.prototype.doRefreshToPrevMonth = function() {
- var date = this.refreshDate || this.date || (new Date);
- var year = date.getUTCFullYear();
- var month = date.getUTCMonth() - 1;
- if (month < 0) {
- year -= 1;
- month = 11;
- }
-
- var pDate = this._UTCDate(year, month, 1);
+ var date = this.refreshDate || this.date || (new Date);
+ var pDate = RomoDate.lastDateOfPrevMonth(date);
this.doRefreshUI(pDate);
this.elem.trigger('datepicker:prevRefresh', [pDate, this]);
}
RomoDatepicker.prototype.doRefreshToNextMonth = function() {
- var date = this.refreshDate || this.date || (new Date);
- var year = date.getUTCFullYear();
- var month = date.getUTCMonth() + 1;
- if (month > 11) {
- year += 1;
- month = 0;
- }
-
- var nDate = this._UTCDate(year, month, 1);
+ var date = this.refreshDate || this.date || (new Date);
+ var nDate = RomoDate.firstDateOfNextMonth(date);
this.doRefreshUI(nDate);
this.elem.trigger('datepicker:nextRefresh', [nDate, this]);
}
RomoDatepicker.prototype.doSelectHighlightedItem = function() {
@@ -334,225 +315,85 @@
}
row.append(th);
header.append(row);
row = $('<tr></tr>');
- row.append($('<th class="romo-datepicker-day">Su</th>'));
+ row.append($('<th class="romo-datepicker-day">S</th>'));
row.append($('<th class="romo-datepicker-day">M</th>'));
row.append($('<th class="romo-datepicker-day">T</th>'));
row.append($('<th class="romo-datepicker-day">W</th>'));
- row.append($('<th class="romo-datepicker-day">Th</th>'));
+ row.append($('<th class="romo-datepicker-day">T</th>'));
row.append($('<th class="romo-datepicker-day">F</th>'));
row.append($('<th class="romo-datepicker-day">S</th>'));
header.append(row);
return header;
}
RomoDatepicker.prototype._buildCalendarTitle = function(date) {
- return this.monthNames[date.getUTCMonth()] + ' ' + date.getUTCFullYear().toString();
+ return RomoDate.format(date, 'MM yyyy');
}
RomoDatepicker.prototype._buildCalendarBody = function(date) {
- var ty = this.today.getUTCFullYear();
- var tm = this.today.getUTCMonth();
- var td = this.today.getUTCDate();
- var year = date.getUTCFullYear();
- var month = date.getUTCMonth();
- var day = date.getUTCDate();
- var fomdow = this._UTCDate(year, month, 1).getUTCDay(); // first-of-the-month day-of-the-week
- if (fomdow == 0) {
- fomdow = 7; // don't start calendar on the first-of-the-month, show last week of prev month
- }
- var iDate = this._UTCDate(year, month, 1 - fomdow);
- var iWeek = 0;
var html = [];
+ // prefer showing as many past dates in each month as possible
+ // calc the most post days we can show and still fit the date's
+ // month in 6 weeks of displayed days:
+ // 7 days * 6 weeks = 42 displayed days
+ // 42 displayed days - {days in month} = {max past days}
+ var fom = RomoDate.firstDateOfMonth(date); // first-of-month
+ var dim = RomoDate.daysInMonth(date); // days-in-month
+ var past = fom.getDay(); // start on this week's Sunday
+ if ((past+7) <= (42-dim)) { // if there is enough room,
+ past = past+7; // start on prev week's Sunday
+ }
+ var iDate = RomoDate.vector(fom, -past);
+
+ var iWeek = 0;
while (iWeek < 6) { // render 6 weeks in the calendar
- var y = iDate.getUTCFullYear();
- var m = iDate.getUTCMonth();
- var d = iDate.getUTCDate();
- var dow = iDate.getUTCDay();
var cls = [];
- if (dow === 0) {
+ if (RomoDate.isDay(iDate, 'Sunday')) {
html.push('<tr>');
}
cls.push('romo-datepicker-day');
- if (dow === 0 || dow === 6) {
+ if (RomoDate.isWeekend(iDate)) {
cls.push('romo-datepicker-day-weekend');
}
- if (y !== year || m !== month) {
+ if (!RomoDate.isSameMonth(iDate, date)) {
cls.push('romo-datepicker-day-other');
}
- if (y === ty && m === tm && d === td) {
+ if (RomoDate.isEqual(iDate, this.today)) {
cls.push('romo-datepicker-day-today');
}
- if (this.date &&
- y === this.date.getUTCFullYear() &&
- m === this.date.getUTCMonth() &&
- d === this.date.getUTCDate()) {
+ if (RomoDate.isEqual(iDate, this.date)) {
cls.push('selected');
}
html.push('<td');
html.push(' class="'+cls.join(' ')+'"');
- var dt = this._formatDate(iDate);
+ var dt = RomoDate.format(iDate, this.formatString);
html.push(' title="'+dt+'"');
html.push(' data-romo-datepicker-value="'+dt+'"');
html.push('>');
- html.push(d.toString());
+ html.push(RomoDate.format(iDate, 'd'));
html.push('</td>');
- if (dow === 6) {
+ if (RomoDate.isDay(iDate, 'Saturday')) {
html.push('</tr>');
iWeek += 1;
}
- iDate.setUTCDate(iDate.getUTCDate()+1);
+ iDate = RomoDate.next(iDate);
}
return $(html.join(''));
}
RomoDatepicker.prototype._highlightItem = function(item) {
this.calTable.find('TD.romo-datepicker-highlight').removeClass('romo-datepicker-highlight');
item.addClass('romo-datepicker-highlight');
-}
-
-RomoDatepicker.prototype._formatDate = function(date) {
- var year = date.getUTCFullYear();
- var month = date.getUTCMonth() + 1;
- var day = date.getUTCDate();
-
- return this.formatValues.reduce(function(prev, curr) {
- switch (curr) {
- case "yyyy":
- case "yyy":
- prev += year.toString();
- break;
- case "yy":
- case "y":
- prev += year.toString().slice(-2);
- break;
- case "mm":
- prev += ("00"+ month.toString()).slice(-2); // pad 2 with "0"s
- break;
- case "m":
- prev += month.toString();
- break;
- case "dd":
- prev += ("00"+ day.toString()).slice(-2); // pad 2 with "0"s
- break;
- case "d":
- prev += day.toString();
- break;
- default:
- prev += curr; // delimeter, pass-thru
- }
- return prev;
- }, '');
-}
-
-RomoDatepicker.prototype._parseFormatValues = function(value) {
- var regex, matches;
-
- regex = /^([m]{1,2})([^md]+)([d]{1,2})([^dy]+)([y]{2,4})$/; // mm dd yyyy or mm dd yy
- matches = this._regexMatches(value, regex);
- if (matches.length === 5) {
- return matches;
- }
-
- regex = /^([y]{3,4})([^ym]+)([m]{1,2})([^md]+)([d]{1,2})$/; // yyyy mm dd
- matches = this._regexMatches(value, regex);
- if (matches.length === 5) {
- return matches;
- }
-
- return ['yyyy', '-', 'mm', '-', 'dd'];
-}
-
-RomoDatepicker.prototype._parseDate = function(value) {
- if (value.trim() === '') {
- return undefined;
- }
-
- var dateValues = this._parseDateValues(value.trim());
- if (dateValues.length === 0) {
- return undefined;
- }
-
- var year = parseInt(dateValues[0]);
- if (year < 0) {
- return undefined;
- }
- if (dateValues[0].length > 2 && year < 100) {
- return undefined;
- }
- if (dateValues[0].length === 2 && year < 100) {
- year = this._currentYear() - (this._currentYear() % 1000) + year;
- }
-
- var month = parseInt(dateValues[1]) - 1;
- if (month < 0 || month > 11) {
- return undefined;
- }
-
- var day = parseInt(dateValues[2]);
- var date = this._UTCDate(year, month, day);
- if (date.getUTCMonth() !== month) {
- return undefined;
- }
-
- return date;
-}
-
-RomoDatepicker.prototype._parseDateValues = function(value) {
- var regex, matches;
-
- regex = /^([0-9]{1,2})[^0-9]+([0-9]{1,2})[^0-9]+([0-9]{2,4})$/; // mm dd yyyy or mm dd yy
- matches = this._regexMatches(value, regex);
- if (matches.length === 3) {
- return [matches[2], matches[0], matches[1]];
- }
-
- regex = /^([0-9]{3,4})[^0-9]+([0-9]{1,2})[^0-9]+([0-9]{1,2})$/; // yyyy mm dd
- matches = this._regexMatches(value, regex);
- if (matches.length === 3) {
- return matches;
- }
-
- regex = /^([0-9]{1,2})[^0-9]+([0-9]{1,2})$/; // mm dd
- matches = this._regexMatches(value, regex);
- if (matches.length === 2) {
- return [this._currentYear(), matches[0], matches[1]];
- }
-
- return [];
-}
-
-RomoDatepicker.prototype._regexMatches = function(value, regex) {
- if (regex.test(value) === true) {
- return regex.exec(value).slice(1);
- }
- return [];
-}
-
-RomoDatepicker.prototype._currentYear = function() {
- return (new Date).getUTCFullYear();
-}
-
-RomoDatepicker.prototype._getTodaysDate = function() {
- var today = new Date();
- var dd = today.getDate();
- var mm = today.getMonth();
- var yyyy = today.getFullYear();
-
- return this._UTCDate(yyyy, mm, dd);
-}
-
-RomoDatepicker.prototype._UTCDate = function(year, month, day) {
- return new Date(Date.UTC.apply(Date, [year, month, day]));
}
Romo.onInitUI(function(e) {
Romo.initUIElems(e, '[data-romo-datepicker-auto="true"]').romoDatepicker();
});