0

I have two fields StartDate and EndDate.How to Implement Timerfunctionality with these fields in custom phtml

for example for the following format..

$startdate='31-10-22 00:00:00';
$enddate='01-11-22 00:00:00';

The timer will be like as '00DAYS 24HOURS 00MINUTES 00SECONDS'......

1

3 Answers 3

0

You can use this in your template to show the Timer :

if ($timeer && $timeer->hasData()):
    $startTime = $timeer->getDisplayFrom() ? $timeer->getDisplayFrom() : '';
    $endTime = $banner->getDisplayTo() ? $timeer->getDisplayTo() : '';
    $start = $block->convertDateToTimeStamp($startTime);
    $end = $block->convertDateToTimeStamp($endTime);
    $now = $block->convertDateToTimeStamp();
    if ($start < $end && $now < $end):
0
0

Just make a substraction between end date and start date. Then you formate the result the way you want from the original timestamp.

The trick would be : if you want it to be dynamic, like seing the second moving. Then you need to plan some js/ jquery that will send an ajax request to retrieve dynamically the result of the substraction with the currrent timestamp. That being said i think it should be too heavy for the server to do that, I honestly don't know and never tried.

1
  • yes actullay i want like that the seconds moving.. so i don't know how to implement like that.
    – Alshihab
    Nov 1, 2022 at 4:20
0
<input type="hidden" id="startdate" value="2022-11-02 11:37:00"/>
<input type="hidden" id="enddate"   value="2022-11-05 18:00:00"/>
<p id="countdown"></p>
<script>
let endDate = document.getElementById("enddate").value;
    endDate = new Date(endDate).getTime();
let startDate =   document.getElementById("startdate").value;
    startDate = new Date(startDate).getTime();
var x = setInterval(function() {
   var now = new Date().getTime();
   var distance = -1;
    if (startDate <= now){
     distance = endDate - now;
        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);

  document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    }
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

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.