Date Time Picker
Date Time Picker control allows users to select date and/or time values. One setting decides whether the control shows a calendar, a clock, or both.
Control Settings
The control has one setting, date_time_picker, a group of three buttons that defaults to date_time:
- Date (
date) - a calendar - Date & Time (
date_time) - a calendar and a clock - Time (
time) - a clock
While the value is empty the control shows a button reading Select Date, Select Date and Time or Select Time. Once a value is set, the button prints it in the site's own date, time or date and time format. A Reset button appears under the picker and clears the value.
The control saves date in YYYY-MM-DDTHH:ii:ss format regardless of the display format.
Usage Examples
PHP
<?php
$date = $attributes['control_name'];
// Date + Time format
echo '<p>' . date_i18n( 'F j, Y H:i', strtotime( $date ) ) . '</p>';
// Date only format
echo '<p>' . date_i18n( 'F j, Y', strtotime( $date ) ) . '</p>';
// Time only format
echo '<p>' . date_i18n( 'H:i', strtotime( $date ) ) . '</p>';Handlebars
{{! Date + Time format }}
<p>
{{date_i18n "F j, Y H:i" control_name}}
</p>
{{! Date only format }}
<p>
{{date_i18n "F j, Y" control_name}}
</p>
{{! Time only format }}
<p>
{{date_i18n "H:i" control_name}}
</p>Post Meta
<?php
$date = get_lzb_meta( 'control_meta_name' );
// Date + Time format
echo '<p>' . date_i18n( 'F j, Y H:i', strtotime( $date ) ) . '</p>';
// Date only format
echo '<p>' . date_i18n( 'F j, Y', strtotime( $date ) ) . '</p>';
// Time only format
echo '<p>' . date_i18n( 'H:i', strtotime( $date ) ) . '</p>';Common Format Patterns
| Format | Output | Description |
|---|---|---|
F j, Y H:i | March 1, 2024 13:45 | Full date and time |
F j, Y | March 1, 2024 | Full date |
m/d/Y | 03/01/2024 | Short date |
H:i | 13:45 | 24-hour time |
g:i a | 1:45 pm | 12-hour time |
Use WordPress date_i18n() function to ensure proper date localization in your output.