Date Time Control

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.


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,
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).


class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,

				'label' => __( 'Due Date', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::DATE_TIME,



	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>


Never miss an update
Subscribe to our developer’s newsletter for every latest update