[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Customize API: WP_Customize_Date_Time_Control class
   4   *
   5   * @package WordPress
   6   * @subpackage Customize
   7   * @since 4.9.0
   8   */
   9  
  10  /**
  11   * Customize Date Time Control class.
  12   *
  13   * @since 4.9.0
  14   *
  15   * @see WP_Customize_Control
  16   */
  17  class WP_Customize_Date_Time_Control extends WP_Customize_Control {
  18  
  19      /**
  20       * Customize control type.
  21       *
  22       * @since 4.9.0
  23       * @var string
  24       */
  25      public $type = 'date_time';
  26  
  27      /**
  28       * Minimum Year.
  29       *
  30       * @since 4.9.0
  31       * @var int
  32       */
  33      public $min_year = 1000;
  34  
  35      /**
  36       * Maximum Year.
  37       *
  38       * @since 4.9.0
  39       * @var int
  40       */
  41      public $max_year = 9999;
  42  
  43      /**
  44       * Allow past date, if set to false user can only select future date.
  45       *
  46       * @since 4.9.0
  47       * @var bool
  48       */
  49      public $allow_past_date = true;
  50  
  51      /**
  52       * Whether hours, minutes, and meridian should be shown.
  53       *
  54       * @since 4.9.0
  55       * @var bool
  56       */
  57      public $include_time = true;
  58  
  59      /**
  60       * If set to false the control will appear in 24 hour format,
  61       * the value will still be saved in Y-m-d H:i:s format.
  62       *
  63       * @since 4.9.0
  64       * @var bool
  65       */
  66      public $twelve_hour_format = true;
  67  
  68      /**
  69       * Don't render the control's content - it's rendered with a JS template.
  70       *
  71       * @since 4.9.0
  72       */
  73  	public function render_content() {}
  74  
  75      /**
  76       * Export data to JS.
  77       *
  78       * @since 4.9.0
  79       * @return array
  80       */
  81  	public function json() {
  82          $data = parent::json();
  83  
  84          $data['maxYear']          = (int) $this->max_year;
  85          $data['minYear']          = (int) $this->min_year;
  86          $data['allowPastDate']    = (bool) $this->allow_past_date;
  87          $data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
  88          $data['includeTime']      = (bool) $this->include_time;
  89  
  90          return $data;
  91      }
  92  
  93      /**
  94       * Renders a JS template for the content of date time control.
  95       *
  96       * @since 4.9.0
  97       */
  98  	public function content_template() {
  99          $data          = array_merge( $this->json(), $this->get_month_choices() );
 100          $timezone_info = $this->get_timezone_info();
 101  
 102          $date_format = get_option( 'date_format' );
 103          $date_format = preg_replace( '/(?<!\\\\)[Yyo]/', '%1$s', $date_format );
 104          $date_format = preg_replace( '/(?<!\\\\)[FmMn]/', '%2$s', $date_format );
 105          $date_format = preg_replace( '/(?<!\\\\)[jd]/', '%3$s', $date_format );
 106  
 107          // Fallback to ISO date format if year, month, or day are missing from the date format.
 108          if ( 1 !== substr_count( $date_format, '%1$s' ) || 1 !== substr_count( $date_format, '%2$s' ) || 1 !== substr_count( $date_format, '%3$s' ) ) {
 109              $date_format = '%1$s-%2$s-%3$s';
 110          }
 111          ?>
 112  
 113          <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
 114          <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 115  
 116          <# if ( data.label ) { #>
 117              <span class="customize-control-title">
 118                  {{ data.label }}
 119              </span>
 120          <# } #>
 121          <div class="customize-control-notifications-container"></div>
 122          <# if ( data.description ) { #>
 123              <span class="description customize-control-description">{{ data.description }}</span>
 124          <# } #>
 125          <div class="date-time-fields {{ data.includeTime ? 'includes-time' : '' }}">
 126              <fieldset class="day-row">
 127                  <legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
 128                  <div class="day-fields clear">
 129                      <?php ob_start(); ?>
 130                      <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">
 131                          <?php
 132                          /* translators: Hidden accessibility text. */
 133                          esc_html_e( 'Month' );
 134                          ?>
 135                      </label>
 136                      <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
 137                          <# _.each( data.month_choices, function( choice ) {
 138                              if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
 139                                  text = choice.text;
 140                                  value = choice.value;
 141                              }
 142                              #>
 143                              <option value="{{ value }}" >
 144                                  {{ text }}
 145                              </option>
 146                          <# } ); #>
 147                      </select>
 148                      <?php $month_field = trim( ob_get_clean() ); ?>
 149  
 150                      <?php ob_start(); ?>
 151                      <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">
 152                          <?php
 153                          /* translators: Hidden accessibility text. */
 154                          esc_html_e( 'Day' );
 155                          ?>
 156                      </label>
 157                      <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
 158                      <?php $day_field = trim( ob_get_clean() ); ?>
 159  
 160                      <?php ob_start(); ?>
 161                      <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">
 162                          <?php
 163                          /* translators: Hidden accessibility text. */
 164                          esc_html_e( 'Year' );
 165                          ?>
 166                      </label>
 167                      <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 }}">
 168                      <?php $year_field = trim( ob_get_clean() ); ?>
 169  
 170                      <?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
 171                  </div>
 172              </fieldset>
 173              <# if ( data.includeTime ) { #>
 174                  <fieldset class="time-row clear">
 175                      <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
 176                      <div class="time-fields clear">
 177                          <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">
 178                              <?php
 179                              /* translators: Hidden accessibility text. */
 180                              esc_html_e( 'Hour' );
 181                              ?>
 182                          </label>
 183                          <# var maxHour = data.twelveHourFormat ? 12 : 23; #>
 184                          <# var minHour = data.twelveHourFormat ? 1 : 0; #>
 185                          <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
 186                          :
 187                          <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">
 188                              <?php
 189                              /* translators: Hidden accessibility text. */
 190                              esc_html_e( 'Minute' );
 191                              ?>
 192                          </label>
 193                          <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
 194                          <# if ( data.twelveHourFormat ) { #>
 195                              <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">
 196                                  <?php
 197                                  /* translators: Hidden accessibility text. */
 198                                  esc_html_e( 'Meridian' );
 199                                  ?>
 200                              </label>
 201                              <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
 202                                  <option value="am"><?php esc_html_e( 'AM' ); ?></option>
 203                                  <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
 204                              </select>
 205                          <# } #>
 206                          <p><?php echo $timezone_info['description']; ?></p>
 207                      </div>
 208                  </fieldset>
 209              <# } #>
 210          </div>
 211          <?php
 212      }
 213  
 214      /**
 215       * Generate options for the month Select.
 216       *
 217       * Based on touch_time().
 218       *
 219       * @since 4.9.0
 220       *
 221       * @see touch_time()
 222       *
 223       * @global WP_Locale $wp_locale WordPress date and time locale object.
 224       *
 225       * @return array
 226       */
 227  	public function get_month_choices() {
 228          global $wp_locale;
 229          $months = array();
 230          for ( $i = 1; $i < 13; $i++ ) {
 231              $month_text = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
 232  
 233              /* translators: 1: Month number (01, 02, etc.), 2: Month abbreviation. */
 234              $months[ $i ]['text']  = sprintf( __( '%1$s-%2$s' ), $i, $month_text );
 235              $months[ $i ]['value'] = $i;
 236          }
 237          return array(
 238              'month_choices' => $months,
 239          );
 240      }
 241  
 242      /**
 243       * Get timezone info.
 244       *
 245       * @since 4.9.0
 246       *
 247       * @return array {
 248       *     Timezone info. All properties are optional.
 249       *
 250       *     @type string $abbr        Timezone abbreviation. Examples: PST or CEST.
 251       *     @type string $description Human-readable timezone description as HTML.
 252       * }
 253       */
 254  	public function get_timezone_info() {
 255          $tz_string     = get_option( 'timezone_string' );
 256          $timezone_info = array();
 257  
 258          if ( $tz_string ) {
 259              try {
 260                  $tz = new DateTimeZone( $tz_string );
 261              } catch ( Exception $e ) {
 262                  $tz = '';
 263              }
 264  
 265              if ( $tz ) {
 266                  $now                   = new DateTime( 'now', $tz );
 267                  $formatted_gmt_offset  = $this->format_gmt_offset( $tz->getOffset( $now ) / HOUR_IN_SECONDS );
 268                  $tz_name               = str_replace( '_', ' ', $tz->getName() );
 269                  $timezone_info['abbr'] = $now->format( 'T' );
 270  
 271                  $timezone_info['description'] = sprintf(
 272                      /* translators: 1: Timezone name, 2: Timezone abbreviation, 3: UTC abbreviation and offset, 4: UTC offset. */
 273                      __( 'Your timezone is set to %1$s (%2$s), currently %3$s (Coordinated Universal Time %4$s).' ),
 274                      $tz_name,
 275                      '<abbr>' . $timezone_info['abbr'] . '</abbr>',
 276                      '<abbr>UTC</abbr>' . $formatted_gmt_offset,
 277                      $formatted_gmt_offset
 278                  );
 279              } else {
 280                  $timezone_info['description'] = '';
 281              }
 282          } else {
 283              $formatted_gmt_offset = $this->format_gmt_offset( (int) get_option( 'gmt_offset', 0 ) );
 284  
 285              $timezone_info['description'] = sprintf(
 286                  /* translators: 1: UTC abbreviation and offset, 2: UTC offset. */
 287                  __( 'Your timezone is set to %1$s (Coordinated Universal Time %2$s).' ),
 288                  '<abbr>UTC</abbr>' . $formatted_gmt_offset,
 289                  $formatted_gmt_offset
 290              );
 291          }
 292  
 293          return $timezone_info;
 294      }
 295  
 296      /**
 297       * Format GMT Offset.
 298       *
 299       * @since 4.9.0
 300       *
 301       * @see wp_timezone_choice()
 302       *
 303       * @param float $offset Offset in hours.
 304       * @return string Formatted offset.
 305       */
 306  	public function format_gmt_offset( $offset ) {
 307          if ( 0 <= $offset ) {
 308              $formatted_offset = '+' . (string) $offset;
 309          } else {
 310              $formatted_offset = (string) $offset;
 311          }
 312          $formatted_offset = str_replace(
 313              array( '.25', '.5', '.75' ),
 314              array( ':15', ':30', ':45' ),
 315              $formatted_offset
 316          );
 317          return $formatted_offset;
 318      }
 319  }