[英]Why is this function returning 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對象后,它會給我“無效日期”。
好的...所以我想通過將年,月和日作為數字 - 其他構造函數之一傳遞來創建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
我嘗試用破折號分割日期文本框中的字符串,並使用Number和parseInt將字符串轉換為數字 - 但兩者都給了我一個NaN。 我仔細檢查了字符串值,似乎沒有錯:分別在分割項目上“2013”,“12”,“15”。
我對自己說...也許我的代碼很糟糕,並在JSFiddle上試過它https://jsfiddle.net/jrxg40js/
但正如你可以看到的那樣,在文本中輸入日期並按下按鈕后,它就可以了!
下面是相關的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(IE11上的Visual Studio 2015調試)當其他網站(如JSFiddle)返回我期望的內容時?
解決了這個問題 - 我真的不知道它到底是什么。
問題只發生在更新項目期間,而不是在添加新項目時 - 所以必須在我填充元素值時出現。
$('#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]);
根本不使用日期。 現在它有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.