बाध्यकारी WebAPI का उपयोग कर AngularJS की कोई तिथि और बूटस्ट्रैप दिनांक पिकर

एक WebApi2 सेवा है कि इस तरह json मूल्यों रिटर्न को देखते हुए:बाध्यकारी WebAPI का उपयोग कर AngularJS की कोई तिथि और बूटस्ट्रैप दिनांक पिकर

{ 
    id: 1109, 
    effectiveDate: "2014-10-05T00:00:00", // the date is a string (newtonsoft.json) 
    text: "Duis et rhoncus nibh. Cras rhoncus cursus diam", 
    fundSource: "Test" 
}

मैं तारीख जरूरत बाध्य कोणीय/बूटस्ट्रैप में प्रदर्शित करने के/date picker सही ढंग से ।

मुझे दिनांक को इनपुट बॉक्स में बाध्य करते समय दिनांक yyyy-mm-dd (समय के बिना) प्रारूप में बदलने की आवश्यकता है। कुछ दस्तावेज के लिए बस एक सूचक जो समझाता है कि एपीआई से कोणीय तक सीरियलाइज़ करने का सही तरीका क्या है। मुझे यकीन है कि effectiveDate वास्तव में Date ऑब्जेक्ट होना चाहिए और string नहीं होना चाहिए।

<input class="form-control" 
     type="text" 
     name="effectiveDate" 
     ng-model="consultation.effectiveDate" 
     data-date-picker="yyyy-mm-dd" 
     placeholder="Date" />

completness के लिए, json मूल्यों लौटने सेवा इस तरह दिखता है:

app.factory('Service', ['$http', '$location', '$interpolate', function ($http, $location, $interpolate) { 
    return { 
     get: function (account) { 
      var url = 'api/consultations/{account}'; 
      return $http 
       .get(Api.format(url, { account: account })) 
       .then(function (response) { return response.data; }); 
     } 
    }; 
}]);

नियंत्रक विधि इसे इस तरह कहता है:

service.get($scope.urlData.account).then(function(consultations) { 
    $scope.consultations = consultations; 
});

स्रोत

2014-10-08 Jim

जावास्क्रिप्ट दिनांक ऑब्जेक्ट में स्ट्रिंग प्रारूप में दिनांक को कनवर्ट करें। और बाकी को ठीक काम करना चाहिए। आप जावास्क्रिप्ट में डेट-टाइम हैंडलिंग के लिए सामान्य जावास्क्रिप्ट का उपयोग कर सकते हैं लेकिन क्रॉस ब्राउज़र संगतता को संभालने वाली कुछ लाइब्रेरी का उपयोग करना बेहतर है। आप moment.js कोशिश कर सकते हैं।आपके दायरे परिवर्तनीय प्रभावी दिनांक दिनांक वस्तु होना चाहिए। –

आप में बूटस्ट्रैप घटकों उपयोग करना चाहते हैं कोणीय तो आपको निर्देश बनाना होगा या आप http://angular-ui.github.io/bootstrap/#/datepicker

जैसे कुछ मौजूदा उपयोग कर सकते हैं 63,210

उदाहरण कैसे कोणीय साथ बूटस्ट्रैप दिनांक पिकर का उपयोग करें:

<body ng-app="app" > 

    <div class="form-horizontal" ng-controller="ctrl"> 
     <input type="text" datepicker-popup="MM/dd/yyyy" ng-model="consultation.effectiveDate" datepicker-options="dateOptions" date-disabled="" ng-required="true" /> 
    </div> 
</body>

js:

app.controller('ctrl', function ($scope, $timeout) { 

$scope.consultation = { 
    id: 1109, 
    effectiveDate: "2014-10-05T00:00:00", // the date is a string (newtonsoft.json) 
    text: "Duis et rhoncus nibh. Cras rhoncus cursus diam", 
    fundSource: "Test" 
    }; 

    $scope.dateOptions = { 
    'starting-day': 1 
    }; 
});

http://plnkr.co/edit/veOWWlBrKdL5CaMJf61h?p=preview

स्रोत

2014-10-08 05:52:54

कोणीय फिल्टर का प्रयोग करें मॉड्यूल Date filter in angularjs

{{ effectiveDate | date:'yyyy-MM-dd' }}

स्रोत

2014-10-08 05:55:37

मैं सही में भाग एक ही समस्या और अंततः इसे लिखकर हल किया एन कोणीय http interceptor। यह सर्वर की प्रतिक्रिया को पार करता है और आईएसओ/यूटीसी प्रारूप के साथ सभी जावास्क्रिप्ट स्ट्रिंग को वास्तविक जावास्क्रिप्ट डेट ऑब्जेक्ट्स में परिवर्तित करता है। यह डेटपिकर को सीधे बाध्यकारी की अनुमति देता है और सत्यापन मुद्दों को हल करता है।

यहाँ क्लाइंट साइड कोणीय कोड है, एक कारखाने (इंटरसेप्टर) और http इंटरसेप्टर प्रदान करने के लिए config भाग से मिलकर: सर्वर साइड पर

angular.module("app") 
    .factory('dateInterceptor', function() { 
     var regexIsoUtc = /^(\d{4}|\+\d{6})(?:-(\d{2}))(?:-(\d{2}))(?:T(\d{2})):(\d{2}):(\d{2})Z$/; 

     function matchDate(dateString) { 
      if (dateString.length === 20) { 
       return dateString.match(regexIsoUtc); 
      } 
      return false; 
     }; 

     function convertDateStringsToDates(object) { 
      // ensure that we're processing an object 
      if (typeof object !== "object") { 
       return object; 
      } 

      for (var key in object) { 
       if (!object.hasOwnProperty(key)) { 
        continue; 
       } 
       var value = object[key]; 

       // check for string properties with a date format 
       if (typeof value === "string" && matchDate(value)) { 
        var date = new Date(value); // create the date from the date string 
        object[key] = date; // we're mutating the response directly 
       } else if (typeof value === "object") { 
        convertDateStringsToDates(value); // recurse into object 
       } 
      } 
      return null; 
     } 

     var interceptor = { 
      'response': function (response) { 
       if (response.data) { 
        convertDateStringsToDates(response.data); 
       } 
       return response; 
      } 
     }; 
     return interceptor; 
    }) 

    .config(["$httpProvider", function ($httpProvider) { 
     $httpProvider.interceptors.push('dateInterceptor'); // intercept responses and convert date strings into real dates 
    }]);

मैं Newtonsoft.Json कॉन्फ़िगर किया गया क्रमानुसार करने आईएसओ प्रारूप का उपयोग कर दिनांकों UTC समय क्षेत्र, जो प्रारूप मैं इंटरसेप्टर में के खिलाफ परीक्षण है साथ:

इंटरसेप्टर Automatic JSON date parsing with AngularJS और AngularJS HTTP Date Interceptor Factory से कोड पर आधारित है।

स्रोत

2015-10-30 18:15:44 Mobiletainment

बाध्यकारी WebAPI का उपयोग कर AngularJS की कोई तिथि और बूटस्ट्रैप दिनांक पिकर

उत्तर

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