2
votes

Date remontant 3 heures dans Angular 7

J'utilise Angular 7. Et j'ai un sélecteur de date. Et par exemple, je choisis 2019-03-26 . Mais quand je clique sur le bouton enregistrer , la console me montre ensuite comme 2019-03-25T21: 00: 00.000Z . Cela remonte à 3 heures . Quelle peut être la raison de ce bug?

STACKBLITZ

J'utilise primeng 7.0.5.


11 commentaires

J'ai vérifié votre stackblitz et ouvert le console.log et il s'affiche normalement, par moi il dit Mon Mar 18 2019 00:00:00 GMT + 0100 < / code>


Avez-vous choisi le 18.03.2019 @Spritzig?


Oui j'ai choisi 13.08.2019


Vous recherchez une console de navigateur. Mais je dis console stackblitz @Spritzig


tu as raison ça me montre une heure plus tôt


Il montre la date et l'heure actuelles pour moi (sur givent stackblitz)


Vous recherchez une console de navigateur. Mais, je dis console stackblitz @Antoniossss Pas l'heure GMT , avec l'heure T .


Cela dépend du fuseau horaire local de votre machine


Oui. Cela dépend du fuseau horaire local de la machine. Mais, lorsque je poste mon objet, je prends des données incorrectes de mon service @DudanRadovanovic


Vous affichez toujours l'heure valide. Tout ce que vous avez à faire est de prendre en compte que le temps écoulé depuis l'interface utilisateur est le temps ZONED. Aucun problème là-bas.


Le fuseau horaire @HasanOzdemir ne devrait pas avoir d'importance pour vous - n'oubliez pas de l'utiliser du côté de l'analyse. T -> UTC


5 Réponses :


2
votes

En fait, cela se produit parce que vous voyez le console.log de la fenêtre du navigateur simulé par le serveur Stackblitz, donc il imprime la DateHeure dans le fuseau horaire UTC par le journal de la console simulée par le serveur.

{birthDate: "2019-03-15T14:56:04.000Z"} //Printin UTC Time

Pour vérifier la bonne façon est de cliquer sur Ouvrir dans une nouvelle fenêtre , puis il affichera le bon DateHeure comme ci-dessous.

 entrez la description de l'image ici

Voici la fenêtre en direct


5 commentaires

Cette réponse n'est pas valable - et pour le pire - trompeuse. Dates des photos du calendrier dans la zone de données actuelle (navigateur / utilisateur). Ce que vous voyez dans la console est EXACT MÊME POINT DANS LE TEMPS mais dans le fuseau horaire UTC. Pour résumer - les deux dates - dans la console du navigateur et la console «stackblitz» sont VALIDES et montrent exactement le même moment.


Mais, dans ma vraie application, il y a beaucoup d'entrées dans mon formulaire. Et j'envoie mes données directement par this.http.post (url, formData) . Et quand j'envoie mes données en service, mes données remontent 3 heures en arrière @TheParam.


@HasanOzdemir, il est de votre responsabilité de conserver les informations de fuseau horaire avec la date et cela est facilement faisable en utilisant le format ISO.


Je crée un nouveau projet c # et je crée un nouveau projet angulaire. Et je n'ai fait aucune configuration. Tout est par défaut. Et mon client et mon serveur sont les mêmes. C'est dans mon ordinateur. Je pense que si je poste un article, il devrait envoyer l'heure exacte @Antoniossss. Je pense que ce n'est pas ma responsabilité.


Et encore une fois - le temps est envoyé correctement. 2019-03-26T00: 00: 00 + 03: 00 est le même moment que 2019-03-25T21: 00: 00.000Z . C'est comme nommer la même chose dans différentes langues. Le fait que vous ayez tout "par défaut" ne signifie rien. Envoyez simplement la date en ISO et peut-être que tout ira bien "par défaut"



1
votes

Vous êtes dans un fuseau horaire local, tandis que le sélecteur de date renvoie les dates en UTC. Vous pouvez le corriger en réduisant le décalage du fuseau horaire par rapport à la date UTC.

Comme le décalage du fuseau horaire est en minutes, mais que les objets Date sont calculés en millisecondes depuis 1970, vous devrez multiplier le décalage par 1000 * 60.

const utcDate = '2019-05-01T00:00:00Z';
const localDate = new Date(new Date(utcDate) - new Date().getTimezoneOffset() * 1000 * 60);


7 commentaires

Mais, dans ma vraie application, il y a beaucoup d'entrées dans mon formulaire. Et j'envoie mes données directement par this.http.post (url, formData) . Donc, il est très difficile d'obtenir une date et d'analyser @fjc


Pourquoi le feriez-vous (sauf pour l'affichage)? Il est recommandé de stocker les dates au format UTC.


J'envoie mes données au service C # @jjc. Et il est renvoyé en 3 heures à mon service C #.


Non. Vous êtes juste dans un fuseau horaire à +3 heures de UTC. Si vous stockez la date au format UTC, tout ira bien. Il indique toujours exactement le même moment.


Je ne fais rien adiitonally @jjc. J'envoie uniquement par this.http.post (url, this.myForm.value) , et je prends de mon service C # 3 heures en arrière. Comment puis-je résoudre ça?


Soit faire en sorte que votre service C # gère correctement les dates UTC (probablement la meilleure option); ou envoyez toujours la date dans votre heure locale (comme je le montre ci-dessus).


Je crée un nouveau projet c # et je crée un nouveau projet angulaire. Et je n'ai fait aucune configuration. Tout est par défaut. Et mon client et mon serveur sont les mêmes. C'est dans mon ordinateur. Mais, mon problème persiste. Comment puis-je faire en sorte que mon service C # gère correctement les dates UTC? Parce que je ne sais pas comment je peux faire cela. @fjc



0
votes

La plupart des calendriers de l'interface utilisateur stockent la date saisie sous forme de date ou d'horodatage UTC (temps universel coordonné). Mais la date affichée à l'utilisateur est convertie avec votre fuseau horaire local, qui peut être différent de l'UTC.

console.log (_Date_) imprime l'heure UTC, si vous voulez voir cette heure dans votre fuseau horaire local, vous pouvez utiliser les méthodes de ate comme getHours () .

Donc, si vous imprimez this.myForm.value.birthDate.getHours () , vous verrez vos heures locales correctes. Mais vous ne devez pas convertir le temps stocké en votre heure locale


5 commentaires

Mais, dans ma vraie application, il y a beaucoup d'entrées dans mon formulaire. Et j'envoie mes données directement par this.http.post (url, formData) . Donc, il est très difficile d'obtenir une date et d'analyser @Andriy


votre formulaire (y compris myForm.value.birthDate ) est absolument correct, toutes les dates sont stockées / passées au format UTC. Vous pouvez également le convertir en horodatage, quelque chose comme myForm.value.birthDate.getTime () . Lorsque vous afficherez cette date dans un autre calendrier dans un autre fuseau horaire, il affichera exactement la même heure mais selon le fuseau horaire actuel


Mon problème est que lorsque j'envoie mon formulaire par this.http.post (url, this.myForm.value) , alors je reçois mon service C # il y a 3 heures @Andriy


Vous devez utiliser les mêmes formats sur le serveur et le client. Je suppose que vous pouvez convertir sur le serveur TimeZone.CurrentTimeZone.ToLocalTime (YOUR_UTC_DATE) . Ou comparez la date de votre client avec l'heure UTC du serveur (quelque chose comme DateTime.UtcNow ). L'utilisation de l'UTC vous aidera à être synchronisé au cas où le client et le serveur se trouvent dans des fuseaux horaires différents


Je crée un nouveau projet c # et je crée un nouveau projet angulaire. Et je n'ai fait aucune configuration. Tout est par défaut. Et mon client et mon serveur sont les mêmes. C'est dans mon ordinateur. Mais, il continue toujours le même problème. @Andriy



0
votes

Cela est dû au décalage du fuseau horaire. Ce que vous obtenez du formulaire est la date en GMT, donc, lorsque vous essayez d'imprimer la date sur la console, vous aurez l'heure ajustée à votre fuseau horaire local. Vous devez donc ajuster la date et l'heure au fuseau horaire local lorsque vous l'imprimez.

Essayez ceci:

 save() {
    let localDate = new Date( this.myForm.value.birthDate.getTime() + Math.abs(this.myForm.value.birthDate.getTimezoneOffset()*60000) ) 
    console.log(this.myForm.value);
    console.log(localDate);
  }


4 commentaires

Mais, dans ma vraie application, il y a beaucoup d'entrées dans mon formulaire. Et j'envoie mes données directement par this.http.post (url, formData). Il est donc impossible d'analyser toutes les dates. Et aussi si le développeur oublie d'écrire ceci, alors créera des données incorrectes dans ma base de données. @Aragorn


Envoyez l'API de temps, pas l'entrée que vous obtenez du formulaire, utilisez this.myForm.value.birthDate.getTime ()


Comment puis-je atteindre @ Aragorn? J'écris uniquement this.http.post (url, this.myForm.value) . Je ne fais rien de plus.


Et que fait l'API avec birthDate? l'enregistrer dans la base de données? À un moment donné du flux, vous devrez obtenir la date de naissance du formulaire et l'enregistrer, et c'est là que vous lui appliquez le décalage du fuseau horaire. L'API est-elle JavaScript?



0
votes

J'ai trouvé la solution. Le calendrier Primeng a une propriété dataType . DataType est date par défaut. Si vous définissez string au lieu de date , cela fonctionne parfaitement et envoie la date correcte au serveur.

StackBlitz

Vous pouvez voir un exemple de travail à partir de ce lien stackblitz.


0 commentaires