पार्स दिनांक स्ट्रिंग कोणीय यूआई बूटस्ट्रैप datepicker

Question

मैं कोणीय यूआई बूटस्ट्रैप datepicker उपयोग कर रहा हूँ लोड हो रहा है जब: https://angular-ui.github.io/bootstrap/#/datepicker

जब मैं डेटा सर्वर से प्राप्त का उपयोग कर प्रपत्र प्रस्तुत करना, वहाँ datetime क्षेत्रों के साथ समस्या है। मेरे इनपुट datepicker इस तरह दिखता है:

{  
    ... 
    startedAt: "2015-05-29T02:00:00+0200" 
} 

जब मैं मॉडल $scope.item = response; के जवाब डेटा असाइन, datepicker इनपुट क्षेत्र सही ढंग से प्रदान की गई है (सही दिनांक है:

<form name="itemForm"> 
    <input type="datetime" class="form-control" id="startedAt" name="startedAt" 
      ng-model="item.startedAt" 
      ng-click="open($event, 'startedAt')" 
      uib-datepicker-popup="yyyy-MM-dd" 
      is-open="datepickers.startedAt" 
    /> 
</form> 

मेरे सर्वर JSON स्ट्रिंग के रूप प्रतिक्रिया datetime रिटर्न चयनित और यह चयनित प्रारूप में ठीक से स्वरूपित है)। समस्या यह है कि सत्यापन पास नहीं होता है। मैं:

itemForm.startedAt.$invalid == true 

मैंने देखा है कि datepicker क्षेत्र के लिए बाध्य डेटा Date वस्तु और नहीं स्ट्रिंग

मैं कामयाब (Date एक जब मैं datepicker से नई तिथि का चयन करें, $scope.item.startedAt है) के आसपास काम करने के लिए किया जाना चाहिए इस मुद्दे को और नियंत्रक में ऐसा करते हैं:

$scope.item = response; 
$scope.item.startedAt = new Date($scope.item.startedAt); 

यह इस तरह से काम करता है ... लेकिन मैं मैन्युअल रूप से परिवर्तित करने के लिए स्ट्रिंग हर बार जब मैं सर्वर से प्रतिक्रिया प्राप्त तारीख करना नहीं करना चाहते हैं। मैं एक निर्देश बनाने की कोशिश की, तो यह मेरे लिए ng-model धर्मान्तरित कि मैं datepicker इनपुट क्षेत्र के लिए आवंटित कर सकते हैं:

.directive("asDate", function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, modelCtrl) { 

      modelCtrl.$formatters.push(function (input) { 

       var transformedInput = new Date(input); 

       if (transformedInput != input) { 
        modelCtrl.$setViewValue(transformedInput); 
        modelCtrl.$render(); 
       } 

       return transformedInput; 
      }); 
     } 
    } 
}) 

खैर यह काम करता है, क्योंकि अब मैं मेरे विचार में Date वस्तु, जब मैं उत्पादन मॉडल देख सकते हैं : {{item.startedAt}}। हालांकि अभी भी सत्यापन विफल रहता है! मुझे संदेह है कि यह मेरे साथ कुछ समस्या है कि मॉडल और दृश्य के बीच डेटा कैसे बहता है, और कैसे यूआई बूटस्ट्रैप इसमें हुक करता है।

इसके अलावा जब मैं $formatters.push से $formatters.unshift करने के लिए अपने निर्देश बदलने के लिए, सत्यापन ठीक से काम करता है, लेकिन datepicker मेरी दिनांक स्वरूपित नहीं है

Answer 1

इस जानबूझकर है कोणीय-यूई-बूटस्ट्रैप डेटपिकर का व्यवहार (https://github.com/angular-ui/bootstrap/issues/4690), मैं कोणीय सेवा/कारखाने और moment लाइब्रेरी का उपयोग कर समाप्त हुआ।

सेवा dateConverter सभी HTTP अनुरोध/प्रतिक्रियाओं या केवल वांछित नियंत्रकों में हस्तक्षेप करने के लिए विश्व स्तर पर इंजेक्शन दिया जा सकता है।

यहां मैं रीस्ट एपीआई के अनुरोध को संभालने के लिए Restangular लाइब्रेरी का उपयोग करता हूं, इसलिए response.plain() विधि जो केवल ऑब्जेक्ट गुण लेती है, न कि पुन: परिशिष्ट विधियों/गुणों।

var Services = angular.module('app.Services', []); 

Services 
    .factory('dateConverter', ['dateFilter', function (dateFilter) { 

     var dateConverter = {}; 

     dateConverter.prepareResponse = function (response) { 
      for(prop in response.plain()) { 
       if (response.hasOwnProperty(prop)) { 
        if(moment(response[prop], moment.ISO_8601, true).isValid()) { 
         response[prop] = new Date(response[prop]); 
        } 
       } 
      } 
      return response; 
     }; 

     dateConverter.prepareRequest = function (item) { 
      for(prop in item.plain()) { 
       if (item.hasOwnProperty(prop)) { 
        if(angular.isDate(item[prop])){ 
         item[prop] = dateFilter(item[prop] , "yyyy-MM-ddTHH:mm:ssZ") 
        } 
       } 
      } 
      return item; 
     }; 

     return dateConverter; 
    }]) 
; 

Answer 2

यह कोणीय के रूप में तोड़ दिया (insted का अच्छी तरह से formattet yyyy-MM-dd मैं आईएसओ स्ट्रिंग इनपुट के अंदर देखें)। यूआई। बूटस्ट्रैप v0.13.2 (8-2-2015) 0.13.1 कार्यों में डाउनग्रेडिंग, जहां मैं आज अटक गया हूं।

Wesleycho यह जानबूझकर किया गया था https://github.com/angular-ui/bootstrap/issues/4690

मैं अन्य तिथि पिकर कि तार का समर्थन के लिए तैयार हूँ अगर कोई एक सुझाव

... जल्द ही इस पोस्ट करने के बाद मैं नीचे एक गैर कोणीय चला गया है कहते हैं जिस पथ पर मुझे गर्व नहीं है, लेकिन यह एचटीएमएल 5 प्रकार = "दिनांक" और यूआईबी-डेटपिकर-पॉपअप दोनों के लिए काम करता है। मेरे पास एक नियमित अभिव्यक्ति है जो निर्धारित करती है कि क्या एक स्ट्रिंग मैंने देखा है कि दो धारावाहिक दिनांक प्रारूपों में से एक जैसा दिखता है, और फिर मेरे पास एक जर्सन पेड़ को पार करने के लिए एक पुनरावर्ती जावास्क्रिप्ट फ़ंक्शन है और उन तारों को दिनांक() के साथ प्रतिस्थापित करें। आप $ scope (या viewmodel) डालने से पहले इसे कॉल करेंगे ...

$http.get("../api/comm/" + commId 
    ).success(function (resp) { 
     fixDates(resp); 
     vm.comm = resp; 
    }); 

(मैं स्ट्रिंग लंबाई की जांच की जरूरत नहीं है, लेकिन मैं समझ यह regex नहीं चलाकर कुछ CPU चक्र को छोड़ होगा यदि स्ट्रिंग स्पष्ट रूप से एक तारीख नहीं है)

//2015-10-01T00:00:00-04:00 
//2015-11-20T18:15:56.6229516-05:00 
var isDate = new RegExp("\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d{7})?-\\d{2}:00"); 

function fixDates(json) { 
    for (i in json) 
     if (typeof (json[i]) == "object") 
      fixDates(json[i]); 
     else if (typeof (json[i]) == "string" && (json[i].length == 25 || json[i].length == 33) && isDate.test(json[i])) 
      json[i] = new Date(json[i]); 
}; 

Answer 3

आप इस

RestangularConfigurer 
    .addElementTransformer('<RESTRESOURCENAME>', false, function (element) { 
     element.createDate = new Date(element.createDate); 
     return element; 
    })