Option for DateInputWidget to display full month and day names

Add a "longDisplayFormat" config option to DateInputWidget to show
full month and day names when using the default locale-specific
display format.

Bug: T120733
Change-Id: I2db6892720abf86dfc9655291b1070aa7f7bf77b

diff --git a/includes/widget/DateInputWidget.php b/includes/widget/DateInputWidget.php
index f011f0b..507dab6 100644 (file)
--- a/includes/widget/DateInputWidget.php
+++ b/includes/widget/DateInputWidget.php
@@ -19,6 +19,7 @@ class DateInputWidget extends \OOUI\TextInputWidget {
 
        protected $inputFormat = null;
        protected $displayFormat = null;
+       protected $longDisplayFormat = null;
        protected $placeholderLabel = null;
        protected $placeholderDateFormat = null;
        protected $precision = null;
@@ -36,6 +37,9 @@ class DateInputWidget extends \OOUI\TextInputWidget {
         *   while the widget is inactive. Should be as unambiguous as possible (for example, prefer
         *   to spell out the month, rather than rely on the order), even if that makes it longer.
         *   Applicable only if the widget is infused. (default: language-specific)
+        * @param string $config['longDisplayFormat'] If a custom displayFormat is not specified, use
+        *   unabbreviated day of the week and month names in the default language-specific
+        *   displayFormat. (default: false)
         * @param string $config['placeholderLabel'] Placeholder text shown when the widget is not
         *   selected. Applicable only if the widget is infused. (default: taken from message
         *   `mw-widgets-dateinput-no-date`)
@@ -58,6 +62,7 @@ class DateInputWidget extends \OOUI\TextInputWidget {
                $config = array_merge( [
                        // Default config values
                        'precision' => 'day',
+                       'longDisplayFormat' => false,
                ], $config );
 
                // Properties
@@ -79,6 +84,9 @@ class DateInputWidget extends \OOUI\TextInputWidget {
                if ( isset( $config['displayFormat'] ) ) {
                        $this->displayFormat = $config['displayFormat'];
                }
+               if ( isset( $config['longDisplayFormat'] ) ) {
+                       $this->longDisplayFormat = $config['longDisplayFormat'];
+               }
                if ( isset( $config['placeholderLabel'] ) ) {
                        $this->placeholderLabel = $config['placeholderLabel'];
                }
@@ -134,6 +142,9 @@ class DateInputWidget extends \OOUI\TextInputWidget {
                if ( $this->displayFormat !== null ) {
                        $config['displayFormat'] = $this->displayFormat;
                }
+               if ( $this->longDisplayFormat !== null ) {
+                       $config['longDisplayFormat'] = $this->longDisplayFormat;
+               }
                if ( $this->placeholderLabel !== null ) {
                        $config['placeholderLabel'] = $this->placeholderLabel;
                }

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 7f5e608..0ec6a4c 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -72,6 +72,8 @@
         *     while the widget is inactive. Should be as unambiguous as possible (for example, prefer to
         *     spell out the month, rather than rely on the order), even if that makes it longer. When not
         *     given, the default is language-specific.
+        * @cfg {boolean} [longDisplayFormat=false] If a custom displayFormat is not specified, use
+        *     unabbreviated day of the week and month names in the default language-specific displayFormat.
         * @cfg {string} [placeholderLabel=No date selected] Placeholder text shown when the widget is not
         *     selected. Default text taken from message `mw-widgets-dateinput-no-date`.
         * @cfg {string} [placeholderDateFormat] User-visible date format string displayed in the textual input
@@ -92,6 +94,7 @@
                // Config initialization
                config = $.extend( {
                        precision: 'day',
+                       longDisplayFormat: false,
                        required: false,
                        placeholderLabel: mw.msg( 'mw-widgets-dateinput-no-date' )
                }, config );
@@ -129,6 +132,7 @@
                this.inTextInput = 0;
                this.inputFormat = config.inputFormat;
                this.displayFormat = config.displayFormat;
+               this.longDisplayFormat = config.longDisplayFormat;
                this.required = config.required;
                this.placeholderLabel = config.placeholderLabel;
 
@@ -439,6 +443,10 @@
                        ll = localeData.longDateFormat( 'll' );
                        format = llll.replace( lll.replace( ll, '' ), '' );
 
+                       if ( this.longDisplayFormat ) {
+                               format = format.replace( 'MMM', 'MMMM' ).replace( 'ddd', 'dddd' );
+                       }
+
                        return format;
                }
        };