JavaScript Type Conversion Not A Number

Question

I have a div with a data attribute that contains a date. When I retrieve said data value, it's not a date, but a string:

<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
    <span>some stuff in here</span>
</div>

I'm retrieving the data element like so:

var currentDateString = $(this).data('expense-date');

I then am attempting to split the value into an array of strings:

var currentDateArray = currentDateString.split("/");

I then assign parts of the array as variables of my date I am trying to create:

var year = Number(currentDateArray[2].toString());
var month = Number(currentDateArray[0].toString());
var day = Number(currentDateArray[1].toString());

Interestingly enough, all three of my variables say that they are NaN. Thus, the declaration of my new Date variable is "Invalid Date":

var currentDate = new Date(year, month - 1, day);

I can do the following and it works just fine:

var dateString = "5/3/2016";
var dateStringArray = dateString.split("/");
var testDate = new Date(dateStringArray[2], dateStringArray[0] - 1, dateStringArray[1]);

It's only when I read the data attribute from the div element that sets the value to something that I do not know what it is.

I am debugging in Visual Studio and this is a screenshot of my Immediate Window trying to test the values:

Here is the complete example...my HTML:

<div class="col-md-6" id="detailPreview">
    <div class="panel panel-transparent" data-expense-date="5/2/2016">                             
        <div class="panel-heading">                                 
            <h3 class="panel-title">Monday, May 2, 2016</h3>                                 
            <div class="panel-actions">                                     
                <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>                                 
            </div>                             
        </div>                             
        <div class="panel-body expense-date-body">                            
            <div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">                                 
                <div class="panel-heading">                                     
                    <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>                                    
                    <div class="panel-actions">                                         
                        <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>                                     
                    </div>                                 
                </div>                                 
                <!-- <div class="panel-collapse"> -->                                     
                <div class="panel-body">                                    
                    Business Name: Best Buy                                         
                    Location: Topeka, KS                                         
                    Purpose: Purchased replacement laptop for inventory                                     
                </div>                                 
                <!-- </div> -->                              
            </div>
        </div>                          
    </div>
    <div class="panel panel-transparent" data-expense-date="5/3/2016">                             
        <div class="panel-heading">                                 
            <h3 class="panel-title">Tuesday, May 3, 2016</h3>                                 
            <div class="panel-actions">                                     
                <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>                                 
            </div>                             
        </div>                             
        <div class="panel-body expense-date-body">                             
            <div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">                                 
                <div class="panel-heading">                                     
                    <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>                                    
                    <div class="panel-actions">                                         
                        <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>                                         
                        <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>                                     
                    </div>                                 
                </div>                                 
                <!-- <div class="panel-collapse"> -->                                     
                <div class="panel-body">                                         
                    Business Name: Wal-Mart                                         
                    Location: Topeka, KS                                         
                    Purpose: Purchased scotch tape                                     
                </div>                                 
                <!-- </div> -->                              
            </div>
        </div>                          
    </div>
</div>

My javascript:

$("[data-expense-date]").each(function () {
  if ($(this).data('expense-date') === dateShort.toString()) {
    parentDiv = $(this);
    return false;
  } else {
    debugger;

    // determine if this date is before or after the param date.
    //var dataExpenseDate = $(this).data('expense-date');
    var currentDateString = $(this).data('expense-date'); // "5/2/2016"

    var currentDateArray = currentDateString.split('/'); // [5,2,2016]
    //var yearString = currentDateArray[2];
    //var yearNumber = Number(yearString);
    var year = Number(currentDateArray[2]); // "2016" <-- NaN
    var month = Number(currentDateArray[0]); // "5" <-- NaN
    var day = Number(currentDateArray[1]); // "3" <-- NaN

    var currentDate = new Date(year, month - 1, day); // Invalid Date

    if (date > currentDate) {
        newDivInjectAfter = $(this);
    }
  }
});

UPDATE:
This only happens when I am using Internet Explorer (11). Edge, Opera, FireFox, and Chrome, ALL parse the values properly. Thanks for all of the responses guys, but I believe I have discovered a bug with IE.

Do `currentDateString` and `currentDateArray` contain the value(s) you are expecting? What do you see if you `console.log()` them? — gen_Eric, May 17 '16 at 16:24
Maybe `this` is not what you think it is, try `$('#firstRow').data('expense-date');` — jcubic, May 17 '16 at 16:28
This is so crazy. I must have something else wrong because when I do a jsfiddle, the values are able to be parsed as numbers: https://jsfiddle.net/hhcm8wvc/ — clockwiseq, May 17 '16 at 16:29
Why are you calling `toString()`, they should already be strings — Patrick Evans, May 17 '16 at 16:30
I was trying anything and everything because they're not strings somehow. — clockwiseq, May 17 '16 at 16:32
I had not tried that. But, I just tried it and it's the same result...NaN — clockwiseq, May 17 '16 at 17:52

Ali Mamedov · Answer 1 · 2017-08-06T18:11:41.997

0

Use $('#firstRow').attr('data-expense-date') selector to get data-expense-date attribute.

$(function() {

var 
  currentDateString = $('#firstRow').attr('data-expense-date'),
  currentDateArray = currentDateString.split('/'), // ['5', '3', '2016']
  year = +currentDateArray[2].toString(), // 2016
  month = +currentDateArray[0].toString(), // 5
  day = +currentDateArray[1].toString(), // 3
  currentDate = new Date(year, month - 1, day);


alert(currentDate); //  Date {Tue May 03 2016 00:00:00 GMT+0500 (AZST)}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
    <span>some stuff in here</span>
</div>

edited Aug 06 '17 at 18:11

answered May 17 '16 at 16:32

Ali Mamedov

5,116
3
33
47

So the only problem is that I'm doing all this in a loop: `$("[data-expense-date]").each(function () {` So attempting to identify the element by Id won't work. – clockwiseq May 17 '16 at 17:39
As you see in my sample everything is ok with `$('#firstRow').attr('data-expense-date')` selector. Maybe your html code in complex works differently. Maybe there are duplicated `#firstRow` id attributes and etc. Anyway, if you find the way to solve your problem - that is the best result. Good luck – Ali Mamedov May 17 '16 at 17:46
No, in my HTML, I have multiple divs that have unique IDs (i.e. expense-row-1, expense-row-2, expense-row-3) and that's why I'm in a loop. I'm trying to select them and then get the data attribute for the date. I tried the .attr('data-expense-date') and it returned the same as before. Everything is fine (string and then array) until I try to cast that string or array element to a number. – clockwiseq May 17 '16 at 17:49

TarranJones · Answer 2 · 2016-05-18T07:36:03.787

Like someone said in the comments i think this was probably wrong. Just a couple of notes. The .toString() isnt needed at all as attributes are strings and you dont need to give Date a Number either. just enter them as a string. also you can probably get rid of all your variables.

var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
alert(new Date(currentDateArray[2], currentDateArray[1], --currentDateArray[0]));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
  <span>some stuff in here</span>
</div>

or (Not a conventional approach)

var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
currentDateArray[0] --; // day -1;
currentDateArray.push(null);
alert(new(Date.bind.apply(Date, currentDateArray.reverse()))());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
  <span>some stuff in here</span>
</div>

UPDATE: I was trying to find the IE11 bug, but cannot reproduce it. this code works for me. just realised that your using the American date format, my other two examples use the UK date format so they would need modifying.

var parentDiv;
var date = new Date();
var dateShort = date.toLocaleDateString();

$("[data-expense-date]").each(function() {

  if ($(this).data('expense-date') === dateShort) {
    parentDiv = $(this);
    return false;
  } else {

    var currentDateString = $(this).data('expense-date'); // "5/2/2016"

    var currentDateArray = currentDateString.split('/'); // [5,2,2016]
    var year = Number(currentDateArray[2]); // "2016" <-- NaN
    var month = Number(currentDateArray[0]); // "5" <-- NaN
    var day = Number(currentDateArray[1]); // "3" <-- NaN
    
    

    var currentDate = new Date(year, month - 1, day); // Invalid Date
    
    console.log(day,month,year,currentDate);

    if (date > currentDate) {
      newDivInjectAfter = $(this);
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="detailPreview">
  <div class="panel panel-transparent" data-expense-date="5/2/2016">
    <div class="panel-heading">
      <h3 class="panel-title">Monday, May 2, 2016</h3> 
      <div class="panel-actions">
        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
      </div>
    </div>
    <div class="panel-body expense-date-body">
      <div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3> 
          <div class="panel-actions">
            <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
            <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
          </div>
        </div>
        <!-- <div class="panel-collapse"> -->
        <div class="panel-body">
          Business Name: Best Buy Location: Topeka, KS Purpose: Purchased replacement laptop for inventory
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
  <div class="panel panel-transparent" data-expense-date="5/3/2016">
    <div class="panel-heading">
      <h3 class="panel-title">Tuesday, May 3, 2016</h3> 
      <div class="panel-actions">
        <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
      </div>
    </div>
    <div class="panel-body expense-date-body">
      <div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
        <div class="panel-heading">
          <h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3> 
          <div class="panel-actions">
            <a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
            <a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
            <a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
          </div>
        </div>
        <!-- <div class="panel-collapse"> -->
        <div class="panel-body">
          Business Name: Wal-Mart Location: Topeka, KS Purpose: Purchased scotch tape
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</div>

This is a nice answer, again, I forgot to mention that all this is being done in a loop. I was just supplying a simplistic example and the $(this) is what I'm using in the loop. It still doesn't make sense as to why my code returns "5/3/2016" and the array is [5,3,2016] yet when I attempt to get each value, it's not a number. — clockwiseq, May 17 '16 at 17:41

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

After searching for my issue and appending Internet Explorer to the search, I get a hit here. And it appears to have been resolved using RegEx:

Strange behaviour with spliting a string in Javascript

edited May 23 '17 at 12:15

Community

1
1

answered May 17 '16 at 20:15

clockwiseq

4,189
9
38
61

The issue here is that IE prefaces the value from `Date` with an invisible Unicode "left-to-right" control character,. (Check out `dataAttributeArray[0].length` -- it's longer than you expect, due to the invisible character.) You simply need to remove the control character and parse the string as a number. – apsillers May 17 '16 at 20:23

JavaScript Type Conversion Not A Number

3 Answers3