Table of Contents
Elementor date time control displays a date/time picker field based on the Flatpickr library.
The control is defined in Control_Date_Time class which extends Base_Data_Control class.
Note that when using the control, the type should be set using the \Elementor\Controls_Manager::DATE_TIME constant.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
type |
string |
date_time | The type of the control. |
label |
string |
The label that appears above of the field. | |
description |
string |
The description that appears below the field. | |
show_label |
bool |
true | Whether to display the label. |
label_block |
bool |
true | Whether to display the label in a separate line. |
separator |
string |
default | Set the position of the control separator. Available values are default, before, after and none. default will position the separator depending on the control type. before / after will position the separator before/after the control. none will hide the separator. |
picker_options |
array |
enableTime:true, minuteIncrement:1 |
The picker configurations. |
default |
string |
Default date/time in MySQL format (YYYY-mm-dd HH:ii). |
Return Value
(string) The chosen date/time in MySQL format (YYYY-mm-dd HH:ii).
Usage
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'due_date',
[
'label' => __( 'Due Date', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::DATE_TIME,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$due_date = strtotime( $this->get_settings( 'due_date' ) );
$due_date_in_days = $due_date / DAY_IN_SECONDS;
echo '<p>' . sprintf( __( 'Something will happen in %s days.', 'plugin-name' ), $due_date_in_days ) . '</p>';
}
protected function _content_template() {
?>
<#
var due_date = new Date( settings.due_date ),
now_date = new Date(),
due_date_in_days = Math.floor( ( due_date - now_date ) / 86400000 ); // 86400000 milliseconds in one Day.
#>
<p> Something will happen in {{{ due_date_in_days }}} days. </p>
<?php
}
}