2015-12-15 11 views
7

सबसे पहले यह जावास्क्रिप्ट में NaN के बारे में पहले से पूछे गए कई अन्य प्रश्नों की तरह प्रतीत होता है, लेकिन मैं आपको आश्वस्त करता हूं कि यह नहीं है।यह फ़ंक्शन 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()); 

नई तिथि वस्तु बनाने के बाद यह मुझे देता है" अवैध तिथि "।

ठीक है ... तो मैंने साल, महीने और दिन को संख्याओं के रूप में पास करके वस्तु वस्तु बनाने का विचार किया - इसके अन्य रचनाकारों में से एक।

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/
पर यह कोशिश की लेकिन जैसा कि आप वहाँ देख सकते हैं, पाठ में एक तिथि रखने और बटन दबाने के बाद, यह काम करता है!

यहाँ प्रासंगिक एचटीएमएल कोड

<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 उपयोगकर्ता द्वारा keyed नए डेटा से आइटम अद्यतन करने के लिए इस्तेमाल किया समारोह - जब कोई उपयोगकर्ता एक पुष्टिकरण बटन दबाता समारोह कहा जाता हो जाता है:

$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"); 

मेरा कोड मेरे कामकाजी माहौल (विजुअल स्टूडियो 2015 आईई 11 पर डिबगिंग) पर NaN क्यों लौटा रहा है, जब जेएसएफडल जैसी अन्य साइटें जो मैं उम्मीद कर रहा हूं वह लौट रही है?

+6

आप कितने निश्चित हैं कि डेट स्ट्रिंग वास्तव में वही है जो आपको लगता है? क्या आपने इसे बनाने के लिए इसे उपयोग करने से पहले कंसोल पर डंप करने के लिए 'console.log()' का उपयोग किया है, या ब्राउज़र डीबगर के माध्यम से जांच कर रहा है?यह मामला होना चाहिए कि ऐसा कुछ नहीं हो रहा है जिस तरह से आप सोचते हैं। अपनी सभी धारणाओं को सत्यापित करें! – Pointy

+0

उदाहरण के लिए: क्या आप निश्चित हैं कि पृष्ठ पर उस आईडी के साथ केवल एक ' 'है? – Pointy

+0

सुंदर कुछ। ब्राउज़र डीबगर और console.log दोनों की जांच की। और हाँ, उस आईडी के साथ केवल एक इनपुट है। – Cuauhtemoc

उत्तर

1

समस्या को हल किया गया - जो वास्तव में मुझे नहीं पता कि यह भी क्या था।

समस्या केवल आइटम के अपडेट के दौरान हुई, न कि एक नया जोड़ने के दौरान - इसलिए जब मैं तत्व मान को पॉप्युलेट कर रहा था तब यह आना पड़ा।

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

कर एक console.log(item.DateAcquired) एक स्ट्रिंग "2015-12-15T00: 00: 00" लौट आए, .toLocaleDateString() यह करने के लिए "2015/12/15" और एक तिथि वस्तु में पार्स बदल जाएगा।

उस तत्व के मूल्य को संपादित करना हमेशा इसकी स्ट्रिंग को किसी दिनांक में परिवर्तित करने का प्रयास करते समय NaN/InvalidDate में होगा।

मेरे समाधान था ...

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

बिल्कुल तिथि का उपयोग नहीं। अब यह काम करता है।

संबंधित मुद्दे