WP_Customize_Date_Time_Control::content_template() │ public │ WP 4.9.0

Renders a JS template for the content of date time control.

Method of the class: WP_Customize_Date_Time_Control{}

No Hooks.

Return

null. Nothing (null).

Usage

$WP_Customize_Date_Time_Control = new WP_Customize_Date_Time_Control();
$WP_Customize_Date_Time_Control->content_template();

Changelog

WP_Customize_Date_Time_Control::content_template() WP Customize Date Time Control::content template code ^{WP 6.6.2}

<?php
public function content_template() {
	$data          = array_merge( $this->json(), $this->get_month_choices() );
	$timezone_info = $this->get_timezone_info();

	$date_format = get_option( 'date_format' );
	$date_format = preg_replace( '/(?<!\\\\)[Yyo]/', '%1$s', $date_format );
	$date_format = preg_replace( '/(?<!\\\\)[FmMn]/', '%2$s', $date_format );
	$date_format = preg_replace( '/(?<!\\\\)[jd]/', '%3$s', $date_format );

	// Fallback to ISO date format if year, month, or day are missing from the date format.
	if ( 1 !== substr_count( $date_format, '%1$s' ) || 1 !== substr_count( $date_format, '%2$s' ) || 1 !== substr_count( $date_format, '%3$s' ) ) {
		$date_format = '%1$s-%2$s-%3$s';
	}
	?>

	<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
	<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>

	<# if ( data.label ) { #>
		<span class="customize-control-title">
			{{ data.label }}
		</span>
	<# } #>
	<div class="customize-control-notifications-container"></div>
	<# if ( data.description ) { #>
		<span class="description customize-control-description">{{ data.description }}</span>
	<# } #>
	<div class="date-time-fields {{ data.includeTime ? 'includes-time' : '' }}">
		<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
					/* translators: Hidden accessibility text. */
					esc_html_e( 'Month' );
					?>
				</label>
				<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
					<# _.each( data.month_choices, function( choice ) {
						if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
							text = choice.text;
							value = choice.value;
						}
						#>
						<option value="{{ value }}" >
							{{ text }}
						</option>
					<# } ); #>
				</select>
				<?php $month_field = trim( ob_get_clean() ); ?>

				<?php ob_start(); ?>
				<label for="{{ idPrefix }}date-time-day" class="screen-reader-text">
					<?php
					/* translators: Hidden accessibility text. */
					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" />
				<?php $day_field = trim( ob_get_clean() ); ?>

				<?php ob_start(); ?>
				<label for="{{ idPrefix }}date-time-year" class="screen-reader-text">
					<?php
					/* translators: Hidden accessibility text. */
					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 ) { #>
			<fieldset class="time-row clear">
				<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
						/* translators: Hidden accessibility text. */
						esc_html_e( 'Hour' );
						?>
					</label>
					<# 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 }}">
					:
					<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">
						<?php
						/* translators: Hidden accessibility text. */
						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 ) { #>
						<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">
							<?php
							/* translators: Hidden accessibility text. */
							esc_html_e( 'Meridian' );
							?>
						</label>
						<select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
							<option value="am"><?php esc_html_e( 'AM' ); ?></option>
							<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
						</select>
					<# } #>
					<p><?php echo $timezone_info['description']; ?></p>
				</div>
			</fieldset>
		<# } #>
	</div>
	<?php
}