Title: WP_Customize_Date_Time_Control::content_template
Published: November 20, 2017
Last modified: February 24, 2026

---

# WP_Customize_Date_Time_Control::content_template()

## In this article

 * [Source](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#wp--skip-link--target)

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

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#source)󠁿

    ```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 tiny-text" 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 tiny-text" 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 tiny-text" 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 tiny-text" 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
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-date-time-control.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/customize/class-wp-customize-date-time-control.php#L98)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/customize/class-wp-customize-date-time-control.php#L98-L212)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Customize_Date_Time_Control::json()](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/json/)`wp-includes/customize/class-wp-customize-date-time-control.php` |

Export data to JS.

  | 
| [WP_Customize_Date_Time_Control::get_month_choices()](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/get_month_choices/)`wp-includes/customize/class-wp-customize-date-time-control.php` |

Generate options for the month Select.

  | 
| [WP_Customize_Date_Time_Control::get_timezone_info()](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/get_timezone_info/)`wp-includes/customize/class-wp-customize-date-time-control.php` |

Get timezone info.

  | 
| [esc_html_e()](https://developer.wordpress.org/reference/functions/esc_html_e/)`wp-includes/l10n.php` |

Displays translated text that has been escaped for safe use in HTML output.

  | 
| [wp_json_encode()](https://developer.wordpress.org/reference/functions/wp_json_encode/)`wp-includes/functions.php` |

Encodes a variable into JSON, with some confidence checks.

  | 
| [get_option()](https://developer.wordpress.org/reference/functions/get_option/)`wp-includes/option.php` |

Retrieves an option value based on an option name.

  |

[Show 2 more](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#)

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_customize_date_time_control/content_template/?output_format=md#changelog)󠁿

| Version | Description | 
| [4.9.0](https://developer.wordpress.org/reference/since/4.9.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_date_time_control%2Fcontent_template%2F)
before being able to contribute a note or feedback.