r2920 - datepicker (refactor): more rafactoring and visual tests.
Author: pazu2k@gmail.com
Date: Tue Jul 14 05:16:38 2009
New Revision: 2920
Added:
branches/dev/datepicker/tests/visual/datepicker/datepicker_option_showButtonPanel.html
(contents, props changed)
Modified:
branches/dev/datepicker/tests/visual/datepicker/datepicker_method_option.html
branches/dev/datepicker/tests/visual/datepicker/default.html
branches/dev/datepicker/ui/ui.datepicker.js
Log:
datepicker (refactor): more rafactoring and visual tests.
Modified:
branches/dev/datepicker/tests/visual/datepicker/datepicker_method_option.html
==============================================================================
---
branches/dev/datepicker/tests/visual/datepicker/datepicker_method_option.html
(original)
+++
branches/dev/datepicker/tests/visual/datepicker/datepicker_method_option.html
Tue Jul 14 05:16:38 2009
@@ -9,8 +9,10 @@
<script type="text/javascript"
src="../../../ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
- $('#datepicker').datepicker();
- $('#datepicker').datepicker('optipn');
+ $('#datepicker')
+ .datepicker()
+ .datepicker('option', 'changeMonth', true)
+ .datepicker('option', 'changeYear', true);
});
</script>
</head>
Added:
branches/dev/datepicker/tests/visual/datepicker/datepicker_option_showButtonPanel.html
==============================================================================
--- (empty file)
+++
branches/dev/datepicker/tests/visual/datepicker/datepicker_option_showButtonPanel.html
Tue Jul 14 05:16:38 2009
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Datepicker Visual Test : Datepicker option showButtonPanel</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript"
src="../../../ui/ui.datepicker.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#datepicker').datepicker({
+ showButtonPanel: true
+ });
+ });
+ </script>
+</head>
+<body>
+
+<input id="datepicker">
+
+</body>
+</html>
Modified: branches/dev/datepicker/tests/visual/datepicker/default.html
==============================================================================
--- branches/dev/datepicker/tests/visual/datepicker/default.html (original)
+++ branches/dev/datepicker/tests/visual/datepicker/default.html Tue Jul 14
05:16:38 2009
@@ -10,6 +10,7 @@
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker();
+ $('#datepicker2').datepicker();
});
</script>
</head>
Modified: branches/dev/datepicker/ui/ui.datepicker.js
==============================================================================
--- branches/dev/datepicker/ui/ui.datepicker.js (original)
+++ branches/dev/datepicker/ui/ui.datepicker.js Tue Jul 14 05:16:38 2009
@@ -24,42 +24,22 @@
options = self.options;
self._defaults = options;
- self.debug = false; // Change this to true to start debugging
self._curInst = null; // The current instance in use
self._keyEvent = false; // If the last event was a key event
self._disabledInputs = []; // List of date picker inputs that have been
disabled
self._datepickerShowing = false; // True if the popup picker is
showing , false if not
self._inDialog = false; // True if showing within a "dialog", false if
not
- self.regional = []; // Available regional settings, indexed by language
code
- self.regional[''] = { // Default regional settings
- closeText: 'Done', // Display text for close link
- prevText: 'Prev', // Display text for previous month link
- nextText: 'Next', // Display text for next month link
- currentText: 'Today', // Display 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
- monthNamesShort:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
// For formatting
- dayNames:
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
// For formatting
- dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], //
For formatting
- dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column headings
for days starting at Sunday
- dateFormat: 'mm/dd/yy', // See format options on parseDate
- firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
- isRTL: false, // True if right-to-left language, false if left-to-right
- showMonthAfterYear: false, // True if the year select precedes month,
false for month then year
- yearSuffix: '' // Additional text to append to the year in the month
headers
- };
-
- // TODO: move this to the correct place
- $.extend(self._defaults, self.regional['']);
-
+
+ self.debug = false; // Change this to true to start debugging
+
// draw widget
var widget = self._draw();
$(document).mousedown(function(event){ self._checkExternalClick(event);
})
.find('body')
- .append(self.dpDiv);
-
- self._attachDatepicker(self.element[0],options);
+ .append(widget);
+
+ self._attachDatepicker();
},
_draw: function() {
var self = this;
@@ -75,20 +55,43 @@
self._dayOverClass = 'ui-datepicker-days-cell-over'; // The name of the
day hover marker class
self.dpDiv = $('<div id="' + self._mainDivId + '" class="ui-datepicker
ui-widget ui-widget-content ui-helper-clearfix ui-corner-all
ui-helper-hidden-accessible"></div>');
+
+ return self.dpDiv;
},
destroy: function() {
-
- this.element.removeClass('hasDatepicker');
-
+
+ var self = this,
+ $target = self.element,
+ nodeName = $target[0].nodeName.toLowerCase();
+
+ if (nodeName == 'input') {
+ //this.append.remove();
+ //this.trigger.remove();
+ $target.removeClass(markerClassName).
+ unbind('focus', this._showDatepicker).
+ unbind('keydown', this._doKeyDown).
+ unbind('keypress', this._doKeyPress).
+ unbind('keyup', this._doKeyUp);
+ } else if (nodeName == 'div' || nodeName == 'span')
+ $target.removeClass(markerClassName).empty();
+
+ if (self.dpDiv) {
+ self.dpDiv.remove();
+ }
+
$.widget.prototype.destroy.apply(this, arguments);
},
- /* Attach the date picker to a jQuery selection.
- @param target element - the target input field or division or span
- @param settings object - the new settings to use for this date
picker instance (anonymous) */
- _attachDatepicker: function(target, settings) {
+ /**
+ * Attach the date picker to a jQuery selection.
+ */
+ _attachDatepicker: function() {
// check for settings on the control itself - in namespace 'date:'
- var inlineSettings = null;
+ var inlineSettings = null,
+ self = this,
+ settings = self.options,
+ target = self.element[0];
+
for (var attrName in this._defaults) {
var attrValue = target.getAttribute('date:' + attrName);
if (attrValue) {
@@ -100,10 +103,14 @@
}
}
}
+
var nodeName = target.nodeName.toLowerCase();
var inline = (nodeName == 'div' || nodeName == 'span');
- if (!target.id)
+
+ if (!target.id) {
target.id = 'dp' + (++this.uuid);
+ }
+
var inst = this._newInst($(target), inline);
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (nodeName == 'input') {
@@ -123,6 +130,21 @@
dpDiv: (!inline ? this.dpDiv : // presentation div
$('<div class="' + this._inlineClass + ' ui-datepicker ui-widget
ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))};
},
+
+ // TODO: this is a replacement for _newInst
+ ui: function() {
+ var self = this;
+ return {
+ id: self.element[0].id,
+ input: self.element,
+ selectedDay: 0,
+ selectedMonth: 0,
+ selectedYear: 0,
+ inline: (self.element.nodeName.toLowerCase() == 'div' ||
self.element.nodeName.toLowerCase() == 'span'),
+ dpDiv: (!this.inline ? self.dpDiv : $('<div class="' +
self._inlineClass + ' ui-datepicker ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all"></div>')),
+ settings: self.options
+ };
+ },
/* Attach the date picker to an input field. */
_connectDatepicker: function(target, inst) {
@@ -171,27 +193,30 @@
})
.keyup(function(event) {
self._doKeyUp(event);
- }).
- bind("setData.datepicker", function(event, key, value) {
- inst.settings[key] = value;
- }).bind("getData.datepicker", function(event, key) {
- return self._get(inst, key);
- });
- $.data(target, PROP_NAME, inst);
+ })
+// .bind("setData.datepicker", function(event, key, value) {
+// inst.settings[key] = value;
+// }).bind("getData.datepicker", function(event, key) {
+// return self._get(inst, key);
+// })
+ ;
+ //$.data(target, PROP_NAME, inst);
},
/* Attach an inline date picker to a div. */
_inlineDatepicker: function(target, inst) {
var divSpan = $(target);
- if (divSpan.hasClass(markerClassName))
+ if (divSpan.hasClass(markerClassName)) {
return;
- divSpan.addClass(markerClassName).append(inst.dpDiv).
- bind("setData.datepicker", function(event, key, value){
- inst.settings[key] = value;
- }).bind("getData.datepicker", function(event, key){
- return this._get(inst, key);
- });
- $.data(target, PROP_NAME, inst);
+ }
+ divSpan.addClass(markerClassName).append(inst.dpDiv)
+// .bind("setData.datepicker", function(event, key, value){
+// inst.settings[key] = value;
+// }).bind("getData.datepicker", function(event, key){
+// return this._get(inst, key);
+// })
+ ;
+ //$.data(target, PROP_NAME, inst);
this._setDate(inst, this._getDefaultDate(inst));
this._updateDatepicker(inst);
this._updateAlternate(inst);
@@ -243,28 +268,6 @@
return this;
},
- /* Detach a datepicker from its control.
- @param target element - the target input field or division or span
*/
- _destroyDatepicker: function(target) {
- var $target = $(target);
- var inst = $.data(target, PROP_NAME);
- if (!$target.hasClass(markerClassName)) {
- return;
- }
- var nodeName = target.nodeName.toLowerCase();
- $.removeData(target, PROP_NAME);
- if (nodeName == 'input') {
- inst.append.remove();
- inst.trigger.remove();
- $target.removeClass(markerClassName).
- unbind('focus', this._showDatepicker).
- unbind('keydown', this._doKeyDown).
- unbind('keypress', this._doKeyPress).
- unbind('keyup', this._doKeyUp);
- } else if (nodeName == 'div' || nodeName == 'span')
- $target.removeClass(markerClassName).empty();
- },
-
/* Enable the date picker to a jQuery selection.
@param target element - the target input field or division or span
*/
_enableDatepicker: function(target) {
@@ -330,14 +333,14 @@
@param target element - the target input field or division or span
@return object - the associated instance data
@throws error if a jQuery problem getting data */
- _getInst: function(target) {
- try {
- return $.data(target, PROP_NAME);
- }
- catch (err) {
- throw 'Missing instance data for this datepicker';
- }
- },
+ // _getInst: function(target) {
+ // try {
+ // return $.data(target, PROP_NAME);
+ // }
+ // catch (err) {
+ // throw 'Missing instance data for this datepicker';
+ // }
+ // },
/* Update or retrieve the settings for a date picker attached to an input
field or division.
@param target element - the target input field or division or span
@@ -348,7 +351,7 @@
@param value any - the new value for the setting
(omit if above is an object or to retrieve a value) */
_optionDatepicker: function(target, name, value) {
- var self = this, inst = self._getInst(target);
+ var self = this, inst = self;
if (arguments.length == 2 && typeof name == 'string') {
return (name == 'defaults' ? $.extend({}, self._defaults) :
(inst ? (name == 'all' ? $.extend({}, inst.settings) :
@@ -378,7 +381,7 @@
/* Redraw the date picker attached to an input field or division.
@param target element - the target input field or division or span */
_refreshDatepicker: function(target) {
- var inst = this._getInst(target);
+ var inst = this;
if (inst) {
this._updateDatepicker(inst);
}
@@ -388,7 +391,7 @@
@param target element - the target input field or division or span
@param date Date - the new date */
_setDateDatepicker: function(target, date) {
- var inst = this._getInst(target);
+ var inst = this;
if (inst) {
this._setDate(inst, date);
this._updateDatepicker(inst);
@@ -517,7 +520,7 @@
input = $('input', input.parentNode)[0];
if (self._isDisabledDatepicker(input) || self._lastInput == input) //
already here
return;
- var inst = self._getInst(input);
+ var inst = self;
var beforeShow = self._get(inst, 'beforeShow');
extendRemove(inst.settings, (beforeShow ? beforeShow.apply(input,
[input, inst]) : {}));
self._hideDatepicker(null, '');
@@ -565,8 +568,8 @@
inst.dpDiv[showAnim](duration, postProcess);
if (duration == '')
postProcess();
- if (inst.input[0].type != 'hidden')
- inst.input[0].focus();
+ if (self.element[0].type != 'hidden')
+ self.element[0].focus();
self._curInst = inst;
}
},
@@ -575,7 +578,7 @@
_updateDatepicker: function(inst) {
var self = this,
borders = self._getBorders(inst.dpDiv);
-
+
inst.dpDiv
.empty().append(this._generateHTML(inst))
.find('iframe.ui-datepicker-cover') // IE6- only
@@ -589,7 +592,8 @@
if(this.className.indexOf('ui-datepicker-next') != -1)
$(this).removeClass('ui-datepicker-next-hover');
})
.bind('mouseover', function(){
- if (!self._isDisabledDatepicker( inst.inline ?
inst.dpDiv.parent()[0] : inst.input[0])) {
+
+ if (!self._isDisabledDatepicker( inst.inline ?
inst.dpDiv.parent()[0] : self.element[0])) {
$(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
$(this).addClass('ui-state-hover');
if(this.className.indexOf('ui-datepicker-prev') != -1)
$(this).addClass('ui-datepicker-prev-hover');
@@ -599,7 +603,7 @@
.end()
.find('.ui-datepicker-prev, .ui-datepicker-next')
.bind('click', function() {
- self._adjustDate('#'+inst.id,
($(this).hasClass('ui-datepicker-prev') ? -1 : 1) *
self.options.stepMonths, 'M');
+ self._adjustDate('#'+self.element[0].id,
($(this).hasClass('ui-datepicker-prev') ? -1 : 1) *
self.options.stepMonths, 'M');
})
.end()
.find('.ui-datepicker-close')
@@ -670,7 +674,7 @@
return [parseFloat(convert(elem.css('border-left-width'))),
parseFloat(convert(elem.css('border-top-width')))];
},
-
+
/* Check positioning to remain on screen. */
_checkOffset: function(inst, offset, isFixed) {
var dpWidth = inst.dpDiv.outerWidth();
@@ -759,15 +763,14 @@
/* Adjust one of the date sub-fields. */
_adjustDate: function(id, offset, period) {
- var target = $(id);
- var inst = this._getInst(target[0]);
- if (this._isDisabledDatepicker(target[0])) {
+ var self = this;
+ if (this._isDisabledDatepicker(self.element[0])) {
return;
}
- this._adjustInstDate(inst, offset +
- (period == 'M' ? this._get(inst, 'showCurrentAtPos') : 0), // undo
positioning
+ this._adjustInstDate(self, offset +
+ (period == 'M' ? self.options.showCurrentAtPos : 0), // undo positioning
period);
- this._updateDatepicker(inst);
+ this._updateDatepicker(self);
},
/* Action for current link. */
@@ -897,8 +900,7 @@
/* Get a setting value, defaulting if necessary. */
_get: function(inst, name) {
- return inst.settings[name] !== undefined ?
- inst.settings[name] : this.options[name];
+ return inst.settings !== undefined && inst.settings[name] !==
undefined ? inst.settings[name] : this.options[name];
},
/* Parse existing date and initialise date picker. */
@@ -1325,9 +1327,8 @@
this._daylightSavingAdjust(new Date(inst.currentYear,
inst.currentMonth, inst.currentDay)));
return this.formatDate(this._get(inst, 'dateFormat'), date,
this._getFormatConfig(inst));
},
-
+
_setData: function(key, value) {
-
$.widget.prototype._setData.apply(this, arguments);
},
@@ -1595,55 +1596,176 @@
}
return output;
},
+
+ enable: function() {
+ this.disabled = false;
+ return this;
+ },
+
+ disable: function() {
+ this.disabled = true;
+ return this;
+ }
});
$.extend($.ui.datepicker, {
version: "@VERSION",
defaults: {
- showOn: 'focus', // 'focus' for popup on focus,
- // 'button' for trigger button, or 'both' for either
- showAnim: 'show', // Name of jQuery animation for popup
- showOptions: {}, // Options for enhanced animations
- defaultDate: null, // Used when field is blank: actual date,
- // +/-number for offset from today, null for today
- appendText: '', // Display t
Topic Participants
Jörn Zaefferer