Date Time Picker and Countdown Timer

• brandonpweb

• August 2, 2016 at 10:10 am

I’m hoping someone might be able to assist me. I’m utilizing ACF Pro for creating a Date Time Picker field that is Countdown Timer that count down (days, hours, minutes, second). I’m also using simplyCountdown.js to make the countdown timer but trying to load jquery animate into my function theme_acf.php. Here’s what I got and it works but not countdown the numbers.

(theme_acf.php)______________________________________

/*
* Check if landing-page
* */

add_action('wp_head', 'condition_checker');

function condition_checker (){
	//does field exist and true?
	if (get_field('enable_splash_page')) {
		//if true do this
				// get raw date
		add_action('wp_print_scripts','landing_page_js');

		} 
}

//* Check If Landing Page is Working **/

add_action( 'wp_print_scripts', 'landing_page_js' );

function landing_page_js() {

	// Geting Raw Date
	$date = get_field( 'countdown_timer', false, false);

	//Check the Fields are not empty else will not run
	if(empty($date) ) {

		//Make date object
		$date = new DateTime( $date );
		echo '

		<div class="alert alert-info">
			<button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
			<strong>Time</strong><br>
			Year: ' . $date->format( 'Y' ) . '<br>
			Month: ' . $date->format( 'm' ) . '<br>
			Day: ' . $date->format( 'd' ) . '<br>
		</div>
		
		';
	}
}

(front-page.php)______________________________________

	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<div class="comming-soon-area text-center">
		    <div class="display-table">
			    <div class="display-table-cell">
				    <div class="container">
						    <div class="col-md-12">
					    <div class="row">
							    <div class="coming-text text-center">
								    <img class="logo" src="<?php bloginfo('template_directory'); ?>/assets/images/PixelCity.png"/>
								    <h1><?php the_title(); ?></h1>
								    <p><?php the_content(); ?></p>
							    </div>

							  	<div class="countdown">
							    	<?php $date = DateTime::createFromFormat('YJM', 
							    	get_field('countdownhttp://localhost/Beta-Sites/wp-admin/users.php_timer'));
									$days = ceil((strtotime(the_field('countdown_timer')) - time())/(60*60*24)); ?>
							    </div>

							    <div class="social-icon text-center">
								    <a href=""><i class="fa fa-twitch"></i></a>
								    <a href="" class="one"><i class="fa fa-twitter"></i></a>
								    <a href="" class="two"><i class="fa fa-youtube-play"></i>
								    <a href="" class="three"><i class="fa fa-linkedin"></i>
								    <a href="" class="four"><i class="fa fa-instagram"></i></a>
							    </div>
						    </div>
					    </div>
				    </div>
			    </div>
		    </div>
	    </div>
	<?php endwhile; ?>

This Html finish project

https://gyazo.com/c833f813116fddba6efb8af472f6ed2d

• James

• August 2, 2016 at 1:53 pm

Hi @brandonpweb

I think there are some typos there. In the ‘theme_acf.php’, I believe this line of code:

if(empty($date) ) {

Should be like this:

if(!empty($date) ) {

And in the ‘front-page.php’, I believe this line:

get_field('countdownhttp://localhost/Beta-Sites/wp-admin/users.php_timer'));

Should be like this:

get_field('countdown_timer'));

Could you please fix it and see if it fixes the issue?

Thanks 🙂

• brandonpweb

• August 3, 2016 at 7:32 am

Hello @James,
I have fix my source code but getting an error that say in browser

Fatal error: Uncaught Error: Call to a member function format() on unknown in /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/lib/theme_acf.php:42 Stack trace: #0 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/plugin.php(525): landing_page_js(”) #1 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/script-loader.php(1027): do_action(‘wp_print_script…’) #2 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/plugin.php(525): wp_print_head_scripts(”) #3 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/general-template.php(2528): do_action(‘wp_head’) #4 /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/templates/head.php(5): wp_head() #5 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/template.php(574): require(‘/Applications/M…’) #6 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/template.php(531): load_template(‘/Applications/M…’, false) #7 /Applications/MAMP/htdocs/Beta-Sites/wp-includes/general-template.php(167): locate_template(Array, true, fals in /Applications/MAMP/htdocs/Beta-Sites/wp-content/themes/Pixel-City-Coming-Soon-Theme/lib/theme_acf.php on line 42

add_action( 'wp_print_scripts', 'landing_page_js' );

function landing_page_js() {

	// Geting Raw Date
	$date = get_field('countdown_timer');

	//Check the Fields are not empty else will not run
	if(!empty($date) ) {

		//Make date object
		$date = new DateTime( $date );
		echo '

		<div class="alert alert-info">
			<button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
			<strong>Time</strong><br>
			Day: ' . $date->format( 'd' ) . '<br>
			Hours: ' . $hour->format( 'h' ) . '<br>
			Minutes: ' . $minute->format( 'h' ) . '<br>
			Seconds: ' . $second->format( 's' ) . '<br>
		</div>
		
		';
	}
}

• James

• August 3, 2016 at 12:25 pm

Hi @brandonpweb

Could you please tell me which one is the line 42? Also, could you please share the code you used to include the “theme_acf.php” file?

Thanks 🙂

• brandonpweb

• August 4, 2016 at 6:00 am

HI @James,

Thank you for help me so line 42 is Hours: ‘ . $hour->format( ‘h’ ) . ‘<br> him still learn about PHP Development.

• James

• August 4, 2016 at 12:34 pm

Hi @brandonpweb

Could you please try this code instead:

$now = new DateTime();

$date = get_field('date_time_picker', 85);
$date = new DateTime( $date );

$interval = $now->diff($date);

echo '

    <div class="alert alert-info">
        <button type="button" class="close" date-dismiss="alert" aria-hidden="true">&time;</button>
        <strong>Time</strong><br>
        Day: ' . $interval->format( '%d' ) . '<br>
        Hours: ' . $interval->format( '%h' ) . '<br>
        Minutes: ' . $interval->format( '%i' ) . '<br>
        Seconds: ' . $interval->format( '%s' ) . '<br>
    </div>

';

This page should give you more idea about it: http://stackoverflow.com/questions/14675739/php-datetime-countdown.

I hope this helps 🙂

• brandonpweb

• August 5, 2016 at 5:31 am

Thank you @James, but I have find out the idea by myself but its similar to yours.

Thank for all the help (:

• elias1435

• September 28, 2016 at 4:17 am

Hello,
i am new bee, so i could not understand where i will find the “theme_acf.php” file. would you pls help me to use the countdown timer in ACF plugins.

Thanks
Md. Elias

• James

• September 28, 2016 at 11:15 am

Hi @elias1435

The “theme_acf.php” is a theme used by @brandonpweb to show the countdown; which utilizes simplyCountdown.js. You can check how to use ACF with the script from the code on this page, but to create the theme and implement the script, I’m afraid you need to get in touch with the script author or the community.

I hope this makes sense 🙂