Skip to main content

Search and Top Navigation

Ticket #3647: jquery-ui-trunk-datepicker.patch
File jquery-ui-trunk-datepicker.patch, 28.5 KB (added by caphun, December 18, 2008 11:07AM UTC)
Index: ui.datepicker.js
===================================================================
--- ui.datepicker.js	(revision 1171)
+++ ui.datepicker.js	(working copy)
@@ -38,26 +38,25 @@
 	this._disableClass = 'ui-datepicker-disabled'; // The name of the disabled covering marker class
 	this._unselectableClass = 'ui-datepicker-unselectable'; // The name of the unselectable cell marker class
 	this._currentClass = 'ui-datepicker-current-day'; // The name of the current day marker class
-	this._dayOverClass = 'ui-datepicker-days-cell-over'; // The name of the day hover marker class
+	this._dayOverClass = 'ui-state-hover'; // The name of the day hover marker class
 	this._weekOverClass = 'ui-datepicker-week-over'; // The name of the week hover marker class
 	this.regional = []; // Available regional settings, indexed by language code
 	this.regional[''] = { // Default regional settings
 		clearText: 'Clear', // Display text for clear link
 		clearStatus: 'Erase the current date', // Status text for clear link
-		closeText: 'Close', // Display text for close link
+		closeText: 'Done', // Display text for close link
 		closeStatus: 'Close without change', // Status text for close link
-		prevText: '<Prev', // Display text for previous month link
+		prevText: 'Prev', // Display text for previous month link
 		prevStatus: 'Show the previous month', // Status text for previous month link
 		prevBigText: '<<', // Display text for previous year link
 		prevBigStatus: 'Show the previous year', // Status text for previous year link
-		nextText: 'Next>', // Display text for next month link
+		nextText: 'Next', // Display text for next month link
 		nextStatus: 'Show the next month', // Status text for next month link
 		nextBigText: '>>', // Display text for next year link
 		nextBigStatus: 'Show the next year', // Status text for next year link
 		currentText: 'Today', // Display text for current month link
 		currentStatus: 'Show the current month', // Status text for current month link
-		monthNames: ['January','February','March','April','May','June',
-			'July','August','September','October','November','December'], // Names of months for drop-down and formatting
+		monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], // Names of months for drop-down and formatting
 		monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
 		monthStatus: 'Show a different month', // Status text for selecting a month
 		yearStatus: 'Show a different year', // Status text for selecting a year
@@ -84,23 +83,18 @@
 		buttonText: '...', // Text for trigger button
 		buttonImage: '', // URL for trigger button image
 		buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
-		closeAtTop: true, // True to have the clear/close at the top,
-			// false to have them at the bottom
-		mandatory: false, // True to hide the Clear link, false to include it
 		hideIfNoPrevNext: false, // True to hide next/previous month links
 			// if not applicable, false to just disable them
 		navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
-		showBigPrevNext: false, // True to show big prev/next links
 		gotoCurrent: false, // True if today link goes back to current selection instead
-		changeMonth: true, // True if month can be selected directly, false if only prev/next
-		changeYear: true, // True if year can be selected directly, false if only prev/next
+		changeMonth: false, // True if month can be selected directly, false if only prev/next
+		changeYear: false, // True if year can be selected directly, false if only prev/next
 		showMonthAfterYear: false, // True if the year select precedes month, false for month then year
 		yearRange: '-10:+10', // Range of years to display in drop-down,
 			// either relative to current year (-nn:+nn) or absolute (nnnn:nnnn)
 		changeFirstDay: true, // True to click on day name to change, false to remain as set
 		highlightWeek: false, // True to highlight the selected week
 		showOtherMonths: false, // True to show dates in other months, false to leave blank
-		showWeeks: false, // True to show week of the year, false to omit
 		calculateWeek: this.iso8601Week, // How to calculate the week of the year,
 			// takes a Date and returns the number of the week for it
 		shortYearCutoff: '+10', // Short year values < this are in the current century,
@@ -123,15 +117,15 @@
 		numberOfMonths: 1, // Number of months to show at a time
 		showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
 		stepMonths: 1, // Number of months to step back/forward
-		stepBigMonths: 12, // Number of months to step back/forward for the big links
 		rangeSelect: false, // Allows for selecting a date range on one date picker
 		rangeSeparator: ' - ', // Text between two dates in a range
 		altField: '', // Selector for an alternate field to store selected dates into
 		altFormat: '', // The date format to use for the alternate field
-		constrainInput: true // The input is constrained by the current date format
+		constrainInput: true, // The input is constrained by the current date format
+		showButtonPanel: false // True to show button panel, false to not show it
 	};
 	$.extend(this._defaults, this.regional['']);
-	this.dpDiv = $('');
+	this.dpDiv = $('
'); } $.extend(Datepicker.prototype, { @@ -190,7 +184,7 @@ drawMonth: 0, drawYear: 0, // month being drawn inline: inline, // is datepicker inline or not dpDiv: (!inline ? this.dpDiv : // presentation div - $('
'))}; + $('
'))}; }, /* Attach the date picker to an input field. */ @@ -485,26 +479,17 @@ break; // select the value on enter case 27: $.datepicker._hideDatepicker(null, $.datepicker._get(inst, 'duration')); break; // hide on escape - case 33: $.datepicker._adjustDate(event.target, (event.ctrlKey ? - -$.datepicker._get(inst, 'stepBigMonths') : - -$.datepicker._get(inst, 'stepMonths')), 'M'); + case 33: $.datepicker._adjustDate(event.target, -$.datepicker._get(inst, 'stepMonths'), 'M'); break; // previous month/year on page up/+ ctrl - case 34: $.datepicker._adjustDate(event.target, (event.ctrlKey ? - +$.datepicker._get(inst, 'stepBigMonths') : - +$.datepicker._get(inst, 'stepMonths')), 'M'); + case 34: $.datepicker._adjustDate(event.target, +$.datepicker._get(inst, 'stepMonths'), 'M'); break; // next month/year on page down/+ ctrl - case 35: if (event.ctrlKey || event.metaKey) $.datepicker._clearDate(event.target); - handled = event.ctrlKey || event.metaKey; - break; // clear on ctrl or command +end case 36: if (event.ctrlKey || event.metaKey) $.datepicker._gotoToday(event.target); handled = event.ctrlKey || event.metaKey; break; // current on ctrl or command +home case 37: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -1, 'D'); handled = event.ctrlKey || event.metaKey; // -1 day on ctrl or command +left - if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ? - -$.datepicker._get(inst, 'stepBigMonths') : - -$.datepicker._get(inst, 'stepMonths')), 'M'); + if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, -$.datepicker._get(inst, 'stepMonths'), 'M'); // next month/year on alt +left on Mac break; case 38: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, -7, 'D'); @@ -513,9 +498,7 @@ case 39: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +1, 'D'); handled = event.ctrlKey || event.metaKey; // +1 day on ctrl or command +right - if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, (event.ctrlKey ? - +$.datepicker._get(inst, 'stepBigMonths') : - +$.datepicker._get(inst, 'stepMonths')), 'M'); + if (event.originalEvent.altKey) $.datepicker._adjustDate(event.target, +$.datepicker._get(inst, 'stepMonths'), 'M'); // next month/year on alt +right break; case 40: if (event.ctrlKey || event.metaKey) $.datepicker._adjustDate(event.target, +7, 'D'); @@ -580,9 +563,6 @@ // determine sizing offscreen inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'}); $.datepicker._updateDatepicker(inst); - // fix width for dynamic number of date pickers - inst.dpDiv.width($.datepicker._getNumberOfMonths(inst)[1] * - $('.ui-datepicker', inst.dpDiv[0])[0].offsetWidth); // and adjust position before showing offset = $.datepicker._checkOffset(inst, offset, isFixed); inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ? @@ -615,7 +595,16 @@ height: inst.dpDiv.height() + 4}; inst.dpDiv.empty().append(this._generateHTML(inst)). find('iframe.ui-datepicker-cover'). - css({width: dims.width, height: dims.height}); + css({width: dims.width, height: dims.height}) + .end() + .find('button, .ui-datepicker-prev, .ui-datepicker-next') + .bind('mouseover', function(){ + $(this).addClass('ui-state-hover'); + }) + .bind('mouseout', function(){ + $(this).removeClass('ui-state-hover'); + }) + .end(); var numMonths = this._getNumberOfMonths(inst); inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') + 'Class']('ui-datepicker-multi'); @@ -707,7 +696,7 @@ /* Tidy up after a dialog display. */ _tidyDialog: function(inst) { - inst.dpDiv.removeClass(this._dialogClass).unbind('.ui-datepicker'); + inst.dpDiv.removeClass(this._dialogClass).unbind('.ui-datepicker-calendar'); $('.' + this._promptClass, inst.dpDiv).remove(); }, @@ -821,17 +810,6 @@ } }, - /* Erase the input field and hide the date picker. */ - _clearDate: function(id) { - var target = $(id); - var inst = this._getInst(target[0]); - if (this._get(inst, 'mandatory')) - return; - inst.stayOpen = false; - inst.endDay = inst.endMonth = inst.endYear = inst.rangeStart = null; - this._selectDate(target, ''); - }, - /* Update the input field with the selected date. */ _selectDate: function(id, dateStr) { var target = $(id); @@ -1335,8 +1313,9 @@ return [inst.rangeStart || startDate, (!inst.endYear ? inst.rangeStart || startDate : this._daylightSavingAdjust(new Date(inst.endYear, inst.endMonth, inst.endDay)))]; - } else - return startDate; + } else { + return startDate; + } }, /* Generate the HTML for the current state of the date picker. */ @@ -1347,24 +1326,13 @@ var showStatus = this._get(inst, 'showStatus'); var initStatus = this._get(inst, 'initStatus') || ' '; var isRTL = this._get(inst, 'isRTL'); - // build the date picker HTML - var clear = (this._get(inst, 'mandatory') ? '' : - ''); - var controls = '
' + (isRTL ? '' : clear) + - '' + (isRTL ? clear : '') + '
'; + var showButtonPanel = this._get(inst, 'showButtonPanel'); var prompt = this._get(inst, 'prompt'); - var closeAtTop = this._get(inst, 'closeAtTop'); var hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext'); var navigationAsDateFormat = this._get(inst, 'navigationAsDateFormat'); - var showBigPrevNext = this._get(inst, 'showBigPrevNext'); var numMonths = this._getNumberOfMonths(inst); var showCurrentAtPos = this._get(inst, 'showCurrentAtPos'); var stepMonths = this._get(inst, 'stepMonths'); - var stepBigMonths = this._get(inst, 'stepBigMonths'); var isMultiMonth = (numMonths[0] != 1 || numMonths[1] != 1); var currentDate = this._daylightSavingAdjust((!inst.currentDay ? new Date(9999, 9, 9) : new Date(inst.currentYear, inst.currentMonth, inst.currentDay))); @@ -1393,43 +1361,33 @@ prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText, this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)), this._getFormatConfig(inst))); - var prevBigText = (showBigPrevNext ? this._get(inst, 'prevBigText') : ''); - prevBigText = (!navigationAsDateFormat ? prevBigText : this.formatDate(prevBigText, - this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepBigMonths, 1)), - this._getFormatConfig(inst))); - var prev = '
' + (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? - (showBigPrevNext ? '' + prevBigText + '' : '') + - '' + prevText + '' : - (hideIfNoPrevNext ? '' : (showBigPrevNext ? '' : '') + - '')) + '
'; + var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? + '' + prevText + '' : + (hideIfNoPrevNext ? '' : '')); var nextText = this._get(inst, 'nextText'); nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText, this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)), this._getFormatConfig(inst))); - var nextBigText = (showBigPrevNext ? this._get(inst, 'nextBigText') : ''); - nextBigText = (!navigationAsDateFormat ? nextBigText : this.formatDate(nextBigText, - this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepBigMonths, 1)), - this._getFormatConfig(inst))); - var next = '
' + (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? - '' + nextText + '' + - (showBigPrevNext ? '' + nextBigText + '' : '') : - (hideIfNoPrevNext ? '' : '' + - (showBigPrevNext ? '' : ''))) + '
'; + var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? + '' + nextText + '' : + (hideIfNoPrevNext ? '' : '')); var currentText = this._get(inst, 'currentText'); var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today); currentText = (!navigationAsDateFormat ? currentText : this.formatDate(currentText, gotoDate, this._getFormatConfig(inst))); - var html = (closeAtTop && !inst.inline ? controls : '') + - '' + - (prompt ? '
' + prompt + '
' : ''); + currentText + '' : '') + (isRTL ? '' : controls) + '
' : ''; + var firstDay = parseInt(this._get(inst, 'firstDay')); firstDay = (isNaN(firstDay) ? 0 : firstDay); var changeFirstDay = this._get(inst, 'changeFirstDay'); @@ -1440,7 +1398,6 @@ var beforeShowDay = this._get(inst, 'beforeShowDay'); var highlightWeek = this._get(inst, 'highlightWeek'); var showOtherMonths = this._get(inst, 'showOtherMonths'); - var showWeeks = this._get(inst, 'showWeeks'); var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week; var weekStatus = this._get(inst, 'weekStatus'); var status = (showStatus ? this._get(inst, 'dayStatus') || initStatus : ''); @@ -1448,25 +1405,38 @@ var endDate = inst.endDay ? this._daylightSavingAdjust( new Date(inst.endYear, inst.endMonth, inst.endDay)) : currentDate; var defaultDate = this._getDefaultDate(inst); - for (var row = 0; row < numMonths[0]; row++) + + var html = ''; + for (var row = 0; row < numMonths[0]; row++) { for (var col = 0; col < numMonths[1]; col++) { var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay)); - html += '
' + + var cornerClass = ' ui-corner-all'; + if (isMultiMonth) { + html += '
'; + } + html += '
' + + (/all|left/.test(cornerClass) ? (isRTL ? next : prev) : '') + + (/all|right/.test(cornerClass) ? (isRTL ? prev : next) : '') + + (prompt ? '
' + prompt + '
' : '') + this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate, selectedDate, row > 0 || col > 0, showStatus, initStatus, monthNames) + // draw month headers - '' + - '' + - (showWeeks ? '' + - this._get(inst, 'weekHeader') + '' : ''); + '
' + + ''; for (var dow = 0; dow < 7; dow++) { // days of the week var day = (dow + firstDay) % 7; var dayStatus = (status.indexOf('DD') > -1 ? status.replace(/DD/, dayNames[day]) : status.replace(/D/, dayNamesShort[day])); - html += '= 5 ? ' class="ui-datepicker-week-end-cell"' : '') + '>' + + html += '= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' + (!changeFirstDay ? '' + - dayNamesMin[day] + (changeFirstDay ? '' : '') + ''; + dayNamesMin[day] + (changeFirstDay ? '' : '') + ''; } html += ''; var daysInMonth = this._getDaysInMonth(drawYear, drawMonth); @@ -1476,43 +1446,45 @@ var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays)); for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows - html += '' + - (showWeeks ? '' : ''); + html += ''; for (var dow = 0; dow < 7; dow++) { // create date picker days var daySettings = (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']); var otherMonth = (printDate.getMonth() != drawMonth); var unselectable = otherMonth || !daySettings[0] || (minDate && printDate < minDate) || (maxDate && printDate > maxDate); - html += ''; // display for this month + (unselectable ? printDate.getDate() : printDate.getDate() + '')) + (unselectable ? '' : '') + ''; // display for this month printDate.setDate(printDate.getDate() + 1); printDate = this._daylightSavingAdjust(printDate); } @@ -1523,14 +1495,14 @@ drawMonth = 0; drawYear++; } - html += '
' + - calculateWeek(printDate) + '
= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key (defaultDate.getTime() == printDate.getTime() && defaultDate.getTime() == selectedDate.getTime()) ? // or defaultDate is current printedDate and defaultDate is selectedDate ' ' + $.datepicker._dayOverClass : '') + // highlight selected day - (unselectable ? ' ' + this._unselectableClass : '') + // highlight unselectable days + (unselectable ? ' ui-state-disabled ' + this._unselectableClass : '') + // highlight unselectable days (otherMonth && !showOtherMonths ? '' : ' ' + daySettings[1] + // highlight custom dates (printDate.getTime() >= currentDate.getTime() && printDate.getTime() <= endDate.getTime() ? // in current range ' ' + this._currentClass : '') + // highlight selected day (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different) ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title - (unselectable ? (highlightWeek ? ' onmouseover="jQuery(this).parent().addClass(\'' + this._weekOverClass + '\');"' + // highlight selection week - ' onmouseout="jQuery(this).parent().removeClass(\'' + this._weekOverClass + '\');"' : '') : // unhighlight selection week + (unselectable ? '' : '' + // actions + inst.id + '\',' + drawMonth + ',' + drawYear + ', jQuery(this).parent()[0]);"') + '>' + // actions (otherMonth ? (showOtherMonths ? printDate.getDate() : ' ') : // display for other months - (unselectable ? printDate.getDate() : '' + printDate.getDate() + '')) + '
'; + html += '' + (isMultiMonth ? '
' : ''); } - html += (showStatus ? '
' + initStatus + '
' : '') + - (!closeAtTop && !inst.inline ? controls : '') + - '
' + + } + // HTML for button panel + html += (!inst.inline ? buttonPanel : '') + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? '' : ''); + inst._keyEvent = false; return html; }, @@ -1542,15 +1514,15 @@ var changeMonth = this._get(inst, 'changeMonth'); var changeYear = this._get(inst, 'changeYear'); var showMonthAfterYear = this._get(inst, 'showMonthAfterYear'); - var html = '
'; + var html = '
'; var monthHtml = ''; // month selection if (secondary || !changeMonth) - monthHtml += monthNames[drawMonth]; + monthHtml += '' + monthNames[drawMonth] + ' '; else { var inMinYear = (minDate && minDate.getFullYear() == drawYear); var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear); - monthHtml += '

Download in other formats:

Original Format