Show (Display) timer between two dates using jQuery

SajidHus...

SOLVED CLOSED ACTIVE ANSWERED
User: SajidHussa
Posted: on Aug 30, 2021 03:45 AM
Forum: jQuery and jQuery Plugins
Replies: 3
Views: 3459
Sample Code: Download

show timer between two dates using jquery

if i have two dates

start date is 10/08/2021 10:00AM

end date is 15/08/2021 10:00 PM

dharmend...

0 1

Reply
User: dharmendr
Replied: on Aug 30, 2021 03:48 AM
Report

SajidHussa says:
show timer jquery 

Do you want to display count down timer between two dates?

SajidHus...

0 2

Reply
User: SajidHussa
Replied: on Aug 30, 2021 06:30 AM
Modified: on Aug 30, 2021 06:30 AM
Report

yes sir

dharmend...

0 3

Reply
User: dharmendr
Replied: on Aug 30, 2021 07:10 AM
Report

Hi SajidHussa,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var endDate = "08-31-2021 10:00:00";
            var lblTimer = $("[id*=lblTimer]");
            var countDownDate = new Date(endDate).getTime();
            var x = setInterval(function () {
                var now = new Date().getTime();
                var distance = countDownDate - 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);
                $(lblTimer).html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
                if (distance < 0) {
                    clearInterval(x);
                    $(lblTimer).html("EXPIRED");
                }
            }, 1000);
        });
    </script>
    <span id="lblTimer"></span>
</body>
</html>

Demo

Show (Display) timer between two dates using jQuery

Company

Explore

Follow us

Contact Us