Date Time Control - Elementor Developers

Table of Contents

1 Arguments
2 Return Value
3 Usage

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
	}

}