web-dev-qa-db-fra.com

angular $ http.post changeant la date en la date UTC

J'essayais de publier des données sur mon api REST portant la date . Maintenant, lors du débogage, mon paramètre de date est un objet JS Date avec une date correcte dans mon fuseau horaire: Tue Apr 04 2017 00:00:00 GMT+0530

une fois que le code a été laissé et que je vois la même chose dans l'onglet Réseau, il est converti en date UTC: "2017-04-03T18:30:00.000Z"

J'ai cherché la solution selon laquelle je dois inclure le fichier de paramètres régionaux angular dans mon index.html, ce que j'ai fait:

<script type="text/javascript" src="resources/js/angular/angular-locale_en-in.js"></script>

mais ça n'aide pas. J'ai vu des solutions comme l'ajout d'un format de date au filtre ou quelque chose du genre, mais je veux une solution globale . Toute aide? Merci :)

javascriptangularjsinternationalizationtimezone
20
pranavjindal999

La gestion de la date, de l'heure et du fuseau horaire m'a aussi perturbé. Peut-être que cette réponse vous donne un aperçu de la façon dont vous pouvez les gérer.

Essayez le code suivant dans la console de développement de Chrome et voyez comment la même date est présentée dans différents formats:

var date = new Date();
date.toISOString(); // "2017-04-29T09:54:28.714Z"
date.toGMTString(); //"Sat, 29 Apr 2017 09:54:28 GMT"
date.toLocalString(); //"4/29/2017, 3:24:28 PM"

Toute date que vous créez sur le client enregistre toujours la date à un décalage de fuseau horaire nul, c'est-à-dire UTC+/-00:00 Z. Pour plus de simplicité, vous pouvez penser à UTC et GMT comme identiques. Lorsqu'il s'agit d'afficher un objectif, la même date est présentée conformément au fuseau horaire du navigateur. Si vous exécutez console.log (date), Sat Apr 29 2017 15:24:28 GMT+0530 (IST) sera affiché, mais cela ne signifie pas que l'enregistrement interne de la date est conforme au fuseau horaire du navigateur. Il vient d'être présenté sur l'écran/la console selon le fuseau horaire du navigateur.

Examinez les représentations de date non pas comme converties d'un fuseau horaire, mais plutôt comme des représentations différentes de la même date. Dans votre navigateur, il est représenté par l'attribut GMT+0530 et lorsqu'il est envoyé au serveur, il correspond à la même date, avec un décalage de fuseau horaire égal à zéro.

Selon votre commentaire, si vous choisissez le 4 avril à 00h00 dans le fuseau horaire GMT + 0530, en interne, le 3 avril à 18h30 PM à GMT + 0, c’est-à-dire qu’il n’ya aucun décalage de fuseau horaire. Laissez-le aller au serveur tel quel. Lorsque vous devez utiliser cette date, elle est renvoyée du serveur le 3 avril et sera affichée dans le navigateur conformément au décalage horaire du navigateur. Il n'y a pas de conversion impliquée, c'est une date avec une représentation différente.

J'ai déjà posé une question liée , peut-être que cela ajoute plus de clarification.

Et dans l’ensemble, cette réponse est toujours identique à celle de @geminiousgoel et @charlietfl.

12
Ritesh Jagga

Scénario:

Envoyez la date de UI dans API call en tant que Epoch time (heure UNIX) au lieu de date. Vous pouvez utiliser getTime () method pour convertir la date en heure de l'époque.

var dateStr = "Tue Apr 04 2017 00:00:00 GMT+0530";

var dateEpoch = new Date(dateStr).getTime();

console.log(dateEpoch); // 1491244200000 (Local Time)

À la fin du récepteur, ils doivent à nouveau convertir ce Epoch time (heure UNIX) en Date.Il donnera la même date locale\heure que celle passée de UI.

Exemple de capture d'écran enter image description here

3
Rohit Jindal

Comme charlietfl l'a suggéré, le piratage global consisterait probablement à remplacer la méthode Date.prototype.toJSON (), mais ce n'est pas une bonne pratique. 

Où utilisez-vous votre appel $ http.post? Le meilleur endroit pour soumettre une demande $ http serait dans un service. Si vous utilisez un service, je vous suggère alors d'envelopper votre API de service public afin que vous puissiez avoir des méthodes "publiques" et "privées": il peut s'agir d'utilitaires permettant d'effectuer des opérations courantes, telles que des transformations de données, des validations.

angular.service('bookStoreService', ['$http'], function($http) {
    var normalizeBooks = function(booksArray){
        booksArray.forEach(function(book){  
            // do something on the book
        });
    };

    var updateBooks = function(books){
       normalizeBooks(books);
       $http.post('myurl', books);
    };

    return {
       updateBooks : updateBooks
    };
});
3
Redd Sanso

je pense que vous pouvez simplement le transmettre sous forme de chaîne (si l’API que vous utilisez acceptez les chaînes) avec le format dont vous avez besoin, disons "Mardi 04 avril 2017 00:00:00 GMT + 0530" et enregistrez-le sous forme de chaîne et ensuite, lorsque vous le récupérerez, ce sera une chaîne et il ne sera en aucun cas modifié.

3
Ahmad Abo Saa

Faire passer la date UTC au serveur est le comportement souhaité. Les API clientes sont supposées gérer l'heure UTC au lieu de supposer que les dates sont toutes des dates locales. 

Quoi qu'il en soit, vous pouvez convertir la date en chaîne en fonction du fuseau horaire local et la transmettre au serveur. 

3
Dada

Avez-vous ajouté la bibliothèque angular-locale_en-in.js à votre application? Quelque chose comme ça....

angular.module('myAngularApp', [
    'ngLocale'])

Sinon, la bibliothèque js n'aura aucun effet sur votre application angulaire.

2
Gi1ber7

Jindal saab, ça va marcher comme ça. Lorsque nous sélectionnons une date avec le sélecteur de date ou que nous transmettons simplement une valeur, il prend la date locale d'origine, mais lorsque nous transmettons cette valeur plus loin, il la convertit en UTC. Il doit ensuite être converti en zone locale à la réception. La base de données enregistre la date et l'heure au format UTC.

2
geminiousgoel

Ajoutez UTC à la fin pour que le navigateur le convertisse en date UTC

var dateToServer =new Date(dateFromUser+" UTC"); now le dateToServer sera au format UTC DateTime.

0
Sharan Rai

Json sérialiseur analyser la date de la chaîne. Sur un client, les propriétés de date sont stockées en tant que date locale dans le fuseau horaire du navigateur. Lorsque vous publiez votre objet sur le serveur, toutes les propriétés de date sont converties en chaîne utc. Dans la plupart des cas, c'est un comportement correct. Mais parfois, vous devez définir et envoyer la date dans un fuseau horaire du serveur. Il est souvent nécessaire de ne définir que la date sans heure. Dans ce cas, vous devez définir la propriété de chaîne et la définir manuellement. J'applique généralement cette astuce.

class Obj{
 d: Date
}

class ObjDto{
 constructor(obj: Obj){
   this.d= dateTimeToIsoLocalDateString(obj.d)
 }
 d: string
}

...

export function DateTimeToDate(date) {
    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
}

export function dateTimeToIsoLocalDateString(dateTime: Date): string {
    if (dateTime === null) {
        return null;
    }
    let date = DateTimeToDate(dateTime);
    let res = date.toISOString().replace("Z", "");
    return res;
}

Pour plus de compréhension sur ce thème, vous pouvez apprendre ceci topic

0
trueboroda