Le blog

Lorsque l’on travaille sur un projet WEB.API couplé avec AngularJS, il est très fréquent de se retrouver avec quelques erreurs de sérialisation de date, notamment l’erreur des dates 1 jour ou une heure dans le passé lorsque l'on récupère les données côté serveur. Cette erreur se produit lors de la sérialisation des objets date en string et provient d’une désynchronisation entre la time zone locale du client et celle du serveur ce qui génère des dates auxquelles il manque 1 heure voir 1 journée.

Pour résoudre ce problème : rien de plus simple. Lors des événements précédent la sérialisation de votre objet de type Date, basculez votre objet au format local à l’aide de la fonction toLocaleFormat (documentation en ligne)

Date maDate = new Date() ;
$scope.dateATransmettre = maDate.toLocaleFormat('%Y-%m-%d');

Le principal problème se pose lorsque vous utilisez un des composants Bootstrap de type DatePicker (documentation en ligne : http://angular-ui.github.io/bootstrap/#/datepicker). Lorsqu’un événement post est effectué sur votre page, vous n’avez pas forcément la main sur l’ensemble des données (le DataBinding opérant automatiquement pour la récupération des données). Ou bien suivant la structure de votre modèle de données, l’application de la fonction toLocaleFormat à l’ensemble des objets de type Date pourrait se révéler fastidieuse, car nécessitant de multiples boucles pour atteindre les données cibles. Pour cela rien de plus simple, il vous suffit de modifier le DateTimeZoneHandling de votre sérialiseur Json au sein de votre WebApiConfig.

public static class WebApiConfig
{
   public static void Register(HttpConfiguration config)
   {
      // Web API configuration and services

      // Web API routes
      config.MapHttpAttributeRoutes();

      config.Routes.MapHttpRoute(
         name: "DefaultApi",
         routeTemplate: "api/{controller}/{action}/{id}",
         defaults: new { id = RouteParameter.Optional }
      );

      var json = config.Formatters.JsonFormatter;

      // Gestion des dates locales de manière automatique.
      json.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local;
   }
}