为什么这个函数返回NaN
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 ?
文本框项AcquiredTxt的值为"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"answers"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(Visual Studio 2015在IE11上调试),而其他站点(如JSFiddle)正在返回我期望的结果?
修复了这个问题——我真的不知道它是什么。
这个问题只发生在项目的更新过程中,而不是在添加新项目时——所以它必须在我填充元素值时出现。
$('#itemAcquiredTxt').val(new Date(item.DateAcquired).toLocaleDateString());
执行console.log(item.DateAcquired)
时返回字符串"2015-12-15T00:00",.toLocaleDateString()会将其转换为"2015-12-15"并解析为Date对象。
当试图将该元素的字符串转换为日期时,编辑该元素的值总是会导致NaN/InvalidDate。
我的解决方案是。。。
$('#itemAcquiredTxt').val(item.DateAcquired.split('T')[0]);
根本不使用日期。现在它起作用了。
- 如何防止Math.max()返回NaN
- 尝试求和时,在我的表的页脚中返回$NaN
- 为什么Math.pow(1,无穷大)返回NaN
- JavaScript:返回NaN(第2部分)
- 为什么这个代码返回NaN
- Protractor-分配给element.all.locator.count的变量返回NaN why
- javascript 在求和时返回 NaN
- 计算地理位置距离返回 NaN
- nan在C++中是什么意思?为什么pow(-4,-2.1)返回-nan
- 货币字段上的 parseInt 返回 NaN
- Javascript:解析csv中的字符串返回NaN(不是数字)
- JS脚本返回NaN
- 解析html td返回NaN
- Javascript函数返回NaN
- 在Javascript中计算日期会返回NaN-NaN-NaN
- 如果我对索引进行硬编码,它会按预期工作,为什么这个增量器会返回NAN
- new Date返回NaN或从服务器日期()开始的错误时间
- 变量递增返回 NaN
- 为什么我的基于约简的平均值函数返回 NaN
- Javascript-将字符串转换为Int会返回NaN错误