Bindung ein Datum in AngularJS mit WebAPI und die Bootstrap-Datumsauswahl

einen WebApi2 Service Da json Werte wie folgt zurückgibt:Bindung ein Datum in AngularJS mit WebAPI und die Bootstrap-Datumsauswahl

{ 
    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" 
}

ich das Datum müssen in der gebundenen Winkel/Bootstrap/date picker korrekt angezeigt werden .

Ich muss das Datum in das Format JJJJ-MM-TT (ohne die Zeit) umwandeln, wenn es an ein Eingabefeld gebunden wird. Nur ein Zeiger auf einige Dokumentation erklärt, was die richtige Art, Daten von der API zu eckigen zu serialisieren. Ich bin mir sicher, dass effectiveDate eigentlich ein Date Objekt und kein string sein sollte.

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

Für Vollständigkeit, der Dienst die json Werte zurückgegeben werden wie folgt aussieht:

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; }); 
     } 
    }; 
}]);

Die Controller-Methode nennt es wie folgt aus:

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

Quelle

2014-10-08 Jim

Konvertieren Sie das Datum im String-Format in JavaScript Date-Objekt. Und der Rest sollte gut funktionieren. Sie können normales JavaScript für die Verarbeitung von Datum und Uhrzeit in JavaScript verwenden, es ist jedoch besser, eine Bibliothek zu verwenden, die die Browserkompatibilität unterstützt. Sie können moment.js ausprobieren.Ihre Gültigkeitsbereich-Variable effectiveDate sollte das Date-Objekt enthalten. –

Wenn Sie Bootstrap-Komponenten verwenden möchten, in eckig dann müssen Sie eine Direktive erstellen, oder Sie können einige vorhandene wie http://angular-ui.github.io/bootstrap/#/datepicker

wiederverwenden

Beispiel, wie Bootstrap Datumsauswahl mit Winkeln verwenden:

<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

Quelle

2014-10-08 05:52:54

Verwendung Winkelfiltermodul Date filter in angularjs

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

Quelle

2014-10-08 05:55:37

ich in die exakten lief das gleiche Problem und löste es schließlich durch das Schreiben eines n Angular http interceptor. Es analysiert die Antwort des Servers und konvertiert alle Datetime-Zeichenfolgen im ISO/UTC-Format in tatsächliche JavaScript-Datumsobjekte. Dies ermöglicht direkte Bindung an den Datumsauswahl und löst Validierungsprobleme.

Hier ist das clientseitige Angular-Code, bestehend aus einer Fabrik (der Interceptor) und der Config Teil des http-Auffänger für die Bereitstellung von:

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 
    }]);

Auf der Serverseite I Newtonsoft.Json konfiguriert zum Serialisieren Reisedaten ISO-Format mit UTC Zeitzone, mit der das Format I-Test gegen den Abfangjäger ist:

public static class WebApiConfig 
{ 
    public static void Register(HttpConfiguration config) 
    { 
     // Web API configuration and services 
     var formatters = GlobalConfiguration.Configuration.Formatters; 
     var jsonFormatter = formatters.JsonFormatter; 
     var settings = jsonFormatter.SerializerSettings; 

     // serialize dates into ISO format with UTC timezone 
     settings.DateFormatHandling = DateFormatHandling.IsoDateFormat; 
     settings.DateTimeZoneHandling = DateTimeZoneHandling.Utc; 
     settings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 
    } 
}

Der Abfangjäger basiert dankenswerterweise auf dem Code von Automatic JSON date parsing with AngularJS und AngularJS HTTP Date Interceptor Factory.

Quelle

2015-10-30 18:15:44 Mobiletainment

Bindung ein Datum in AngularJS mit WebAPI und die Bootstrap-Datumsauswahl

Antwort

Verwandte Themen