DateTimeInputWidget: Only show calendar when focusing date components, not time compo...

Change-Id: Ie541351132d7035cdf0f66891539b59e0ce8c1db

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeFormatter.js b/resources/src/mediawiki.widgets.datetime/DateTimeFormatter.js
index 1c54234..2313490 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeFormatter.js
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeFormatter.js
@@ -245,6 +245,8 @@
         *  - 'boolean': The field is a boolean.
         *  - 'toggleLocal': The field represents {@link #getLocal this.getLocal()}.
         *    Editing should directly call {@link #toggleLocal this.toggleLocal()}.
+        * @return {boolean} return.calendarComponent Whether this field is part of a calendar, e.g.
+        *  part of the date instead of the time.
         * @return {number} return.size Maximum number of characters in the field (when
         *  the 'intercalary' component is falsey). If 0, the field should be hidden entirely.
         * @return {Object.<string,number>} return.intercalarySize Map from
@@ -266,6 +268,7 @@
                                }
                                spec = {
                                        component: null,
+                                       calendarComponent: false,
                                        editable: false,
                                        type: 'static',
                                        value: params.slice( 1 ).join( '|' ),
@@ -287,6 +290,7 @@
                                                c = params[ 0 ] === '#' ? '' : ':';
                                                return {
                                                        component: 'zone',
+                                                       calendarComponent: false,
                                                        editable: true,
                                                        type: 'toggleLocal',
                                                        size: 5 + c.length,
@@ -322,6 +326,7 @@
                                        case 'full':
                                                spec = {
                                                        component: 'zone',
+                                                       calendarComponent: false,
                                                        editable: true,
                                                        type: 'toggleLocal',
                                                        values: params[ 0 ] === 'short' ? this.shortZones : this.fullZones,

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
index 01d3442..de24942 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js
@@ -385,6 +385,10 @@
                                $field = $( '<span>' )
                                        .width( sz )
                                        .data( 'mw-widgets-datetime-dateTimeInputWidget-placeholder', placeholder );
+                               if ( spec.type !== 'static' ) {
+                                       $field.prop( 'tabIndex', -1 );
+                                       $field.on( 'focus', this.onFieldFocus.bind( this, $field ) );
+                               }
                                if ( spec.type === 'static' ) {
                                        $field.text( spec.value );
                                } else {
@@ -622,6 +626,8 @@
         * @param {jQuery.Event} e Focus event
         */
        mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldFocus = function ( $field ) {
+               var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
+
                if ( !this.isDisabled() ) {
                        if ( this.getValueAsDate() === null ) {
                                this.setValue( this.formatter.getDefaultDate() );
@@ -631,7 +637,7 @@
                        }
 
                        if ( this.calendar ) {
-                               this.calendar.toggle( true );
+                               this.calendar.toggle( !!spec.calendarComponent );
                        }
                }
        };

diff --git a/resources/src/mediawiki.widgets.datetime/DiscordianDateTimeFormatter.js b/resources/src/mediawiki.widgets.datetime/DiscordianDateTimeFormatter.js
index fbf3238..c980cc2 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DiscordianDateTimeFormatter.js
+++ b/resources/src/mediawiki.widgets.datetime/DiscordianDateTimeFormatter.js
@@ -67,6 +67,7 @@
                        case 'year|#':
                                spec = {
                                        component: 'Year',
+                                       calendarComponent: true,
                                        type: 'number',
                                        size: 4,
                                        zeropad: false
@@ -76,6 +77,7 @@
                        case 'season|#':
                                spec = {
                                        component: 'Season',
+                                       calendarComponent: true,
                                        type: 'number',
                                        size: 1,
                                        intercalarySize: { 1: 0 },
@@ -86,6 +88,7 @@
                        case 'season|full':
                                spec = {
                                        component: 'Season',
+                                       calendarComponent: true,
                                        type: 'string',
                                        intercalarySize: { 1: 0 },
                                        values: {
@@ -101,6 +104,7 @@
                        case 'dow|full':
                                spec = {
                                        component: 'DOW',
+                                       calendarComponent: true,
                                        editable: false,
                                        type: 'string',
                                        intercalarySize: { 1: 0 },
@@ -119,6 +123,7 @@
                        case 'day|0':
                                spec = {
                                        component: 'Day',
+                                       calendarComponent: true,
                                        type: 'string',
                                        size: 2,
                                        intercalarySize: { 1: 13 },
@@ -146,6 +151,7 @@
                        case 'second|0':
                                spec = {
                                        component: tag.charAt( 0 ).toUpperCase() + tag.slice( 1 ),
+                                       calendarComponent: false,
                                        type: 'number',
                                        size: 2,
                                        zeropad: params[ 0 ] === '0'
@@ -156,6 +162,7 @@
                        case 'millisecond|0':
                                spec = {
                                        component: 'Millisecond',
+                                       calendarComponent: false,
                                        type: 'number',
                                        size: 3,
                                        zeropad: params[ 0 ] === '0'

diff --git a/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js b/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js
index f60b34b..2cea4f7 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js
+++ b/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js
@@ -2,7 +2,7 @@
 
        /**
         * Provides various methods needed for formatting dates and times. This
-        * implementation implments the proleptic Gregorian calendar over years
+        * implementation implements the proleptic Gregorian calendar over years
         * 0000–9999.
         *
         * @class
@@ -284,6 +284,7 @@
                        case 'year|0':
                                spec = {
                                        component: 'year',
+                                       calendarComponent: true,
                                        type: 'number',
                                        size: 4,
                                        zeropad: params[ 0 ] === '0'
@@ -294,6 +295,7 @@
                        case 'month|full':
                                spec = {
                                        component: 'month',
+                                       calendarComponent: true,
                                        type: 'string',
                                        values: params[ 0 ] === 'short' ? this.shortMonthNames : this.fullMonthNames
                                };
@@ -303,6 +305,7 @@
                        case 'dow|full':
                                spec = {
                                        component: 'dow',
+                                       calendarComponent: true,
                                        editable: false,
                                        type: 'string',
                                        values: params[ 0 ] === 'short' ? this.shortDayNames : this.fullDayNames
@@ -313,6 +316,15 @@
                        case 'month|0':
                        case 'day|#':
                        case 'day|0':
+                               spec = {
+                                       component: tag,
+                                       calendarComponent: true,
+                                       type: 'number',
+                                       size: 2,
+                                       zeropad: params[ 0 ] === '0'
+                               };
+                               break;
+
                        case 'hour|#':
                        case 'hour|0':
                        case 'minute|#':
@@ -321,6 +333,7 @@
                        case 'second|0':
                                spec = {
                                        component: tag,
+                                       calendarComponent: false,
                                        type: 'number',
                                        size: 2,
                                        zeropad: params[ 0 ] === '0'
@@ -331,6 +344,7 @@
                        case 'hour|012':
                                spec = {
                                        component: 'hour12',
+                                       calendarComponent: false,
                                        type: 'number',
                                        size: 2,
                                        zeropad: params[ 0 ] === '012'
@@ -340,6 +354,7 @@
                        case 'hour|period':
                                spec = {
                                        component: 'hour12period',
+                                       calendarComponent: false,
                                        type: 'boolean',
                                        values: this.hour12Periods
                                };
@@ -349,6 +364,7 @@
                        case 'millisecond|0':
                                spec = {
                                        component: 'millisecond',
+                                       calendarComponent: false,
                                        type: 'number',
                                        size: 3,
                                        zeropad: params[ 0 ] === '0'