Comment formater une date Microsoft JSON ?

Question

Je fais ma première tentative pour Ajax avec jQuery. J'obtiens mes données sur ma page, mais j'ai quelques problèmes avec les données JSON qui sont retournées pour les types de données de date. En fait, je reçois une chaîne de caractères qui ressemble à ceci :

/Date(1224043200000)/

De la part d'une personne totalement novice en matière de JSON - Comment puis-je formater ceci en un format de date court ? Cela doit-il être géré quelque part dans le code jQuery ? J'ai essayé l'option jQuery.UI.datepicker plugin utilisant $.datepicker.formatDate() sans succès.

Pour info : voici la solution que j'ai trouvée en utilisant une combinaison des réponses données ici :

function getMismatch(id) {
  $.getJSON("Main.aspx?Callback=GetMismatch",
    { MismatchId: id },

    function (result) {
      $("#AuthMerchId").text(result.AuthorizationMerchantId);
      $("#SttlMerchId").text(result.SettlementMerchantId);
      $("#CreateDate").text(formatJSONDate(Date(result.AppendDts)));
      $("#ExpireDate").text(formatJSONDate(Date(result.ExpiresDts)));
      $("#LastUpdate").text(formatJSONDate(Date(result.LastUpdateDts)));
      $("#LastUpdatedBy").text(result.LastUpdateNt);
      $("#ProcessIn").text(result.ProcessIn);
    }
  );

  return false;
}

function formatJSONDate(jsonDate) {
  var newDate = dateFormat(jsonDate, "mm/dd/yyyy");
  return newDate;
}

Cette solution a obtenu mon objet de la méthode de rappel et a affiché les dates sur la page correctement en utilisant la bibliothèque de format de date.

Answer 1

eval() n'est pas nécessaire. Cela fonctionnera très bien :

var date = new Date(parseInt(jsonDate.substr(6)));

Le site substr() supprime la fonction /Date( et la parseInt() récupère le nombre entier et ignore le )/ à la fin. Le nombre résultant est passé dans la fonction Date constructeur.

---

J'ai intentionnellement laissé de côté le radix (le second argument de la fonction parseInt ) ; voir mon commentaire ci-dessous .

Aussi, je suis tout à fait d'accord avec Commentaire de Rory : Les dates ISO-8601 sont préférées à cet ancien format - ce format ne devrait donc généralement pas être utilisé pour les nouveaux développements.

Pour les dates JSON au format ISO-8601, il suffit de passer la chaîne dans la fonction Date constructeur :

var date = new Date(jsonDate); //no ugly parsing needed; full timezone support

Answer 2

Vous pouvez l'utiliser pour obtenir une date à partir de JSON :

var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));

Et ensuite vous pouvez utiliser a JavaScript Date Format script (1,2 KB une fois minifié et gzippé) pour l'afficher comme vous le souhaitez.

Answer 3

Pour ceux qui utilisent Newtonsoft Json.NET Pour savoir comment procéder, consultez le site JSON natif dans IE8, Firefox 3.5 plus Json.NET .

La documentation sur la modification du format des dates écrite par Json.NET est également utile : Sérialisation des dates avec Json.NET

Pour ceux qui sont trop paresseux, voici les étapes rapides. Comme JSON a une implémentation de DateTime peu rigoureuse, vous devez utiliser la fonction IsoDateTimeConverter() . Notez que depuis Json.NET 4.5, le format de date par défaut est ISO, donc le code ci-dessous n'est pas nécessaire.

string jsonText = JsonConvert.SerializeObject(p, new IsoDateTimeConverter());

Le JSON sera transmis sous forme de

"fieldName": "2009-04-12T20:44:55"

Enfin, un peu de JavaScript pour convertir la date ISO en une date JavaScript :

function isoDateReviver(value) {
  if (typeof value === 'string') {
    var a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)(?:([\+-])(\d{2})\:(\d{2}))?Z?$/.exec(value);
      if (a) {
        var utcMilliseconds = Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]);
        return new Date(utcMilliseconds);
      }
  }
  return value;
}

Je l'ai utilisé comme ceci

$("<span />").text(isoDateReviver(item.fieldName).toLocaleString()).appendTo("#" + divName);

Answer 4

L'exemple original :

/Date(1224043200000)/  

ne reflète pas le formatage utilisé par WCF lors de l'envoi de dates via WCF REST en utilisant la sérialisation JSON intégrée. (au moins sur .NET 3.5, SP1)

J'ai trouvé la réponse ici utile, mais une légère modification de la regex est nécessaire, car il semble que le décalage du fuseau horaire GMT soit ajouté au nombre retourné (depuis 1970) dans le JSON WCF.

Dans un service de WCF j'ai :

[OperationContract]
[WebInvoke(
    RequestFormat = WebMessageFormat.Json,
    ResponseFormat = WebMessageFormat.Json,
    BodyStyle = WebMessageBodyStyle.WrappedRequest
    )]
ApptVisitLinkInfo GetCurrentLinkInfo( int appointmentsId );

ApptVisitLinkInfo est défini simplement :

public class ApptVisitLinkInfo {
    string Field1 { get; set; }
    DateTime Field2 { get; set; }
    ...
}

Lorsque "Field2" est renvoyé en Json par le service, la valeur est :

/Date(1224043200000-0600)/

Remarquez le décalage du fuseau horaire inclus dans la valeur.

La regex modifiée :

/\/Date\((.*?)\)\//gi

Elle est légèrement plus rapide et saisit tout ce qui se trouve entre les parenthèses, et pas seulement le premier chiffre. L'heure résultante depuis 1970, plus le décalage du fuseau horaire, peuvent tous être introduits dans l'eval pour obtenir un objet date.

La ligne de JavaScript qui en résulte pour le remplacement est la suivante :

replace(/\/Date\((.*?)\)\//gi, "new Date($1)");

Answer 5

Ne vous répétez pas - automatisez la conversion de date en utilisant $.parseJSON()

Les réponses à votre message fournissent une conversion manuelle des dates en dates JavaScript. J'ai étendu la fonction de jQuery $.parseJSON() juste un peu, pour qu'il puisse automatiquement analyser les dates quand vous le lui demandez. Il traite les dates formatées en ASP.NET ( /Date(12348721342)/ ) ainsi que les dates au format ISO ( 2010-01-01T12.34.56.789Z ) qui sont prises en charge par les fonctions JSON natives des navigateurs (et des bibliothèques comme json2.js).

De toute façon. Si vous ne voulez pas répéter votre code de conversion de date encore et encore, je vous suggère de lire cet article de blog et obtenir le code qui vous rendra la vie un peu plus facile.