CODEWITHSUNDEEP
javascript
Lukasz
Lukasz

Reputation: 409

javascript countdown time formatting

I have a javascript countdown you can see here.

I set deadline time in this line:

var deadline = '12/15/2015';

It's MM/DD/YYYY format. I would like to change it to DD/MM/YYYY format. How can I change it?

Another thing is countdown goes to minus when deadline is end. How can I set some text like "Deadline is past." when countdown ends?

javascript

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


var deadline = '12/15/2015';

initializeClock('clockdiv', deadline);

html

<div id="clockdiv">

    <span class="days"></span>
    Days


    <span class="hours"></span>
    Hours


    <span class="minutes"></span>
    Minutes


    <span class="seconds"></span>
    Seconds

</div>

jsfiddle http://jsfiddle.net/0kppf1m2/

Upvotes: 0

Views: 2845

Answers (2)

Nizar
Nizar

Reputation: 481

1) Create a second div for displaying the message for "Deadline is past" and when the time is over set it to visible and set the clock to hidden as in working example

html:

<div id="timeIsNow" class="hidden-div">
  Deadline is past
</div>

<div id="clockdiv" class="visible-div">

  <span class="days"></span> Days


  <span class="hours"></span> Hours


  <span class="minutes"></span> Minutes


  <span class="seconds"></span> Seconds

</div>

js: 

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0) {
      document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
      return true;
    }

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


var deadline = '2015-12-14T20:14:00+02:00';

initializeClock('clockdiv', deadline);

css:

.hidden-div {
  visibility: hidden;
}
.visible-div {
  visibility: visible;
}

2) To convert a date from DDMMYYY to MMDDYYY use this function:

var d1 = "15/12/2015"
d1 = d1.split('/');
var d2 = d1[1]+'/'+d1[0]+'/'+d1[2];

Upvotes: 2

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

I modified your code a little bit.

You have to clear the interval after you reached the deadline and change the innerHTML of the clock's container.

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  var timeinterval = setInterval(updateClock, 1000);
  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clock.innerHTML = 'time is up';
      clearInterval(timeinterval);
    }
  }
}

Fiddle

And there are many ways you can create a Date object. I'd suggest using new Date(year, month, day, hours, minutes, seconds, milliseconds). More info here.

Upvotes: 1

Related Questions