namespace WPForms\Forms\Fields\DateTime;
use WPForms\Forms\Fields\Traits\ProField as ProFieldTrait;
class Field extends WPForms_Field {
* Field settings defaults.
public const DEFAULTS = [
'date_placeholder' => '',
'date_format' => 'm/d/Y',
'date_type' => 'datepicker',
'time_placeholder' => '',
'time_format' => 'g:i A',
'date_limit_days_sun' => '0',
'date_limit_days_mon' => '1',
'date_limit_days_tue' => '1',
'date_limit_days_wed' => '1',
'date_limit_days_thu' => '1',
'date_limit_days_fri' => '1',
'date_limit_days_sat' => '0',
'time_limit_hours_start_hour' => '09',
'time_limit_hours_start_min' => '00',
'time_limit_hours_start_ampm' => 'am',
'time_limit_hours_end_hour' => '06',
'time_limit_hours_end_min' => '00',
'time_limit_hours_end_ampm' => 'pm',
* Alternative Date Format.
public const ALT_DATE_FORMAT = 'd/m/Y';
* Primary class constructor.
// Define field type information.
$this->name = esc_html__( 'Date / Time', 'wpforms-lite' );
$this->type = 'date-time';
$this->icon = 'fa-calendar-o';
$this->default_settings = self::DEFAULTS;
protected function hooks(): void {
// Set custom option wrapper classes.
add_filter( 'wpforms_builder_field_option_class', [ $this, 'field_option_class' ], 10, 2 );
* Field options panel inside the builder.
* @param array $field Field data and settings.
* @noinspection PackedHashtableOptimizationInspection
* @noinspection HtmlUnknownAttribute
public function field_options( $field ) { // phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh
'after_title' => $this->get_field_options_notice(),
$this->field_option( 'label', $field );
$format = ! empty( $field['format'] ) ? esc_attr( $field['format'] ) : self::DEFAULTS['format'];
$format_label = $this->field_element(
'value' => esc_html__( 'Format', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Select format for the date field.', 'wpforms-lite' ),
$format_select = $this->field_element(
'date-time' => esc_html__( 'Date and Time', 'wpforms-lite' ),
'date' => esc_html__( 'Date', 'wpforms-lite' ),
'time' => esc_html__( 'Time', 'wpforms-lite' ),
'content' => $format_label . $format_select,
$this->field_option( 'description', $field );
$this->field_option( 'required', $field );
$this->field_option( 'size', $field );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div class="format-selected-' . $format . ' format-selected">';
$date_placeholder = ! empty( $field['date_placeholder'] ) ? $field['date_placeholder'] : '';
$date_format = ! empty( $field['date_format'] ) ? esc_attr( $field['date_format'] ) : self::DEFAULTS['date_format'];
$date_type = ! empty( $field['date_type'] ) ? esc_attr( $field['date_type'] ) : 'datepicker';
// Backwards compatibility with old datepicker format.
if ( $date_format === 'mm/dd/yyyy' ) {
$date_format = self::DEFAULTS['date_format'];
} elseif ( $date_format === 'dd/mm/yyyy' ) {
$date_format = self::ALT_DATE_FORMAT;
} elseif ( $date_format === 'mmmm d, yyyy' ) {
$date_formats = wpforms_date_formats();
'<div class="wpforms-clear wpforms-field-option-row wpforms-field-option-row-date no-gap" id="wpforms-field-option-row-%d-date" data-subfield="date" data-field-id="%d">',
esc_attr( $field['id'] ),
'slug' => 'date_placeholder',
'value' => esc_html__( 'Date', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Advanced date options.', 'wpforms-lite' ),
echo '<div class="wpforms-field-options-columns-2 wpforms-field-options-columns">';
echo '<div class="type wpforms-field-options-column">';
'<select id="wpforms-field-option-%d-date_type" name="fields[%d][date_type]">',
esc_attr( $field['id'] ),
'<option value="datepicker" %s>%s</option>',
selected( $date_type, 'datepicker', false ),
esc_html__( 'Date Picker', 'wpforms-lite' )
'<option value="dropdown" %s>%s</option>',
selected( $date_type, 'dropdown', false ),
esc_html__( 'Date Dropdown', 'wpforms-lite' )
'<label for="wpforms-field-option-%d-date_type" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Type', 'wpforms-lite' )
echo '<div class="format wpforms-field-options-column">';
'<select id="wpforms-field-option-%d-date_format" name="fields[%d][date_format]">',
esc_attr( $field['id'] ),
foreach ( $date_formats as $key => $value ) {
if ( in_array( $key, $this->get_regular_date_formats(), true ) ) {
'<option value="%s" %s>%s (%s)</option>',
selected( $date_format, $key, false ),
esc_html( date( $value ) ), // phpcs:ignore WordPress.DateTime.RestrictedFunctions.date_date
'<option value="%s" class="datepicker-only" %s>%s</option>',
selected( $date_format, $key, false ),
esc_html( date( $value ) ) // phpcs:ignore WordPress.DateTime.RestrictedFunctions.date_date
'<label for="wpforms-field-option-%d-date_format" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Format', 'wpforms-lite' )
echo '<div class="placeholder wpforms-field-option-row">';
'<input type="text" class="placeholder" id="wpforms-field-option-%d-date_placeholder" name="fields[%d][date_placeholder]" value="%s">',
esc_attr( $field['id'] ),
esc_attr( $field['id'] ),
esc_attr( $date_placeholder )
'<label for="wpforms-field-option-%d-date_placeholder" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Placeholder', 'wpforms-lite' )
$this->field_options_limit_days( $field );
$time_placeholder = ! empty( $field['time_placeholder'] ) ? $field['time_placeholder'] : '';
$time_format = ! empty( $field['time_format'] ) ? esc_attr( $field['time_format'] ) : self::DEFAULTS['time_format'];
$time_formats = wpforms_time_formats();
$time_interval = ! empty( $field['time_interval'] ) ? esc_attr( $field['time_interval'] ) : '30';
* Filters the time intervals available for the Time field.
* @param array $time_intervals Array of time intervals.
$time_intervals = apply_filters( // phpcs:ignore WPForms.PHP.ValidateHooks.InvalidHookName
'wpforms_datetime_time_intervals',
'15' => esc_html__( '15 minutes', 'wpforms-lite' ),
'30' => esc_html__( '30 minutes', 'wpforms-lite' ),
'60' => esc_html__( '1 hour', 'wpforms-lite' ),
'<div class="wpforms-clear wpforms-field-option-row wpforms-field-option-row-time no-gap" id="wpforms-field-option-row-%d-time" data-subfield="time" data-field-id="%d">',
esc_attr( $field['id'] ),
'slug' => 'time_placeholder',
'value' => esc_html__( 'Time', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Advanced time options.', 'wpforms-lite' ),
echo '<div class="wpforms-field-options-columns-2 wpforms-field-options-columns">';
echo '<div class="interval wpforms-field-options-column">';
'<select id="wpforms-field-option-%d-time_interval" name="fields[%d][time_interval]">',
esc_attr( $field['id'] ),
foreach ( $time_intervals as $key => $value ) {
'<option value="%s" %s>%s</option>',
selected( $time_interval, $key, false ),
$value // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
'<label for="wpforms-field-option-%d-time_interval" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Interval', 'wpforms-lite' )
echo '<div class="format wpforms-field-options-column">';
'<select id="wpforms-field-option-%d-time_format" name="fields[%d][time_format]">',
esc_attr( $field['id'] ),
foreach ( $time_formats as $key => $value ) {
'<option value="%s" %s>%s</option>',
selected( $time_format, $key, false ),
'<label for="wpforms-field-option-%d-time_format" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Format', 'wpforms-lite' )
echo '<div class="placeholder wpforms-field-option-row">';
'<input type="text" class="placeholder" id="wpforms-field-option-%d-time_placeholder" name="fields[%d][time_placeholder]" value="%s">',
esc_attr( $field['id'] ),
esc_attr( $field['id'] ),
esc_attr( $time_placeholder )
'<label for="wpforms-field-option-%d-time_placeholder" class="sub-label">%s</label>',
esc_attr( $field['id'] ),
esc_html__( 'Placeholder', 'wpforms-lite' )
$this->field_options_limit_hours( $field );
$this->field_option( 'css', $field );
$this->field_option( 'label_hide', $field );
$sublabel_class = isset( $field['format'] ) && $field['format'] !== self::DEFAULTS['format'] ? 'wpforms-hidden' : '';
$this->field_option( 'sublabel_hide', $field, [ 'class' => $sublabel_class ] );
* Get regular date formats.
private function get_regular_date_formats(): array {
self::DEFAULTS['date_format'],
* Display limit days options.
* @param array $field Field setting.
private function field_options_limit_days( array $field ): void {
echo '<div class="wpforms-clear"></div>';
$output = $this->field_element(
'slug' => 'date_limit_days',
'value' => ! empty( $field['date_limit_days'] ) ? '1' : '0',
'desc' => esc_html__( 'Limit Days', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to adjust which days of the week can be selected.', 'wpforms-lite' ),
'class' => 'wpforms-panel-field-toggle',
'slug' => 'date_limit_days',
'class' => 'wpforms-clear',
'sun' => esc_html__( 'Sun', 'wpforms-lite' ),
'mon' => esc_html__( 'Mon', 'wpforms-lite' ),
'tue' => esc_html__( 'Tue', 'wpforms-lite' ),
'wed' => esc_html__( 'Wed', 'wpforms-lite' ),
'thu' => esc_html__( 'Thu', 'wpforms-lite' ),
'fri' => esc_html__( 'Fri', 'wpforms-lite' ),
'sat' => esc_html__( 'Sat', 'wpforms-lite' ),
// Rearrange days array according to the Start of Week setting.
$start_of_week = get_option( 'start_of_week' );
$start_of_week = ! empty( $start_of_week ) ? (int) $start_of_week : 0;
if ( $start_of_week > 0 ) {
$days_after = $week_days;
$days_begin = array_splice( $days_after, 0, $start_of_week );
$days = array_merge( $days_after, $days_begin );
$field = $this->field_options_limit_days_body( $days, $field );
$this->field_options_limit_days_disable_past_dates( $field );
$output = $this->field_element(
'slug' => 'date_disable_todays_date',
'value' => ! empty( $field['date_disable_todays_date'] ) ? '1' : '0',
'desc' => esc_html__( 'Disable Today\'s Date', 'wpforms-lite' ),