javascript add minutes to new Date(); before using the object

Question

I have a function calls that start a bunch of timers and I want to add a few minutes to each one so they don't all start off at zero. I had success with:

var currentDate = new Date();
var twentyMinutesLater = new Date(currentDate.getTime() + (20 * 60 * 1000));
new CountUp(twentyMinutesLater, 'counter03');

I would love to skip creating the var twentyMinutesLater and so on for all the timers I want, I just can't get the syntax right, or maybe it's not possible. Is there a way to add the milliseconds that in the function call below.

new CountUp(new Date(), 'counter03');

I've tried:

new CountUp((new Date() + (20 * 60 * 1000)), 'counter03');

Result NaN NaN:NaN:NaN so it's not a number Same result with double quotes.

Any javascript syntax masters out there that have any ideas?

Answer 1

In your specific code, you're passing a Date object to the counter code and that is not what it is expected. It is expecting a time value from which it will make it's own Date object (you can see that right in the constructor for the Counter function). Plus, the counter code won't take times in the future, only times in the past (perhaps because it doens't want to deal with negative times - I don't know).

Here's a working example here where I've modified my other jsFiddle used in the answer to your other question.

function addCounter() {
    var currentDate = new Date();
    var twentyMinutesLater = currentDate.getTime() - (20 * 60 * 1000);
    var div = document.createElement("div");
    div.id = "counter" + counterNum++;
    document.body.appendChild(div);
    new CountUp(twentyMinutesLater, div.id);
}

And, here's a jsFiddle that lets you enter a number of minutes and it will start a counter at that value: http://jsfiddle.net/jfriend00/vnf5z/.

Answer 2

Something like the following should do:

var d = new Date();
new CountUp(d.setMinutes(d.getMinutes() + 20), 'counter03'); 

Depending on how the CountUp constructor uses the date object passed to it, and whether you want to re-use d, you might need:

var d = new Date();
new CountUp(new Date(d.setMinutes(d.getMinutes() + 20)), 'counter03'); 

so that each call to CountUp gets a different date object.

Answer 3

Just another approach that I've seen been used in Rails. You'd create relative date objects using this syntax,

(20).minutes().fromNow()

Or, if you hate the noise from the parentheses, you could do this (only on ES5 compatible browsers),

(20).minutes.fromNow

Here's the first non-ES5 solution that adds methods on the Number prototype.

Number.prototype.minutes = function() {
    // minutes to milliseconds
    return this * 60 * 1000;
};

Number.prototype.fromNow = function() {
    var futureDate = new Date(Date.now() + this);
    return futureDate;
};

new CountUp((20).minutes().fromNow(), 'foo')

Here's the ES5 solution that adds function backed properties.

Object.defineProperties(Number.prototype, {
    minutes: {
        get: function() {
            // minutes to milliseconds
            return this * 60 * 1000;
        }
    },
    fromNow: {
        get: function() {
            var futureDate = new Date(Date.now() + this);
            return futureDate;
        }
    }
});

new CountUp((20).minutes.fromNow, 'foo')

There are different schools of thought on extending of native objects. One group forbids it at any cost, while the other encourage using it almost everywhere. As with anything, striking a balance is important.

Answer 4

new Date() does return an object not the timestamp, so you should'nt use a mathematical operation there(at least no addition, when you expect a Number as result). Use Date.getTime() :

//when you need a Date-object as argument
  new CountUp(new Date(new Date().getTime() + (20 * 60 * 1000)) , 'counter03');
//when you need the timestamp as argument
  new CountUp((new Date().getTime() + (20 * 60 * 1000)) , 'counter03');

See the fiddle to recognize the difference: http://jsfiddle.net/doktormolle/8v4Tx/