Fixed 3050 Renamed speed to duration, added support for UI effects animations.

Added standard date formats as attributes of $.datepicker.
Added timestamp metacharacter for date formats.

diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html
index f3992ea2bc1f6409f5e6e425f3ae5db1bdaec298..3afc3202bb928193028c5569a636fffa7a7108c6 100644 (file)
--- a/demos/functional/templates/ui.datepicker.html
+++ b/demos/functional/templates/ui.datepicker.html
@@ -98,9 +98,19 @@
                                        {       desc: 'Medium format',  source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
                                        {       desc: 'Long format',    source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
                                        {       desc: 'Full format',    source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'ISO format',     source: '$("#formatted").datepicker({dateFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'French full format',     source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
                                        {       desc: 'With no century',        source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'French full format',     source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' }
+                                       {       desc: 'ATOM format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ATOM, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Cookie format',  source: '$("#formatted").datepicker({dateFormat: $.datepicker.COOKIE, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'ISO 8601 format',        source: '$("#formatted").datepicker({dateFormat: $.datepicker.ISO_8601, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RFC 822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RFC 850 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_850, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RFC 1026 format',        source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1036, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RFC 1123 format',        source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1123, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RFC 2822 format',        source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_2822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'RSS format (RFC 822)',   source: '$("#formatted").datepicker({dateFormat: $.datepicker.RSS, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Timestamp format (ms since 01/01/1970)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.TIMESTAMP, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'W3C format (ISO 8601)',  source: '$("#formatted").datepicker({dateFormat: $.datepicker.W3C, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
                                ]
                        },
 
@@ -167,7 +177,7 @@
                                destroy: '',
 
                                options: [
-                                       {       desc: 'Open in a dialog',       source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", speed: ""}) });' }
+                                       {       desc: 'Open in a dialog',       source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}) });' }
                                ]
                        },
 
@@ -264,17 +274,34 @@
 
                        {
                                title: 'Animations',
-                               desc: 'You can control how the datepicker appears - both its style and speed. The default is a medium speed animation expanding from the top-left (show).',
+                               desc: 'You can control how the datepicker appears - both its style and duration. The default is a medium duration animation expanding from the top-left (show).',
                                html: '<input type="text" size="10" value="" id="anim"/>',
                                destroy: '$("#anim").datepicker("destroy");',
 
                                options: [
-                                       {       desc: 'Show at slow speed',     source: '$("#anim").datepicker({speed: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'Show at medium speed (default)', source: '$("#anim").datepicker({speed: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'Show at fast speed',     source: '$("#anim").datepicker({speed: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'Show immediately',       source: '$("#anim").datepicker({speed: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'Fade in at medium speed',        source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
-                                       {       desc: 'Slide down at medium speed',     source: '$("#anim").datepicker({showAnim: "slideDown", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
+                                       {       desc: 'Show at slow duration',  source: '$("#anim").datepicker({duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Show at normal duration (default)',      source: '$("#anim").datepicker({duration: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Show at fast duration',  source: '$("#anim").datepicker({duration: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Show immediately',       source: '$("#anim").datepicker({duration: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Fade in at normal duration',     source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Slide down at slow duration',    source: '$("#anim").datepicker({showAnim: "slideDown", duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Blind horizontally',     source: '$("#anim").datepicker({showAnim: "blind", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Blind vertically',       source: '$("#anim").datepicker({showAnim: "blind", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Clip horizontally',      source: '$("#anim").datepicker({showAnim: "clip", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Clip vertically',        source: '$("#anim").datepicker({showAnim: "clip", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Drop up',        source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Drop down',      source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Drop left',      source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Drop right',     source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Explode (2 secs duration)',      source: '$("#anim").datepicker({showAnim: "explode", duration: 2000, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Fold',   source: '$("#anim").datepicker({showAnim: "fold", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Puff',   source: '$("#anim").datepicker({showAnim: "puff", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Scale to center',        source: '$("#anim").datepicker({showAnim: "scale", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Scale to top-left',      source: '$("#anim").datepicker({showAnim: "scale", showOptions: {origin: ["top", "left"]}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Slide up',       source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Slide down',     source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Slide left',     source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+                                       {       desc: 'Slide right',    source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
                                ]
                        },
 

diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js
index d021e383988227904d95882b133e00be339faeb2..2ddca2889816df03a0d43417ce65335011e8f6c4 100644 (file)
--- a/ui/ui.datepicker.js
+++ b/ui/ui.datepicker.js
@@ -68,6 +68,7 @@ function Datepicker() {
                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 text following the input box, e.g. showing the format
@@ -80,7 +81,7 @@ function Datepicker() {
                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
-               gotoCurrent: false, // True of today link goes back to current selection instead
+               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
                yearRange: '-10:+10', // Range of years to display in drop-down,
@@ -99,7 +100,7 @@ function Datepicker() {
                        // takes date and instance as parameters, returns display text
                minDate: null, // The earliest selectable date, or null for no limit
                maxDate: null, // The latest selectable date, or null for no limit
-               speed: 'normal', // Speed of display/closure
+               duration: 'normal', // Duration of display/closure
                beforeShowDay: null, // Function that takes a date and returns an array with
                        // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '', 
                        // [2] = cell title (optional), e.g. $.datepicker.noWeekends
@@ -387,7 +388,7 @@ $.extend(Datepicker.prototype, {
                                                        $('td.ui-datepicker-days-cell-over', inst.dpDiv)[0]);
                                                return false; // don't submit the form
                                                break; // select the value on enter
-                               case 27: $.datepicker._hideDatepicker(null, $.datepicker._get(inst, 'speed'));
+                               case 27: $.datepicker._hideDatepicker(null, $.datepicker._get(inst, 'duration'));
                                                break; // hide on escape
                                case 33: $.datepicker._adjustDate(e.target, (e.ctrlKey ? -1 :
                                                        -$.datepicker._get(inst, 'stepMonths')), (e.ctrlKey ? 'Y' : 'M'));
@@ -473,15 +474,18 @@ $.extend(Datepicker.prototype, {
                        left: offset.left + 'px', top: offset.top + 'px'});
                if (!inst.inline) {
                        var showAnim = $.datepicker._get(inst, 'showAnim') || 'show';
-                       var speed = $.datepicker._get(inst, 'speed');
+                       var duration = $.datepicker._get(inst, 'duration');
                        var postProcess = function() {
                                $.datepicker._datepickerShowing = true;
                                if ($.browser.msie && parseInt($.browser.version) < 7) // fix IE < 7 select problems
                                        $('iframe.ui-datepicker-cover').css({width: inst.dpDiv.width() + 4,
                                                height: inst.dpDiv.height() + 4});
                        };
-                       inst.dpDiv[showAnim](speed, postProcess);
-                       if (speed == '')
+                       if ($.effects && $.effects[showAnim])
+                               inst.dpDiv.show(showAnim, $.datepicker._get(inst, 'showOptions'), duration, postProcess);
+                       else
+                               inst.dpDiv[showAnim](duration, postProcess);
+                       if (duration == '')
                                postProcess();
                        if (inst.input[0].type != 'hidden')
                                inst.input[0].focus();
@@ -540,8 +544,8 @@ $.extend(Datepicker.prototype, {
 
        /* Hide the date picker from view.
           @param  input  element - the input field attached to the date picker
-          @param  speed  string - the speed at which to close the date picker */
-       _hideDatepicker: function(input, speed) {
+          @param  duration  string - the duration over which to close the date picker */
+       _hideDatepicker: function(input, duration) {
                var inst = this._curInst;
                if (!inst)
                        return;
@@ -551,13 +555,18 @@ $.extend(Datepicker.prototype, {
                                inst.currentDay, inst.currentMonth, inst.currentYear));
                this._stayOpen = false;
                if (this._datepickerShowing) {
-                       speed = (speed != null ? speed : this._get(inst, 'speed'));
+                       duration = (duration != null ? duration : this._get(inst, 'duration'));
                        var showAnim = this._get(inst, 'showAnim');
-                       inst.dpDiv[(showAnim == 'slideDown' ? 'slideUp' :
-                               (showAnim == 'fadeIn' ? 'fadeOut' : 'hide'))](speed, function() {
+                       var postProcess = function() {
                                $.datepicker._tidyDialog(inst);
-                       });
-                       if (speed == '')
+                       };
+                       if (duration != '' && $.effects && $.effects[showAnim])
+                               inst.dpDiv.hide(showAnim, $.datepicker._get(inst, 'showOptions'),
+                                       duration, postProcess);
+                       else
+                               inst.dpDiv[(duration == '' ? 'hide' : (showAnim == 'slideDown' ? 'slideUp' :
+                                       (showAnim == 'fadeIn' ? 'fadeOut' : 'hide')))](duration, postProcess);
+                       if (duration == '')
                                this._tidyDialog(inst);
                        var onClose = this._get(inst, 'onClose');
                        if (onClose)
@@ -722,7 +731,7 @@ $.extend(Datepicker.prototype, {
                if (inst.inline)
                        this._updateDatepicker(inst);
                else if (!this._stayOpen) {
-                       this._hideDatepicker(null, this._get(inst, 'speed'));
+                       this._hideDatepicker(null, this._get(inst, 'duration'));
                        this._lastInput = inst.input[0];
                        if (typeof(inst.input[0]) != 'object')
                                inst.input[0].focus(); // restore focus
@@ -784,28 +793,16 @@ $.extend(Datepicker.prototype, {
        },
 
        /* Parse a string value into a date object.
-          The format can be combinations of the following:
-          d  - day of month (no leading zero)
-          dd - day of month (two digit)
-          D  - day name short
-          DD - day name long
-          m  - month of year (no leading zero)
-          mm - month of year (two digit)
-          M  - month name short
-          MM - month name long
-          y  - year (two digit)
-          yy - year (four digit)
-          '...' - literal text
-          '' - single quote
+          See formatDate below for the possible formats.
 
-          @param  format           String - the expected format of the date
-          @param  value            String - the date in the above format
+          @param  format    string - the expected format of the date
+          @param  value     string - the date in the above format
           @param  settings  Object - attributes include:
-                            shortYearCutoff  Number - the cutoff year for determining the century (optional)
-                            dayNamesShort    String[7] - abbreviated names of the days from Sunday (optional)
-                            dayNames         String[7] - names of the days from Sunday (optional)
-                            monthNamesShort  String[12] - abbreviated names of the months (optional)
-                            monthNames       String[12] - names of the months (optional)
+                            shortYearCutoff  number - the cutoff year for determining the century (optional)
+                            dayNamesShort    string[7] - abbreviated names of the days from Sunday (optional)
+                            dayNames         string[7] - names of the days from Sunday (optional)
+                            monthNamesShort  string[12] - abbreviated names of the months (optional)
+                            monthNames       string[12] - names of the months (optional)
           @return  Date - the extracted date value or null if value is blank */
        parseDate: function (format, value, settings) {
                if (format == null || value == null)
@@ -832,14 +829,15 @@ $.extend(Datepicker.prototype, {
                // Extract a number from the string value
                var getNumber = function(match) {
                        lookAhead(match);
-                       var size = (match == 'y' ? 4 : 2);
+                       var origSize = (match == '@' ? 14 : (match == 'y' ? 4 : 2));
+                       var size = origSize;
                        var num = 0;
                        while (size > 0 && iValue < value.length &&
                                        value.charAt(iValue) >= '0' && value.charAt(iValue) <= '9') {
                                num = num * 10 + (value.charAt(iValue++) - 0);
                                size--;
                        }
-                       if (size == (match == 'y' ? 4 : 2))
+                       if (size == origSize)
                                throw 'Missing number at position ' + iValue;
                        return num;
                };
@@ -890,6 +888,12 @@ $.extend(Datepicker.prototype, {
                                        case 'y':
                                                year = getNumber('y');
                                                break;
+                                       case '@':
+                                               var date = new Date(getNumber('@'));
+                                               year = date.getFullYear();
+                                               month = date.getMonth() + 1;
+                                               day = date.getDate();
+                                               break;
                                        case "'":
                                                if (lookAhead("'"))
                                                        checkLiteral();
@@ -909,6 +913,19 @@ $.extend(Datepicker.prototype, {
                return date;
        },
 
+       /* Standard date formats. */
+       ATOM: 'yy-mm-dd', // RFC 3339 (ISO 8601)
+       COOKIE: 'D, dd M yy',
+       ISO_8601: 'yy-mm-dd',
+       RFC_822: 'D, d M y',
+       RFC_850: 'DD, dd-M-y',
+       RFC_1036: 'D, d M y',
+       RFC_1123: 'D, d M yy',
+       RFC_2822: 'D, d M yy',
+       RSS: 'D, d M y', // RFC 822
+       TIMESTAMP: '@',
+       W3C: 'yy-mm-dd', // ISO 8601
+
        /* Format a date object into a string value.
           The format can be combinations of the following:
           d  - day of month (no leading zero)
@@ -921,17 +938,18 @@ $.extend(Datepicker.prototype, {
           MM - month name long
           y  - year (two digit)
           yy - year (four digit)
+          @ - Unix timestamp (ms since 01/01/1970)
           '...' - literal text
           '' - single quote
 
-          @param  format    String - the desired format of the date
+          @param  format    string - the desired format of the date
           @param  date      Date - the date value to format
           @param  settings  Object - attributes include:
-                            dayNamesShort    String[7] - abbreviated names of the days from Sunday (optional)
-                            dayNames         String[7] - names of the days from Sunday (optional)
-                            monthNamesShort  String[12] - abbreviated names of the months (optional)
-                            monthNames       String[12] - names of the months (optional)
-          @return  String - the date in the above format */
+                            dayNamesShort    string[7] - abbreviated names of the days from Sunday (optional)
+                            dayNames         string[7] - names of the days from Sunday (optional)
+                            monthNamesShort  string[12] - abbreviated names of the months (optional)
+                            monthNames       string[12] - names of the months (optional)
+          @return  string - the date in the above format */
        formatDate: function (format, date, settings) {
                if (!date)
                        return '';
@@ -981,6 +999,9 @@ $.extend(Datepicker.prototype, {
                                                        output += (lookAhead('y') ? date.getFullYear() : 
                                                                (date.getYear() % 100 < 10 ? '0' : '') + date.getYear() % 100);
                                                        break;
+                                               case '@':
+                                                       output += date.getTime(); 
+                                                       break;
                                                case "'":
                                                        if (lookAhead("'"))
                                                                output += "'";
@@ -1006,7 +1027,7 @@ $.extend(Datepicker.prototype, {
                                        chars += format.charAt(iFormat);
                        else
                                switch (format.charAt(iFormat)) {
-                                       case 'd': case 'm': case 'y':
+                                       case 'd': case 'm': case 'y': case '@':
                                                chars += '0123456789'; 
                                                break;
                                        case 'D': case 'M':
@@ -1485,7 +1506,7 @@ function isArray(a) {
 };
 
 /* Invoke the datepicker functionality.
-   @param  options  String - a command, optionally followed by additional parameters or
+   @param  options  string - a command, optionally followed by additional parameters or
                     Object - settings for attaching new datepicker functionality
    @return  jQuery object */
 $.fn.datepicker = function(options){