Skip to content

Date Picker Field

A calendar date selector for choosing a single date value.

Overview

The Date Picker field renders a text input that opens a calendar popover when clicked, letting the user select a date. It returns the selected date as a formatted string. Use it for maintenance mode end dates, sale countdown dates, event dates, launch dates, or any other date-based setting in your theme.


Field Registration

php

[
    'id'      => 'sale_end_date',
    'type'    => 'date_picker',
    'title'   => __('Sale End Date', 'your-textdomain'),
    'subtitle' => __('Date when the sale banner will stop displaying', 'your-textdomain'),
    'default' => '',
]

Field Options

OptionTypeRequiredDescription
idstringUnique field identifier — used as the option key
typestringMust be date_picker
titlestringLabel shown above the field
subtitlestringSmaller descriptive text shown below the label
descstringHelp text shown below the date input
defaultstringDefault date string — e.g. 2026-12-31 or empty string
formatstringDate format string — defaults to YYYY-MM-DD
requiredarrayConditional logic rules — see Conditional Logic

Return Value

Type: string

Returns the selected date as a formatted string (e.g. 2026-12-31), or the default value if nothing has been saved yet.

php

$date = themeplus_get_option( 'sale_end_date', '' );
// Returns: '2026-12-31'

Usage Examples

Showing a sale banner before a deadline

php

$sale_end = themeplus_get_option( 'sale_end_date', '' );

if ( $sale_end ) {
    $end_timestamp = strtotime( $sale_end );
    $now           = current_time( 'timestamp' );

    if ( $now < $end_timestamp ) {
        echo '<div class="sale-banner">';
        echo '<p>' . sprintf(
            esc_html__( 'Sale ends on %s', 'your-textdomain' ),
            esc_html( date_i18n( get_option( 'date_format' ), $end_timestamp ) )
        ) . '</p>';
        echo '</div>';
    }
}

Maintenance mode with an end date

php

[
    'id'      => 'enable_maintenance',
    'type'    => 'toggle',
    'title'   => __('Maintenance Mode', 'your-textdomain'),
    'default' => false,
],
[
    'id'       => 'maintenance_end_date',
    'type'     => 'date_picker',
    'title'    => __('Back Online Date', 'your-textdomain'),
    'subtitle' => __('Estimated date when the site will be back online', 'your-textdomain'),
    'required' => ['enable_maintenance', '==', true],
],

php

$maintenance    = themeplus_get_option( 'enable_maintenance', false );
$end_date       = themeplus_get_option( 'maintenance_end_date', '' );
$end_timestamp  = $end_date ? strtotime( $end_date ) : 0;

if ( $maintenance && ! is_user_logged_in() ) {
    $message = $end_timestamp
        ? sprintf(
            esc_html__( 'We will be back on %s.', 'your-textdomain' ),
            esc_html( date_i18n( get_option( 'date_format' ), $end_timestamp ) )
          )
        : esc_html__( 'We will be back soon.', 'your-textdomain' );

    wp_die( $message, esc_html__( 'Maintenance Mode', 'your-textdomain' ), ['response' => 503] );
}

Countdown timer data attribute

php

$launch_date = themeplus_get_option( 'launch_date', '' );

if ( $launch_date ) {
    echo '<div class="countdown" data-target="' . esc_attr( $launch_date ) . 'T00:00:00"></div>';
}

Comparing two dates

php

$start = themeplus_get_option( 'event_start_date', '' );
$end   = themeplus_get_option( 'event_end_date',   '' );

if ( $start && $end ) {
    $start_ts = strtotime( $start );
    $end_ts   = strtotime( $end );
    $now      = current_time( 'timestamp' );

    if ( $now >= $start_ts && $now <= $end_ts ) {
        echo '<div class="event-badge">' . esc_html__( 'Happening Now', 'your-textdomain' ) . '</div>';
    }
}

With a conditional field

php

[
    'id'      => 'enable_coming_soon',
    'type'    => 'toggle',
    'title'   => __('Enable Coming Soon Mode', 'your-textdomain'),
    'default' => false,
],
[
    'id'       => 'coming_soon_launch_date',
    'type'     => 'date_picker',
    'title'    => __('Launch Date', 'your-textdomain'),
    'subtitle' => __('Date when the coming soon page will be automatically disabled', 'your-textdomain'),
    'required' => ['enable_coming_soon', '==', true],
],

Notes

  • The field returns a date string — always pass it through strtotime() before doing any date comparisons or arithmetic.
  • Use date_i18n() instead of date() when displaying dates to site visitors — it respects the WordPress locale and timezone settings.
  • Use current_time( 'timestamp' ) instead of time() for the current time — it applies the WordPress timezone offset configured in Settings → General.
  • Always check that the returned value is a non-empty string before calling strtotime() on it, as an empty string will produce unexpected results.

On This Page