At first, this may seem like many other questions that have already been asked regarding NaN in JavaScript, but I assure you.
I have this piece of code that converts captures a value from a text field and converts it to a date after clicking a button in the form:
var dateString = $('#itemAcquiredTxt').val();
The itemAcquiredTxt text field will indicate the value "2013-12-15" (format YYYY-MM-DD) taken from the database call:
$('#itemAcquiredTxt').val(new Date(item.DateAcquired).toLocaleDateString());
After creating a new Date object, it gives me an "Invalid Date".
OK ... So I thought about creating a Date object, passing it the year, month, and day as numbers - one of its other constructors.
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
I tried to split a string in a dash date text box and convert the string to a number using both Number and parseInt, but both gave me NaN. I double-checked the values of the strings, and nothing seemed wrong: "2013", "12", "15" for the separated elements, respectively.
I told myself ... maybe my code is bad and tried it on JSFiddle https://jsfiddle.net/jrxg40js/
But, as you can see there, after placing the date in the text and pressing the button, it works!
Here is the relevant HTML code
<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>
The relevant AngularJS function used to update an element with new data entered by the user - the function is called when the user presses the confirmation button:
$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");
Why does my code return NaN in my production environment (Visual Studio 2015 debugging in IE11) when other sites, such as JSFiddle, return what I expect?