Ticket #42373: 42373.4.diff

src/wp-admin/js/customize-controls.js

@@ -5552 +5552 @@
                                 var input = $( this ), component, element;
                                 component = input.data( 'component' );
                                 element = new api.Element( input );
-                                if ( 'meridian' === component ) {
-                                        element.validate = function( value ) {
-                                                if ( 'am' !== value && 'pm' !== value ) {
-                                                        return null;
-                                                }
-                                                return value;
-                                        };
-                                } else {
-                                        element.validate = function( value ) {
-                                                var val = parseInt( value, 10 );
-                                                if ( isNaN( val ) ) {
-                                                        return null;
-                                                }
-                                                return val;
-                                        };
-                                }
-                                element.bind( control.populateSetting );
                                 control.inputElements[ component ] = element;
                                 control.elements.push( element );
+
+                                // Add invalid date error once user changes (and has blured
+                                input.on( 'change', function() {
+                                        if ( control.invalidDate ) {
+                                                control.notifications.add( new api.Notification( 'invalid_date', {
+                                                        message: api.l10n.invalidDate
+                                                } ) );
+                                        }
+                                } );
+                                input.on( 'input', _.debounce( function() {
+                                        if ( ! control.invalidDate ) {
+                                                control.notifications.remove( 'invalid_date' );
+                                        }
+                                } ) );
                         } );
 
                         control.inputElements.month.bind( control.updateDaysForMonth );
@@ -5580 +5577 @@
                         }
                         control.populateDateInputs();
                         control.setting.bind( control.populateDateInputs );
+
+                        // Start populating setting after it has been populated.
+                        _.each( control.inputElements, function( element ) {
+                                element.bind( control.populateSetting );
+                        } );
                 },
 
                 /**
@@ -5629 +5631 @@
                  * @return {boolean} If date input fields has error.
                  */
                 validateInputs: function validateInputs() {
-                        var control = this, errorMessage, components;
+                        var control = this, components, validityInput;
 
                         control.invalidDate = false;
 
@@ -5638 +5640 @@
                                 components.push( 'hour', 'minute' );
                         }
 
-                        _.each( components, function( component ) {
-                                var element, el, max, min, value;
+                        _.find( components, function( component ) {
+                                var element, max, min, value;
+
+                                element = control.inputElements[ component ];
+                                validityInput = element.element.get( 0 );
+                                max = parseInt( element.element.attr( 'max' ), 10 );
+                                min = parseInt( element.element.attr( 'min' ), 10 );
+                                value = parseInt( element(), 10 );
+                                control.invalidDate = isNaN( value ) || value > max || value < min;
 
                                 if ( ! control.invalidDate ) {
-                                        element = control.inputElements[ component ];
-                                        el = element.element.get( 0 );
-                                        max = parseInt( element.element.attr( 'max' ), 10 );
-                                        min = parseInt( element.element.attr( 'min' ), 10 );
-                                        value = element();
-                                        control.invalidDate = value > max || value < min;
-                                        errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
-
-                                        el.setCustomValidity( errorMessage );
-                                        if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
-                                                _.result( el, 'reportValidity' );
-                                        }
+                                        validityInput.setCustomValidity( '' );
                                 }
+
+                                return control.invalidDate;
                         } );
 
+                        if ( control.inputElements.meridian && ! control.invalidDate ) {
+                                validityInput = control.inputElements.meridian.element.get( 0 );
+                                if ( 'am' !== control.inputElements.meridian.get() && 'pm' !== control.inputElements.meridian.get() ) {
+                                        control.invalidDate = true;
+                                } else {
+                                        validityInput.setCustomValidity( '' );
+                                }
+                        }
+
+                        if ( control.invalidDate ) {
+                                validityInput.setCustomValidity( api.l10n.invalidValue );
+                        } else {
+                                validityInput.setCustomValidity( '' );
+                        }
+                        if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
+                                _.result( validityInput, 'reportValidity' );
+                        }
+
                         return control.invalidDate;
                 },
 
@@ -5669 +5687 @@
                 updateDaysForMonth: function updateDaysForMonth() {
                         var control = this, daysInMonth, year, month, day;
 
-                        month = control.inputElements.month();
-                        year = control.inputElements.year();
-                        day = control.inputElements.day();
+                        month = parseInt( control.inputElements.month(), 10 );
+                        year = parseInt( control.inputElements.year(), 10 );
+                        day = parseInt( control.inputElements.day(), 10 );
 
                         if ( month && year ) {
                                 daysInMonth = new Date( year, month, 0 ).getDate();
                                 control.inputElements.day.element.attr( 'max', daysInMonth );
 
                                 if ( day > daysInMonth ) {
-                                        control.inputElements.day( daysInMonth );
+                                        control.inputElements.day( String( daysInMonth ) );
                                 }
                         }
                 },
@@ -5698 +5716 @@
 
                         minuteEl = control.inputElements.minute.element;
 
-                        if ( maxHours === control.inputElements.hour() ) {
-                                control.inputElements.minute( 0 );
+                        if ( String( maxHours ) === String( control.inputElements.hour() ) ) {
+                                control.inputElements.minute( '0' );
                                 minuteEl.data( 'default-max', minuteEl.attr( 'max' ) );
                                 minuteEl.attr( 'max', '0' );
                         } else if ( minuteEl.data( 'default-max' ) ) {
@@ -5745 +5763 @@
                         };
 
                         getElementValue = function( component ) {
-                                var value = control.inputElements[ component ].get();
+                                var value = parseInt( control.inputElements[ component ].get(), 10 );
 
                                 if ( _.contains( [ 'month', 'day', 'hour', 'minute' ], component ) ) {
                                         value = pad( value, 2 );
@@ -5822 +5840 @@
                         }
 
                         _.each( control.inputElements, function( element, component ) {
-                                element.set( parsed[ component ] );
+                                if ( 'meridian' === component || parseInt( parsed[ component ], 10 ) !== parseInt( element() ) ) {
+                                        element.set( parsed[ component ] );
+                                }
                         } );
 
                         return true;

src/wp-includes/customize/class-wp-customize-date-time-control.php

@@ -141 +141 @@
                                         <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
                                         <div class="time-fields clear">
                                                 <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
-                                                <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
-                                                <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+                                                <# var maxHour = data.twelveHourFormat ? 12 : 23; #>
+                                                <# var minHour = data.twelveHourFormat ? 1 : 0; #>
+                                                <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
                                                 <span class="time-special-char date-time-separator">:</span>
                                                 <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
                                                 <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">

src/wp-includes/script-loader.php

@@ -599 +599 @@
                         esc_url( admin_url( 'theme-install.php' ) )
                 ),
                 'publishSettings' => __( 'Publish Settings' ),
+                'invalidDate'     => __( 'Invalid date.' ),
+                'invalidValue'    => __( 'Invalid value.' ),
         ) );
         $scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );