How to Countdown to a Date

how to countdown to a date

This is working fine as a normal javascript.

<script>
var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

Your output is appearing as follows:-

1days 9hrs 3mins 22secs

UPDATE

Using Functions:

<script>

    CountDownTimer('02/19/2012 10:1 AM', 'countdown');
    CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + 'days ';
            document.getElementById(id).innerHTML += hours + 'hrs ';
            document.getElementById(id).innerHTML += minutes + 'mins ';
            document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>
<div id="countdown"></div>
<div id="newcountdown"></div>

Output will appear as follows:-

0days 23hrs 25mins 8secs

1days 23hrs 25mins 8secs

Date in iOS shows NaN

What is the format of serverTime?

When parsing date strings with the Date constructor (and Date.parse, they are equivalent), always make sure that the input conforms to the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) — the parsing behavior with other formats is implementation-defined and may not work across all browsers.

Source

So if your serverTime string is not in this format, you’ll have unpredictable results.

If you need to parse a date from a different format, use a library such as date-fns.

countdown timer isn't showing up

var now = new date().getTime();

spelling mistake, it should be

var now = new Date().getTime();

and now it works

Date-fns: Countdown to a specific date

You must first find the target date, like this one:

const today = startOfToday();
let target = setDate(today, 10);
if (isBefore(target, today)) {
  target = addMonths(target, 1);
}

Then calculate time remaining until the target:

const diff = differenceInSeconds(target, new Date());
const days = Math.floor(diff / 86400);
const hours = Math.floor((diff - days * 86400) / 3600);
const minutes = Math.floor((diff - days * 86400 - hours * 3600) / 60);
const seconds = diff - days * 86400 - hours * 3600 - minutes * 60;

Use days, hours, minutes, seconds for create a countdown. Don't forget to import required functions from date-fns.

Daily automatic countdown

Your main problem is that you are changing only one component of the date, but expect the rest to stay the same. That is not how dates work. If you add 12 hours to 15:20 on Friday, the result is not 27:20 on Friday. It's 03:20 on Saturday. So adding only to the hours without taking into account the full date is failing for many samples.

So if you play around with dates, never dissect them and play around with parts. All the parts are connected and dependent. If you add a second to 23:59:59 on 12/31, even the year will change. So don't reinvent the wheel on any of that, always change the complete date, never just parts of it:

DateTime getNextDeadline(DateTime now) {
  final todaysDeadline = DateTime(
    now.year,
    now.month,
    now.day,
    16,
    30);
  
  if(now.isBefore(todaysDeadline)) {
    return todaysDeadline;
  }
     
  return todaysDeadline.add(Duration(days: 1));
}

void main() {
  final date = DateTime.now();
  
  final nextDeadline = getNextDeadline(date);
    
  print(nextDeadline);
}

How to Create Date Count timer selecting date from the date picker input and show the difference of selected date to current date

The problem is that your getTimeDifference function calculated the time difference based on dDay:

this.timeDifference = this.dDay - new Date().getTime();

but dDay is only ever set once (where the variable is declared):

public dDay = this.model.getTime();

When a new date is chosen in the date picker, the variable model is updated but dDay is never updated and it's value is the original date. If you add the following line to your getTimeDifference function:

this.dDay = this.model.getTime();

then dDay will get updated with the new date after one is selected. The getTimeDifference function becomes:

private getTimeDifference() {
  this.dDay = this.model.getTime(); // new line to update dDay
  this.timeDifference = this.dDay - new Date().getTime();
  this.allocateTimeUnits(this.timeDifference);
}

Please see this StackBlitz for a demo. Now when you select a new date, the countdown timer gets updated accordingly.

---

Related Topics