Преобразование типа JavaScript не число

Question

У меня есть div с атрибутом данных, который содержит дату. Когда я получить сказал значение данных, это не дата, а строка:

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

Я извлекая элемент данных, как так:

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

Я тогда пытаюсь разделить значение в массив строк:

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

я затем присвоить части массива в качестве переменных моего дня я пытаюсь создать:

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

Интересно, что все три мои переменные говорят, что они NaN. Таким образом, объявление моего нового переменный Date является «Invalid Date»:

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

я могу сделать следующее, и она работает просто отлично:

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

Это только тогда, когда я прочитал атрибут данных из div, который устанавливает значение в нечто, что я не знаю, что это такое.

я отладки в Visual Studio, и это скриншот моего Immediate Window пытается проверить значения:

Вот полный пример ... мой 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> 

Моя 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:
Это происходит только при использовании Internet Explorer (11). Edge, Opera, FireFox и Chrome, ВСЕ правильно анализируют значения. Спасибо за все ответы ребята, но я считаю, что обнаружил ошибку с IE.

Answer 1

После поиска моего вопроса и добавления Internet Explorer для поиска, я получаю удар здесь. И это, кажется, были решены с помощью регулярных выражений:

Strange behaviour with spliting a string in Javascript

Answer 2

Используйте $('#firstRow').attr('data-expense-date') селектор, чтобы получить атрибут data-expense-date.

$(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>

Answer 3

Как кто-то сказал в комментарии я думаю this, вероятно, неправильно. Всего пару нот. .toString() не обязательно вообще, поскольку атрибуты являются строками, и вам не нужно давать Date a Number. просто введите их как строку. вы также можете избавиться от всех ваших переменных.

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>

или (не обычный подход)

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: Я пытался найти ошибку IE11, но не может его воспроизвести. этот код работает для меня. просто понял, что вы используете формат американской даты, в моих двух других примерах используется формат даты в Великобритании, поэтому они нуждаются в модификации.

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>