web-dev-qa-db-fra.com

problème de format ISO ion-2 dat-datetime

J'utilise ion-datetime pour mon formulaire de rendez-vous. Tout en insérant cela fonctionne bien sans aucun problème. Mais lorsque je dois mettre à jour les détails du formulaire de rendez-vous insérés à partir de l'arrière-plan, la valeur de la date ne s'affiche pas dans ion-datetime.

Ci-dessous mon code:

update.html :

<ion-item class="border-bottom">
      <ion-label  class="ionselect" >Appointment Date:</ion-label>
      <ion-datetime name="appdate" displayFormat="YYYY MMM DD" [(ngModel)]="leadDetailsUpdate.appt_date"></ion-datetime>
</ion-item>

update.ts :

leadDetailsUpdate={
        appt_date:''
};

Le format de date que je reçois à partir de l’arrière est le suivant: appt_date: "2017-01-01"

Ci-dessous le message d'erreur que je reçois dans la console:

Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

javascriptangulartypescriptionic2
5
Akash M

convertissez-le au format ISO avant de l'afficher

var date = new Date('2017-01-01').toISOString()
console.log(date)

12
Gaurav Chaudhary

Même Gaurav a raison, j’ai constaté que si votre fuseau horaire n’est pas à +0, vous pouvez avoir des problèmes avec cela. J'ai trouvé quelque part cette solution:

let tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
this.startTime = (new Date(this.myStartTime - tzoffset)).toISOString().slice(0,-1);

Ensuite, dans mon code HTML, je l'ai comme ceci:

<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" (ionChange)="changeCheckOutStartTime()" style="padding-left: 21px"></ion-datetime>

Et dans la méthode changeCheckOutStartTime(), je prends le temps de créer un moment:

changeCheckOutStartTime() {
   this.myStartTime = moment(this.startTime).toDate();
}
2
Carlos Roig

Utiliser le format ISO avant d’afficher, comme ceci:

this.myDate = new Date('2017-01-01').toISOString()

Cela nous donnera une différence d'heures, chaque navigateur ferait quelque chose de différent. Dans mon cas, j'ai eu une différence de 5 heures (le 16/12/17 02:00 serait le 16/12/17 07:00).

Une meilleure solution consisterait à utiliser moment comme recommandations recommandées dans sa documentationn ( https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation )

Exemple:

  1. Ouvrez la console à la racine du projet et installez le moment: npm install moment --S.
  2. Moment d'importation dans le fichier de composant: import moment from 'moment';.
  3. Définissez la valeur de la variable de modèle: this.myDate = moment().format().

Le mieux serait de créer un tuyau. Eh bien vérifier cette démo http://plnkr.co/edit/MHjUdC pour l'inspiration, bonne chance Goog :)

1
Daniel Eduardo Delgado Diaz