'tooltip' => esc_html__( 'Check this option to prevent today\'s date from being selected.', 'wpforms-lite' ),
'slug' => 'date_disable_todays_date',
'class' => ! isset( $field['date_disable_past_dates'] ) ? 'wpforms-hide' : '',
* Display limit hours options.
* @param array $field Field setting.
private function field_options_limit_hours( array $field ): void {
echo '<div class="wpforms-clear"></div>';
$output = $this->field_element(
'slug' => 'time_limit_hours',
'value' => ! empty( $field['time_limit_hours'] ) ? '1' : '0',
'desc' => esc_html__( 'Limit Hours', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to adjust the range of times that can be selected.', 'wpforms-lite' ),
'class' => 'wpforms-panel-field-toggle',
'slug' => 'time_limit_hours',
// Determine a time format type.
// If the format contains `g` or `h`, then this is 12-hour format, otherwise 24 hours.
$time_format = empty( $field['time_format'] ) || preg_match( '/[gh]/', $field['time_format'] ) ? 12 : 24;
$output = $this->field_options_limit_hours_body( $field, $time_format );
class="wpforms-field-option-row wpforms-field-option-row-%1$s %2$s"
id="wpforms-field-option-row-%3$d-%1$s"
data-field-id="%3$d">%5$s</div>',
'time_limit_hours_options',
'wpforms-panel-field-toggle-body',
esc_attr( $field['id'] ),
esc_attr( 'fields[' . (int) $field['id'] . '][time_limit_hours]' ),
$output // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
* Generate an array of numeric options for date/time selectors.
* @param integer $min Minimum value.
* @param integer $max Maximum value.
* @param integer $step Step.
private function get_selector_numeric_options( int $min, int $max, int $step = 1 ): array {
$range = range( $min, $max, $step );
foreach ( $range as $i ) {
$value = str_pad( $i, 2, '0', STR_PAD_LEFT );
$options[ $value ] = $value;
* Add class to field options wrapper to indicate if field confirmation is enabled.
* @param string|mixed $css_class CSS class.
* @param array $field Field data.
public function field_option_class( $css_class, array $field ): string {
$css_class = (string) $css_class;
if ( $this->type === $field['type'] ) {
$date_type = ! empty( $field['date_type'] ) ? sanitize_html_class( $field['date_type'] ) : 'datepicker';
$css_class .= " wpforms-date-type-$date_type";
* Field preview inside the builder.
* @param array $field Field data and settings.
public function field_preview( $field ) {
$date_placeholder = ! empty( $field['date_placeholder'] ) ? $field['date_placeholder'] : '';
$time_placeholder = ! empty( $field['time_placeholder'] ) ? $field['time_placeholder'] : '';
$format = ! empty( $field['format'] ) ? $field['format'] : self::DEFAULTS['format'];
$date_type = ! empty( $field['date_type'] ) ? $field['date_type'] : 'datepicker';
$date_format = ! empty( $field['date_format'] ) ? $field['date_format'] : self::DEFAULTS['date_format'];
if ( in_array( $date_format, $this->get_month_day_formats(), true ) ) {
$date_first_select = 'MM';
$date_second_select = 'DD';
$date_third_select = 'YYYY';
} elseif ( in_array( $date_format, $this->get_day_month_formats(), true ) ) {
$date_first_select = 'DD';
$date_second_select = 'MM';
$date_third_select = 'YYYY';
$date_first_select = 'YYYY';
$date_second_select = 'MM';
$date_third_select = 'DD';
$this->field_preview_option(
'label_badge' => $this->get_field_preview_badge(),
'<div class="%s format-selected">',
sanitize_html_class( 'format-selected-' . $format )
'<div class="wpforms-date %s">',
sanitize_html_class( 'wpforms-date-type-' . $date_type )
echo '<div class="wpforms-date-datepicker">';
printf( '<input type="text" placeholder="%s" class="primary-input" readonly>', esc_attr( $date_placeholder ) );
printf( '<label class="wpforms-sub-label">%s</label>', esc_html__( 'Date', 'wpforms-lite' ) );
echo '<div class="wpforms-date-dropdown">';
printf( '<select readonly class="first"><option>%s</option></select>', esc_html( $date_first_select ) );
printf( '<select readonly class="second"><option>%s</option></select>', esc_html( $date_second_select ) );
printf( '<select readonly class="third"><option>%s</option></select>', esc_html( $date_third_select ) );
printf( '<label class="wpforms-sub-label">%s</label>', esc_html__( 'Date', 'wpforms-lite' ) );
echo '<div class="wpforms-time">';
printf( '<input type="text" placeholder="%s" class="primary-input" readonly>', esc_attr( $time_placeholder ) );
printf( '<label class="wpforms-sub-label">%s</label>', esc_html__( 'Time', 'wpforms-lite' ) );
$this->field_preview_option( 'description', $field );
* Get month-day date formats.
private function get_month_day_formats(): array {
return [ 'mm/dd/yyyy', self::DEFAULTS['date_format'], 'm.d.Y' ];
* Get day-month date formats.
private function get_day_month_formats(): array {
return [ 'dd/mm/yyyy', self::ALT_DATE_FORMAT, 'd.m.Y' ];
* Field display on the form front-end.
* @param array $field Field data and settings.
* @param array $deprecated Deprecated array of field attributes.
* @param array $form_data Form data and settings.
public function field_display( $field, $deprecated, $form_data ) {
* Field options: Limit Days body section.
* @param array $days Array of days.
* @param array $field Field data and settings.
* @return array Modified field data array.
public function field_options_limit_days_body( array $days, array $field ): array {
foreach ( $days as $day => $day_translation ) {
$day_slug = 'date_limit_days_' . $day;
if ( ! isset( $field['date_format'] ) ) {
$field[ $day_slug ] = $this->default_settings[ $day_slug ];
$output .= '<label class="sub-label">';
$output .= $this->field_element(
'value' => ! empty( $field[ $day_slug ] ) ? '1' : '0',
'class' => 'wpforms-field-options-column',
$output .= '<br>' . $day_translation . '</label>';
class="wpforms-field-option-row wpforms-field-option-row-date_limit_days_options wpforms-panel-field-toggle-body wpforms-field-options-columns wpforms-field-options-columns-7 checkboxes-row"
id="wpforms-field-option-row-%1$d-date_limit_days_options"
data-field-id="%1$d">%3$s</div>',
esc_attr( $field['id'] ),
esc_attr( 'fields[' . (int) $field['id'] . '][date_limit_days]' ),
$output // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
* Field options: Limit Days - Disable Past Dates section.
* @param array $field Field data.
public function field_options_limit_days_disable_past_dates( array $field ): void {
$output = $this->field_element(
'slug' => 'date_disable_past_dates',
'value' => ! empty( $field['date_disable_past_dates'] ) ? '1' : '0',
'desc' => esc_html__( 'Disable Past Dates', 'wpforms-lite' ),
'tooltip' => esc_html__( 'Check this option to prevent any previous date from being selected.', 'wpforms-lite' ),
'slug' => 'date_disable_past_dates',
* Field options: Limit Hours - body section.
* @param array $field Field data.
* @param int $time_format Time format.
private function field_options_limit_hours_body( array $field, int $time_format ): string {
foreach ( [ 'start', 'end' ] as $option ) {
$output .= '<div class="wpforms-field-options-columns wpforms-field-options-columns-4">'; // Open columns container.
$slug = 'time_limit_hours_' . $option . '_hour';
$output .= $this->field_element(
'value' => ! empty( $field[ $slug ] ) ? $field[ $slug ] : $this->default_settings[ $slug ],
'options' => $time_format === 12
? $this->get_selector_numeric_options( 1, $time_format )
: $this->get_selector_numeric_options( 0, $time_format - 1 ),
'class' => 'wpforms-field-options-column',
$slug = 'time_limit_hours_' . $option . '_min';
$output .= $this->field_element(
'value' => ! empty( $field[ $slug ] ) ? $field[ $slug ] : $this->default_settings[ $slug ],
'options' => $this->get_selector_numeric_options( 0, 59, 5 ),
'class' => 'wpforms-field-options-column',
$slug = 'time_limit_hours_' . $option . '_ampm';
$output .= $this->field_element(
'value' => ! empty( $field[ $slug ] ) ? $field[ $slug ] : $this->default_settings[ $slug ],
'wpforms-field-options-column',
$time_format === 24 ? 'wpforms-hidden-strict' : '',
$slug = 'time_limit_hours_' . $option . '_hour';
$output .= $this->field_element(
'value' => $option === 'start' ? esc_html__( 'Start Time', 'wpforms-lite' ) : esc_html__( 'End Time', 'wpforms-lite' ),
'wpforms-field-options-column',
'<div class="%s wpforms-field-options-column"></div>',
$time_format === 12 ? 'wpforms-hidden-strict' : ''
$output .= '</div>'; // Close columns container.