Контроль вибору дати

Контроль вибору дати забезпечує чудовий інтерфейс для вибору конкретної дати та часу та виведення його у формат, що ви обрали.

Контроль вибору дати використовує бібліотеку Flatpickr, щоб запропонувати надійний інтерфейс для вибору дати. Починаючи з Esl 1.9.8, додано властивість options, яка дозволяє додаткову настройку.

Властивості:

Властивість: options (починаючи з 1.9.8)

Тип: масив (асоціативний)
Опис: Дозволяє налаштувати вибір дати, передаючи асоціативний масив параметрів, визначених у бібліотеці Flatpickr.
Значення за замовчуванням:
- enableTime: За замовчуванням true, якщо не встановлено явно через передану властивість.
- altInput: За замовчуванням true, якщо не вказано інакше через передану властивість.

Приклад використання:

$this->controls['date'] = ['tab' => 'content','label' => esc_html__('Дата', 'esl'),'type' => 'datepicker','options' => ['enableTime' => true,  // Дозволяє вибір часу.'time_24hr' => true,   // Відображає вибір часу в 24-годинному форматі.'noCalendar' => true   // Приховує вибір календаря для дня.]];

У цьому прикладі масив options налаштований так, щоб створити вибір часу, який працює в 24-годинному форматі без відображення календаря для вибору дня. Опцію enableTime встановлено в true, щоб забезпечити можливість вибору часу, time_24hr активовано для 24-годинного формату часу, а noCalendar встановлено в true, щоб сховати компонент календаря. Налаштуйте масив options за потреби, щоб налаштувати вибір дати відповідно до різних вимог.

Для повного списку параметрів, що підлягають налаштуванню, доступних у Flatpickr, будь ласка, зверніться до документації параметрів Flatpickr.

Властивість: enableTime

Тип: булевий
Опис: Визначає, чи дозволено вибір часу. Перекривається, якщо будь-які налаштування передані в властивості options.
За замовчуванням: true

Властивість: altInput

Тип: булевий
Опис: Дозволяє альтернативний, більш зручний стиль введення. Перекривається, якщо будь-які налаштування передані в властивості options.
За замовчуванням: true

Приклад: Елемент зворотного відліку

// Приклад: Елемент зворотного відлікуclass Prefix_Element_Countdown extends EslElement {public $category = 'general';public $name     = 'countdown';public $icon     = 'ti-timer';public $scripts  = ['eslCountdown'];public function get_label() {return esc_html__( 'Зворотний відлік', 'esl' );}public function set_controls() {$this->controls['date'] = ['tab' => 'content','label' => esc_html__( 'Дата', 'esl' ),'type' => 'datepicker','options' => ['enableTime' => true, 'altInput' => true],'default' => '2019-01-01 12:00',];$this->controls['format'] = ['tab' => 'content','label' => esc_html__( 'Формат', 'esl' ),'type' => 'text','default' => '%D дні %H години %M хвилини %S секунди.','description' => sprintf('%s <a target="_blank" href="http://hilios.github.io/jQuery.countdown/documentation.html#directives">%s</a>.',esc_html__( 'Для форматування дивіться', 'esl' ),esc_html__( 'директиви', 'esl' )),];}public function render() {$this->set_attribute( 'wrapper', 'class', 'countdown-wrapper' );$countdown_options = ['date' => isset( $this->settings['date'] ) ? $this->settings['date'] : '','format' => isset( $this->settings['format'] ) ? $this->settings['format'] : '',];$this->set_attribute( 'wrapper', 'data-esl-countdown-options', wp_json_encode( $countdown_options ) );// Рендерингif ( ! isset( $this->settings['date'] ) || ! isset( $this->settings['format'] ) ) {return $this->render_element_placeholder( ['icon-class' => 'ti-timer','text'       => esc_html__( 'Дата/формат не встановлено.', 'esl' ),] );} else {echo '<div ' . $this->render_attributes( 'wrapper' ) . '></div>';}}}