0

i am use date picker in system config and get date in this format 2015-07-15 i want to convert it into this format 2015-07-15 17:29:31 because Jquery countdown is not work if i insert static value in 2015-07-15 17:29:31this format then it will work. i have two date

1) countdown start date

2) countdown end date

i am use jquery.countdownTimer.js

below is my count down script

<div id="countdowntimer" class="countdowntimer"><span id="future_date"></span></div>
 <script>
    require([
        'jquery',
        'Identixweb_Headernotification/js/jquery.countdownTimer'
    ], function ($) {
        console.log('countdowntimer start');
        jQuery("#future_date").countdowntimer({
            startDate : "<?php echo date('Y/m/d H:i:s'); ?>",
            dateAndTime : "2017/09/22 08:26:55",
            size : "lg",
            regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
//          regexpReplaceWith: "$1 days $2 hours $3 minutes $4 seconds REMAINING"        
            regexpReplaceWith: "$1<sup>days</sup> / $2<sup>hours</sup> / $3<sup>minutes</sup> / $4<sup>seconds</sup>"
        });    
    });
</script> 

1 Answer 1

1

I have used custom countdown using jQuery,

Date Format

$test['date_from'] = 08/17/2017 2:52 PM 
$test['date_to'] = 08/26/2017 2:52 PM 
$microsecond=microtime();
$current_id=1;

Use this code its help you.

$startdate=strtotime($test['date_from']);
$enddate = strtotime($test['date_to']);
$interval = $enddate - $startdate;
$curr_time = strtotime(date('Y/m/d H:i:s'));

if($curr_time >= $startdate && $curr_time <= $enddate)
{
    $hours = abs($curr_time - $enddate)/(60*60);
    $time_diff = $hours * 3600;

    $html.='<ul ><li id="testdata-'.$current_id.'-'.$microsecond.'" class="testdata-contdown" ></li></ul>';
    $html.='<script type="text/javascript">
    require(["jquery"],function($){
        var countDownDate = new Date("'.$test['date_to'].'").getTime();
        var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("testdata-'.$current_id.'-'.$microsecond.'").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);
    });
    </script>';

    echo $html;
}
4
  • i am make filed in system config and use datepicker for date field and get system config value in block file and use it into phtml file.Above solution is for form field i am asking for system config if you know it plz share. Commented Aug 25, 2017 at 11:29
  • you just need to replace time ! other functionality is same here! Commented Aug 25, 2017 at 11:31
  • it works....... Commented Aug 25, 2017 at 12:17
  • @Bhavin Gehlot i don't have time i only have date because datepicker save only date in system config. Commented Aug 25, 2017 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.