2015-12-15 6 views
7

Сначала это может показаться многими другими вопросами, которые уже заданы в отношении NaN в JavaScript, но я уверяю вас, что это не так.Почему эта функция возвращает NaN?

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

var dateString = $('#itemAcquiredTxt').val(); //Would have a value of '2013-12-15' 
var dateAcquired = new Date(dateString); //Invalid Date ? 

Текстовое поле itemAcquiredTxt будет иметь значение «2013 -12-15" (формат YYYY-MM-DD) берется из вызова базы данных:

$('#itemAcquiredTxt').val(new Date(item.DateAcquired).toLocaleDateString()); 

После создания нового объекта Date это дает мне "Invalid Date".

ОК ... Так что я думал о создании объекта Date, пропуская его год, месяц и день как числа - один из его других конструкторов.

var year = Number(dateString.split("-")[0]); //Returns NaN 
var month = Number(dateString.split("-")[1]); //Returns NaN 
var day = Number(dateString.split("-")[2]); //Returns NaN 
var dateAcquired = new Date(year, month - 1, day); //InvalidDate 

Я попытался расколоть строку в дату текстовое поле в тире, и преобразовать строку в число, используя как номер и ParseInt - но оба дали мне NaN. Я дважды проверял значения строк, и ничего не показалось неправильным: «2013», «12», «15» для разделенных элементов соответственно.

я сказал себе ... Может быть, мой код плох, и попробовал его на JSFiddle https://jsfiddle.net/jrxg40js/
Но, как вы можете видеть, после размещения даты в тексте и нажав на кнопку, это работает!

Heres соответствующего HTML код

функция
<table id="inputTable"> 
      <tr> 
       <td><span><strong>Name:</strong></span></td> 
       <td><input id="itemNameTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Category:</strong></span></td> 
       <td> 
        <select id="categorySelect" ng-model="selectedCategory" ng-change="changeSubCategoryList(selectedCategory)" ng-options="cat as cat.CategoryName for cat in categoriesObj track by cat.CategoryID"> 
         <option value="">---Please Select One---</option> 
        </select> 
       </td> 
      </tr> 
      <tr ng-show="hasSubCat"> 
       <td><span><strong>Sub Category</strong></span></td> 
       <td> 
        <select id="subCategorySelect"> 
         <option value="">---Please Select One---</option> 
         <option ng-repeat="sub in subCategoryObj" value="{{sub.SubCatID}}">{{sub.SubCatName}}</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td><span><strong>Description:</strong></span></td> 
       <td><input id="itemDescriptionTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Serial Number:</strong></span></td> 
       <td><input id="itemSerialNumberTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Year:</strong></span></td> 
       <td><input id="itemYearTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Initial Cost:</strong></span></td> 
       <td><input id="itemValueTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Department:</strong></span></td> 
       <td> 
        <select id="departmentSelect"> 
         <option value="">---Please Select One---</option> 
         <option ng-repeat="dep in departmentsObj" value="{{dep.RoleID}}">{{dep.RoleDescription}}</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td><span><strong>Campus:</strong></span></td> 
       <td> 
        <select id="campusSelect" ng-model="selectedCampus" ng-change="changeBuildingList(selectedCampus)" ng-options="campus as campus.CampusDescription for campus in campusesObj track by campus.CampusID"> 
         <option value="">---Please Select One---</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td><span><strong>Building:</strong></span></td> 
       <td> 
        <select id="buildingSelect"> 
         <option value=""> </option> 
         <option ng-repeat="building in buildingsObj" value="{{building.BuildingID}}">{{building.BuildingDescription}}</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td><span><strong>Date Acquired:</strong></span></td> 
       <td><input id="itemAcquiredTxt" type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><span><strong>Notes:</strong></span></td> 
       <td> 
        <textarea id="noteTxt"></textarea> 
       </td> 
      </tr> 
     </table> 

Соответствующего AngularJS используется для обновления элемента с новыми данными, закрепленным шпонками пользователя - функция вызывается, когда пользователь нажимает кнопку подтверждения:

$scope.editItem = function() { 
    var dateString = $('#itemAcquiredTxt').val(); 
    dateAcquired = new Date(dateString); 
    var invItem = { 
     ItemID: $('#itemID').val(), 
     ItemName: $('#itemNameTxt').val().trim(), 
     CategoryID: $('#categorySelect').find(":selected").val(), 
     SubCategoryID: $('#subCategorySelect').find(":selected").val(), 
     Description: $('#itemDescriptionTxt').val().trim(), 
     SerialNumber: $('#itemSerialNumberTxt').val().trim(), 
     Year: $('#itemYearTxt').val().trim(), 
     DateAcquired: dateAcquired, 
     Value: $('#itemValueTxt').val().trim(), 
     RoleID: $('#departmentSelect').find(":selected").val(), 
     Barcode: null, 
     Notes: $('#noteTxt').val().trim(), 
     Deleted: null, 
     AddedBy: null, 
     DateAdded: null, 
     ModifiedBy: null, //Added by server 
     DateModified: null, 
     DeletedBy: '', 
     DateDeleted: null, 
     CampusID: $('#campusSelect').find(":selected").val(), 
     BuildingID: $('#buildingSelect').find(":selected").val(), 
     RoomID: null 
    }; 
    $http.put("api/inventory/", invItem).success(function (data, status, headers, config) { 
     inventoryData.retrieveData(); //On success, refresh zeh data 
    }).error(function (data, status, headers, config) { 
     console.log(data); 
    }); 

    $("#dialogForm").dialog("close"); 

Почему мой код возвращает NaN в моей рабочей среде (отладка Visual Studio 2015 в IE11), когда другие сайты, такие как JSFiddle, возвращают то, что я ожидаю?

+6

Насколько вы уверены, что строка даты действительно является именно тем, что вы думаете? Вы использовали 'console.log()', чтобы выгрузить его на консоль, прежде чем использовать его для создания даты или проверки через отладчик браузера?Должно быть, что-то не так, как вы думаете. Проверьте все свои предположения! – Pointy

+0

Например: вы уверены, что есть только один '' с этим идентификатором на странице? – Pointy

+0

Довольно точно. Проверено как отладчик браузера, так и console.log. И да, есть только один вход с этим id. – Cuauhtemoc

ответ

1

Исправлена ​​проблема - на самом деле я понятия не имею, что это было.

Проблема возникла только во время обновления элемента, а не при добавлении нового, так что это должно было произойти, когда я заполнил значение элемента.

$('#itemAcquiredTxt').val(new Date(item.DateAcquired).toLocaleDateString()); 

Двигаемся console.log(item.DateAcquired) возвращается строка "2015-12-15T00: 00: 00", то .toLocaleDateString() будет преобразовать его в "2015-12-15" и проанализированный в объект Date.

Редактирование значения этого элемента всегда приведет к появлению NaN/InvalidDate при попытке преобразовать его в дату.

Мое решение было ...

$('#itemAcquiredTxt').val(item.DateAcquired.split('T')[0]); 

Не использовать Дата вообще. Теперь это работает.

Смежные вопросы