Pass value from div to JS

Question

In a php file i've a div with id and data returned, see the code please:

<div id="dom-target" style="display: none;" data-stuff="2017, 8, 20, 0, 0"></div>

Okay, now i need pass data-stuff value into new Date call, (is a countdown), i try with a variable, but NaN is displayed, for example

var ar = $('#dom-target').data('stuff');

Finally the JS code is:

if (jQuery().mbComingsoon) {
    var ar = $('#dom-target').data('stuff');
    jQuery('#myCounter').mbComingsoon({expiryDate: new Date(ar), speed: 500});
    setTimeout(function () {
        jQuery(window).resize();
    }, 200);
}

Apparently i can't use new Date(ar) to call data from div?

Thank you!

Probably because `ar` is a string and `new Date()` requires numeric arguments. Try splitting the string. — LostMyGlasses, Apr 20 '17 at 15:04
`ar = '2017, 8, 20, 0, 0 '; new Date(ar)` is *not* the same as `new Date(2017, 8, 20, 0, 0)`! It's equivalent to `new Date('2017, 8, 20, 0, 0')`. — deceze, Apr 20 '17 at 15:04
As @deceze points out, you may have more luck with `data-stuff="2017-8-20 00:00"` — paul, Apr 20 '17 at 15:07
Originally, new Date is: `new Date(2017, 8, 20, 0, 0)` i need to retrieve it from a div because these div have a value returned from a php — Carlos Roman, Apr 20 '17 at 15:09
using Moment.js it would be easy to do moment(ar.split(',')) — Stavm, Apr 20 '17 at 15:12
Try changing the value of `data-stuff` to `"2017,8,20,01:12:59"`, this seems to work fine. Note that hours, minutes and seconds are passed as `01:12:59` and not as `01,12,59` as the documentation states. Here is a fiddle you can have a play with: https://jsfiddle.net/0hm46fao/ — Max Maxymenko, Apr 20 '17 at 15:12
Again, for that to work you'd need to split your `ar` value into several values and actually pass several arguments, not just one `ar`. Rather you should be using one of the variations that actually *do* allow you to pass a single parameter, like an ISO date string or a UNIX timestamp: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date — deceze, Apr 20 '17 at 15:13
@paul please post your comment in answer to check it, working fine (date format was the problem) — Carlos Roman, Apr 20 '17 at 15:13
`new Date(Date.UTC.apply(null, $('#dom-target').data('stuff').split(',')))` do the trick — Camille, Apr 20 '17 at 15:21

score 2 · Accepted Answer · answered Apr 20 '17 at 15:18

2

Rather than try to parse '2017, 9, 20, 0, 0' in your javascript, why not use a more amenable date format in your html, like so:

data-stuff="2019-08-20 00:00"

answered Apr 20 '17 at 15:18

paul

21,653
1
53
54

score 1 · Answer 2 · edited May 23 '17 at 12:17

new Date('2017, 8, 20, 0, 0') returns Invalid Date. This is because it expects individual arguments instead of a string containing all of them.

Since you can't call apply directly on a constructor it requires some magic:

var raw = '2017, 8, 20, 0, 0',
    parts = [null].concat(raw.split(',').map(function (item) {
        return parseInt(item.trim(), 10);
    })),
    _Date = Function.prototype.bind.apply(Date, parts);

console.log(parts, new _Date); // Wed Sep 20 2017 00:00:00 GMT-0400 (EDT)

There's a decent explanation here.

score 0 · Answer 3 · answered Apr 20 '17 at 15:21

You can do

...
// Get data of element and split it into an array
var ar = $('#dom-target').data('stuff').split(',');
// Use this array to get a Date
var parsedDate = new Date(Date.UTC.apply(null, ar));
// Do your logic
jQuery('#myCounter').mbComingsoon({expiryDate: parsedDate , speed: 500});
...

Pass value from div to JS

3 Answers3