vincolante una data in angularjs utilizzando WebAPI e la data di bootstrap selettore

Dato un servizio WebApi2 che restituisce valori JSON come questo:vincolante una data in angularjs utilizzando WebAPI e la data di bootstrap selettore

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

ho bisogno la data da visualizzare nel angolare/bootstrap bound/date picker correttamente .

Ho bisogno di trasformare la data nel formato aaaa-mm-gg (senza tempo) quando lo si lega a una casella di input. Solo un puntatore ad una documentazione che spiega quale sia il modo corretto di serializzare le date dall'API a quelle angolari. Sono sicuro che effectiveDate dovrebbe essere effettivamente un oggetto Date e non uno string.

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

Per completezza, il servizio di restituzione dei valori JSON assomiglia a questo:

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

Il metodo di controllo definisce in questo modo:

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

fonte

2014-10-08 Jim

Converti la data in formato stringa in oggetto Data JavaScript. E il resto dovrebbe funzionare bene. Puoi utilizzare il normale JavaScript per la gestione delle date in JavaScript, ma è meglio usare una libreria che gestisca la compatibilità tra browser. Puoi provare moment.js.La variabile di validità data di validità deve contenere l'oggetto Date. –

Se si desidera utilizzare i componenti bootstrap in angolare quindi devi creare una direttiva o puoi riutilizzare alcune esistenti come http://angular-ui.github.io/bootstrap/#/datepicker

Esempio sull'utilizzo data bootstrap raccoglitrice con angolare:

<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

fonte

2014-10-08 05:52:54

modulo Utilizzo filtro angolare Date filter in angularjs

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

fonte

2014-10-08 05:55:37

Sono corsa in esatta stesso problema e alla fine risolto scrivendo a n Angolare http interceptor. Analizza la risposta del server e converte tutte le stringhe Datetime con il formato ISO/UTC in oggetti di data JavaScript effettivi. Ciò consente il binding diretto a datepicker e risolve i problemi di convalida.

Ecco il codice angolare sul lato client, costituito da un fabbrica (l'intercettatore) e il config parte per fornire l'intercettore http:

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

Sul lato server ho configurato Newtonsoft.Json serializzare date utilizzando il formato ISO con UTC fuso orario, che è il formato I test contro l'intercettore:

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

L'intercettore è per fortuna basato sul codice da Automatic JSON date parsing with AngularJS e AngularJS HTTP Date Interceptor Factory.

fonte

2015-10-30 18:15:44 Mobiletainment

vincolante una data in angularjs utilizzando WebAPI e la data di bootstrap selettore

risposta

Problemi correlati