The datepicker control provides a great interface for selecting a specific date and time and outputting it in the format of your choice.
// Example: Countdown element class Prefix_Element_Countdown extends BricksElement { public $category = 'general'; public $name = 'countdown'; public $icon = 'ti-timer'; public $scripts = ['bricksCountdown']; public function get_label() { return esc_html__( 'Countdown', 'bricks' ); } public function set_controls() { $this->controls['date'] = [ 'tab' => 'content', 'label' => esc_html__( 'Date', 'bricks' ), 'type' => 'datepicker', 'default' => '2019-01-01 12:00', ]; $this->controls['format'] = [ 'tab' => 'content', 'label' => esc_html__( 'Format', 'bricks' ), 'type' => 'text', 'default' => '%D days %H hours %M minutes %S seconds.', 'description' => sprintf( '%s <a target="_blank" href="http://hilios.github.io/jQuery.countdown/documentation.html#directives">%s</a>.', esc_html__( 'For formatting options see', 'bricks' ), esc_html__( 'directives', 'bricks' ) ), ]; } 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-bricks-countdown-options', wp_json_encode( $countdown_options ) ); // Render if ( ! isset( $this->settings['date'] ) || ! isset( $this->settings['format'] ) ) { return $this->render_element_placeholder( [ 'icon-class' => 'ti-timer', 'text' => esc_html__( 'No date/format set.', 'bricks' ), ] ); } else { echo '<div ' . $this->render_attributes( 'wrapper' ) . '></div>'; } } }