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 \Bricks\Element {
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>';
}
}
}