Ticket #42394: 42394.1.diff

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

@@ -332 +332 @@
         margin-top: 10px;
 }
 
-.customize-control.customize-control-date_time .date-time-fields .date-input,
-.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
-        float: left;
-        margin-right: 5px;
-}
 .customize-control.customize-control-date_time .date-time-fields .date-input.day {
         margin-right: 0;
 }
@@ -361 +356 @@
         margin: 0;
 }
 
-.date-time-fields .date-time-separator {
-        line-height: 2;
-}
-
 .date-time-fields .time-row {
         margin-top: 12px;
 }
 
 .date-time-fields .date-timezone {
-        float: left;
         line-height: 2.2;
         text-decoration: none;
 }
@@ -2830 +2820 @@
                 width: 80px;
         }
 
-        .date-time-fields .date-time-separator,
         .date-time-fields .date-timezone {
                 line-height: 3.2;
         }

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

@@ -98 +98 @@
         public function content_template() {
                 $data = array_merge( $this->json(), $this->get_month_choices() );
                 $timezone_info = $this->get_timezone_info();
+
+                /* translators: 1: month, 2: day, 3: year, 4: hour, 5: minute */
+                $format = sprintf( __( '%1$s %2$s, %3$s @ %4$s:%5$s' ), '__MONTH__', '__DAY__', '__YEAR__', '__HOUR__', '__MINUTE__' );
+
+                $date_format = get_option( 'date_format' );
+                foreach ( array( 'Y', 'y', 'o' ) as $year_token ) {
+                        $date_format = preg_replace( '/(?<!\\\\)' . $year_token . '/', '%1$s', $date_format );
+                }
+                foreach ( array( 'F', 'm', 'M', 'n' ) as $month_token ) {
+                        $date_format = preg_replace( '/(?<!\\\\)' . $month_token . '/', '%2$s', $date_format );
+                }
+                foreach ( array( 'j', 'd' ) as $day_token ) {
+                        $date_format = preg_replace( '/(?<!\\\\)' . $day_token . '/', '%3$s', $date_format );
+                }
                 ?>
 
                 <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
@@ -116 +130 @@
                         <fieldset class="day-row">
                                 <legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
                                 <div class="day-fields clear">
+                                        <?php ob_start(); ?>
                                         <label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
                                         <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
                                                 <# _.each( data.month_choices, function( choice ) {
@@ -129 +144 @@
                                                         </option>
                                                 <# } ); #>
                                         </select>
+                                        <?php $month_field = trim( ob_get_clean() ); ?>
+
+                                        <?php ob_start(); ?>
                                         <label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
                                         <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
-                                        <span class="time-special-char date-time-separator">,</span>
+                                        <?php $day_field = trim( ob_get_clean() ); ?>
+
+                                        <?php ob_start(); ?>
                                         <label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
                                         <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
+                                        <?php $year_field = trim( ob_get_clean() ); ?>
+
+                                        <?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
                                 </div>
                         </fieldset>
                         <# if ( data.includeTime ) { #>
@@ -144 +167 @@
                                                 <# 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">
                                                 <# if ( data.twelveHourFormat ) { #>