jquery - serialize - rest date format json




Comment formater une date Microsoft JSON? (20)

Actualisé

Nous avons une bibliothèque d'interface utilisateur interne qui doit gérer à la fois le format JSON intégré ASP.NET de Microsoft, comme /Date(msecs)/ , interrogé ici à l'origine, et la plupart des formats de date JSON, y compris JSON.NET, comme 2014-06-22T00:00:00.0 . En outre, nous devons faire face à l'incapacité de oldIE à faire face à tout sauf 3 décimales .

Nous détectons d'abord le type de date que nous consommons, l'analysons dans un objet JavaScript Date normal, puis le formateons.

1) Détecter le format de date Microsoft

// Handling of Microsoft AJAX Dates, formatted like '/Date(01238329348239)/'
function looksLikeMSDate(s) {
    return /^\/Date\(/.test(s);
}

2) Détecter le format de date ISO

var isoDateRegex = /^(\d\d\d\d)-(\d\d)-(\d\d)T(\d\d):(\d\d):(\d\d)(\.\d\d?\d?)?([\+-]\d\d:\d\d|Z)?$/;

function looksLikeIsoDate(s) {
    return isoDateRegex.test(s);
}

3) Parse MS format de date:

function parseMSDate(s) {
    // Jump forward past the /Date(, parseInt handles the rest
    return new Date(parseInt(s.substr(6)));
}

4) Analyser le format de date ISO.

Nous avons au moins un moyen de nous assurer que nous traitons des dates ISO standard ou des dates ISO modifiées pour toujours avoir trois millisecondes ( voir ci-dessus ), donc le code est différent en fonction de l'environnement.

4a) Analyser le format de date ISO standard, faire face aux problèmes de oldIE:

function parseIsoDate(s) {
    var m = isoDateRegex.exec(s);

    // Is this UTC, offset, or undefined? Treat undefined as UTC.
    if (m.length == 7 ||                // Just the y-m-dTh:m:s, no ms, no tz offset - assume UTC
        (m.length > 7 && (
            !m[7] ||                    // Array came back length 9 with undefined for 7 and 8
            m[7].charAt(0) != '.' ||    // ms portion, no tz offset, or no ms portion, Z
            !m[8] ||                    // ms portion, no tz offset
            m[8] == 'Z'))) {            // ms portion and Z
        // JavaScript's weirdo date handling expects just the months to be 0-based, as in 0-11, not 1-12 - the rest are as you expect in dates.
        var d = new Date(Date.UTC(m[1], m[2]-1, m[3], m[4], m[5], m[6]));
    } else {
        // local
        var d = new Date(m[1], m[2]-1, m[3], m[4], m[5], m[6]);
    }

    return d;
}

4b) Parse ISO format avec une décimale fixe de trois millisecondes - beaucoup plus facile:

function parseIsoDate(s) {
    return new Date(s);
}

5) Formatez-le:

function hasTime(d) {
    return !!(d.getUTCHours() || d.getUTCMinutes() || d.getUTCSeconds());
}

function zeroFill(n) {
    if ((n + '').length == 1)
        return '0' + n;

    return n;
}

function formatDate(d) {
    if (hasTime(d)) {
        var s = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
        s += ' ' + d.getHours() + ':' + zeroFill(d.getMinutes()) + ':' + zeroFill(d.getSeconds());
    } else {
        var s = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
    }

    return s;
}

6) Attachez tout ensemble:

function parseDate(s) {
    var d;
    if (looksLikeMSDate(s))
        d = parseMSDate(s);
    else if (looksLikeIsoDate(s))
        d = parseIsoDate(s);
    else
        return null;

    return formatDate(d);
}

L'ancienne réponse ci-dessous est utile pour lier cette mise en forme de date à l'analyse JSON de jQuery afin d'obtenir des objets Date au lieu de chaînes, ou si vous êtes toujours bloqué dans jQuery <1.5.

Vieille réponse

Si vous utilisez la fonction Ajax de jQuery 1.4 avec ASP.NET MVC, vous pouvez convertir toutes les propriétés DateTime en objets Date avec:

// Once
jQuery.parseJSON = function(d) {return eval('(' + d + ')');};

$.ajax({
    ...
    dataFilter: function(d) {
        return d.replace(/"\\\/(Date\(-?\d+\))\\\/"/g, 'new $1');
    },
    ...
});

Dans jQuery 1.5, vous pouvez éviter de surcharger globalement la méthode parseJSON en utilisant l'option convertisseurs dans l'appel Ajax.

http://api.jquery.com/jQuery.ajax/

Malheureusement, vous devez passer à l'ancienne route d'évaluation afin d'obtenir des dates à analyser globalement sur place - sinon vous devez les convertir plus au cas par cas après l'analyse.

Je prends mon premier crack à Ajax avec jQuery. J'obtiens mes données sur ma page, mais j'ai des problèmes avec les données JSON retournées pour les types de données Date. Fondamentalement, je reçois une chaîne qui ressemble à ceci:

/Date(1224043200000)/

De quelqu'un de totalement nouveau à JSON - Comment puis-je formater ceci à un format de date courte? Cela devrait-il être traité quelque part dans le code jQuery? J'ai essayé le plugin jQuery.UI.datepicker utilisant $.datepicker.formatDate() sans aucun succès.

FYI: Voici la solution que j'ai trouvée en utilisant une combinaison de réponses 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 affiché correctement les dates sur la page en utilisant la bibliothèque de format de date.


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

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

En tous cas. 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 d'obtenir le code qui vous facilitera la vie.


Ajoutez le plugin jQuery UI dans votre page:

function DateFormate(dateConvert) {
    return $.datepicker.formatDate("dd/MM/yyyy", eval('new ' + dateConvert.slice(1, -1)));
};

C'est frustrant. Ma solution était d'analyser le "/ et /" de la valeur générée par JavaScriptSerializer d'ASP.NET afin que, bien que JSON ne peut pas avoir de littéral de date, il est toujours interprété par le navigateur comme une date, qui est tout ce que je want: {"myDate":Date(123456789)}

JavaScriptConverter personnalisé pour DateTime?

Je dois souligner l'exactitude du commentaire de Roy Tinker. Ce n'est pas légal JSON. C'est un hack sale et sale sur le serveur pour supprimer le problème avant qu'il ne devienne un problème pour JavaScript. Il va étouffer un analyseur JSON. Je l'ai utilisé pour décoller, mais je ne l'utilise plus. Cependant, je pense toujours que la meilleure réponse consiste à changer la façon dont le serveur met en forme la date, par exemple ISO comme mentionné ailleurs.


Et si .NET revient ...

return DateTime.Now.ToString("u"); //"2013-09-17 15:18:53Z"

Et puis en JavaScript ...

var x = new Date("2013-09-17 15:18:53Z");

FYI, pour tous ceux qui utilisent Python côté serveur: datetime.datetime (). Ctime () retourne une chaîne qui est nativement analysable par "new Date ()". C'est-à-dire, si vous créez une nouvelle instance de datetime.datetime (par exemple avec datetime.datetime.now), la chaîne peut être incluse dans la chaîne JSON et cette chaîne peut être transmise en tant que premier argument au constructeur Date. Je n'ai encore trouvé aucune exception, mais je ne l'ai pas testé trop rigoureusement non plus.


J'ai également dû chercher une solution à ce problème et finalement je suis tombé sur le moment.js qui est une belle bibliothèque qui peut analyser ce format de date et beaucoup plus.

var d = moment(yourdatestring)

Cela m'a sauvé un peu de mal de tête alors j'ai pensé que je le partagerais avec vous. :)
Vous pouvez trouver plus d'informations à ce sujet ici: http://momentjs.com/


J'ai fini par ajouter les caractères dans l'expression régulière de Panos pour se débarrasser de ceux générés par le serializer de Microsoft pour écrire des objets dans un script en ligne:

Donc, si vous avez une propriété dans votre code-behind C # code-behind c'est quelque chose comme

protected string JsonObject { get { return jsSerialiser.Serialize(_myObject); }}

Et dans votre aspx vous avez

<script type="text/javascript">
    var myObject = '<%= JsonObject %>';
</script>

Vous obtiendriez quelque chose comme

var myObject = '{"StartDate":"\/Date(1255131630400)\/"}';

Notez les guillemets doubles.

Pour obtenir ceci dans une forme que l'eval déserialise correctement, j'ai utilisé:

myObject = myObject.replace(/"\/Date\((\d+)\)\/"/g, 'new Date($1)');

J'utilise Prototype et pour l'utiliser j'ai ajouté

String.prototype.evalJSONWithDates = function() {
    var jsonWithDates = this.replace(/"\/Date\((\d+)\)\/"/g, 'new Date($1)');
    return jsonWithDates.evalJSON(true);
}

Juste pour ajouter une autre approche ici, l'approche "ticks" que prend WCF est sujette à des problèmes avec les fuseaux horaires si vous n'êtes pas extrêmement prudent tel que décrit here et dans d'autres endroits. Donc, j'utilise maintenant le format ISO 8601 supporté par .NET et JavaScript, incluant les décalages de fuseau horaire. Voici les détails:

Dans WCF / .NET:

Où CreationDate est un System.DateTime; ToString ("o") utilise le spécificateur de format aller-retour de .NET qui génère une chaîne de date conforme à ISO 8601

new MyInfo {
    CreationDate = r.CreationDate.ToString("o"),
};

En JavaScript

Juste après avoir récupéré le JSON, je vais corriger les dates pour être des objets JavaSript Date en utilisant le constructeur Date qui accepte une chaîne de date ISO 8601 ...

$.getJSON(
    "MyRestService.svc/myinfo",
    function (data) {
        $.each(data.myinfos, function (r) {
            this.CreatedOn = new Date(this.CreationDate);
        });
        // Now each myinfo object in the myinfos collection has a CreatedOn field that is a real JavaScript date (with timezone intact).
       alert(data.myinfos[0].CreationDate.toLocaleString());
    }
)

Une fois que vous avez une date JavaScript, vous pouvez utiliser toutes les méthodes Date pratiques et fiables comme toDateString , toLocaleString , etc.


L'évaluation n'est pas nécessaire. Cela fonctionnera bien:

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

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

EDIT: J'ai volontairement omis la base (le 2ème argument de parseInt); voir mon commentaire ci-dessous . En outre, je suis entièrement d'accord avec le commentaire de Rory : les dates ISO-8601 sont préférées à ce vieux format - donc ce format ne devrait généralement pas être utilisé pour un nouveau développement. Voyez l'excellente bibliothèque Json.NET pour une excellente alternative qui sérialise les dates en utilisant le format ISO-8601.

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

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

Ne pas trop penser cela. Comme nous l'avons fait pendant des décennies, passez un décalage numérique de l'époque standard de facto du 1er janvier 1970 minuit GMT / UTC / & c en nombre de secondes (ou millisecondes) depuis cette époque. JavaScript l'aime, Java l'aime, C l'aime et Internet l'aime.


Poster dans un fil génial:

var d = new Date(parseInt('/Date(1224043200000)/'.slice(6, -2)));
alert('' + (1 + d.getMonth()) + '/' + d.getDate() + '/' + d.getFullYear().toString().slice(-2));

Si vous dites en JavaScript,

var thedate = new Date(1224043200000);
alert(thedate);

vous verrez que c'est la date correcte, et vous pouvez l'utiliser n'importe où dans le code JavaScript avec n'importe quel framework.


Solution Mootools:

new Date(Date(result.AppendDts)).format('%x')

Requiert mootools-more. Testé en utilisant mootools-1.2.3.1-plus sur Firefox 3.6.3 et IE 7.0.5730.13


Un post tardif, mais pour ceux qui ont cherché ce post.

Imagine ça:

    [Authorize(Roles = "Administrator")]
    [Authorize(Roles = "Director")]
    [Authorize(Roles = "Human Resources")]
    [HttpGet]
    public ActionResult GetUserData(string UserIdGuidKey)
    {
        if (UserIdGuidKey!= null)
        {
            var guidUserId = new Guid(UserIdGuidKey);
            var memuser = Membership.GetUser(guidUserId);
            var profileuser = Profile.GetUserProfile(memuser.UserName);
            var list = new {
                              UserName = memuser.UserName,
                              Email = memuser.Email ,
                              IsApproved = memuser.IsApproved.ToString() ,
                              IsLockedOut = memuser.IsLockedOut.ToString() ,
                              LastLockoutDate = memuser.LastLockoutDate.ToString() ,
                              CreationDate = memuser.CreationDate.ToString() ,
                              LastLoginDate = memuser.LastLoginDate.ToString() ,
                              LastActivityDate = memuser.LastActivityDate.ToString() ,
                              LastPasswordChangedDate = memuser.LastPasswordChangedDate.ToString() ,
                              IsOnline = memuser.IsOnline.ToString() ,
                              FirstName = profileuser.FirstName ,
                              LastName = profileuser.LastName ,
                              NickName = profileuser.NickName ,
                              BirthDate = profileuser.BirthDate.ToString() ,
            };
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        return Redirect("Index");
    }

Comme vous pouvez le voir, j'utilise la fonctionnalité de C # 3.0 pour créer les génériques "Auto". C'est un peu paresseux, mais j'aime ça et ça marche. Juste une note: Profil est une classe personnalisée que j'ai créée pour mon projet d'application Web.


Utiliser jQuery UI Datepicker n'a vraiment de sens que si vous incluez déjà jQuery UI:

$.datepicker.formatDate('MM d, yy', new Date(parseInt('/Date(1224043200000)/'.substr(6)))); 

sortie:

15 octobre 2008


Voici une solution assez simple pour analyser les dates JSON. Utilisez les fonctions ci-dessous selon vos besoins. Vous avez juste besoin de passer le format JSON Date de récupération en tant que paramètre pour les fonctions ci-dessous:

function JSONDate(dateStr) {
    var m, day;
    jsonDate = dateStr;
    var d = new Date(parseInt(jsonDate.substr(6)));
    m = d.getMonth() + 1;
    if (m < 10)
        m = '0' + m
    if (d.getDate() < 10)
        day = '0' + d.getDate()
    else
        day = d.getDate();
    return (m + '/' + day + '/' + d.getFullYear())
}

function JSONDateWithTime(dateStr) {
    jsonDate = dateStr;
    var d = new Date(parseInt(jsonDate.substr(6)));
    var m, day;
    m = d.getMonth() + 1;
    if (m < 10)
        m = '0' + m
    if (d.getDate() < 10)
        day = '0' + d.getDate()
    else
        day = d.getDate();
    var formattedDate = m + "/" + day + "/" + d.getFullYear();
    var hours = (d.getHours() < 10) ? "0" + d.getHours() : d.getHours();
    var minutes = (d.getMinutes() < 10) ? "0" + d.getMinutes() : d.getMinutes();
    var formattedTime = hours + ":" + minutes + ":" + d.getSeconds();
    formattedDate = formattedDate + " " + formattedTime;
    return formattedDate;
}

Vous pouvez également utiliser la bibliothèque JavaScript http://momentjs.com/ , ce qui est pratique lorsque vous planifiez de traiter différents formats localisés et d'effectuer d'autres opérations avec des valeurs de dates:

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

    function (result) {
        $("#AuthMerchId").text(result.AuthorizationMerchantId);
        $("#SttlMerchId").text(result.SettlementMerchantId);
        $("#CreateDate").text(moment(result.AppendDts).format("L"));
        $("#ExpireDate").text(moment(result.ExpiresDts).format("L"));
        $("#LastUpdate").text(moment(result.LastUpdateDts).format("L"));
        $("#LastUpdatedBy").text(result.LastUpdateNt);
        $("#ProcessIn").text(result.ProcessIn);
    }
    );
    return false;
}

La configuration de la localisation est aussi simple que l'ajout de fichiers de configuration (vous les obtenez sur le site momentjs.com) à votre projet et la configuration de la langue:

moment.lang('de');

Cela peut aussi vous aider.

 function ToJavaScriptDate(value) { //To Parse Date from the Returned Parsed Date
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(value);
        var dt = new Date(parseFloat(results[1]));
        return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
    }

var newDate = dateFormat(jsonDate, "mm/dd/yyyy"); 

Y at-il une autre option sans utiliser la bibliothèque jQuery?







json