Estoy usando ion-datetime para mi formulario de cita. Al insertarlo funciona bien sin ningún problema. Pero cuando necesito actualizar los detalles del formulario de fecha de la cita insertada desde el back-end, el valor de la fecha no se muestra en ion-datetime.
A continuación se muestra mi código:
actualizar.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>actualizar.ts :
leadDetailsUpdate={ appt_date:'' }; El formato de fecha que obtengo del back-end es el siguiente: appt_date: "2017-01-01"
A continuación se muestra el mensaje de error que recibo en la consola:
Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime
convertirlo a formato ISO antes de mostrar
var date = new Date('2017-01-01').toISOString() console.log(date)Incluso Gaurav tiene razón, descubrí que si su zona horaria no es +0, puede tener problemas con eso. Encontré en alguna parte esta solución:
let tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds this.startTime = (new Date(this.myStartTime - tzoffset)).toISOString().slice(0,-1);Luego en mi HTML lo tengo así:
<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" (ionChange)="changeCheckOutStartTime()" style="padding-left: 21px"></ion-datetime> Y en el método changeCheckOutStartTime() , me tomo el tiempo y creo un momento:
changeCheckOutStartTime() { this.myStartTime = moment(this.startTime).toDate(); }Usando el formato ISO antes de mostrar, así:
this.myDate = new Date('2017-01-01').toISOString()Nos dará una diferencia de horas, cada navegador haría algo diferente. En mi caso tuve una diferencia de 5 horas (16/12/17 02:00 sería 16/12/17 07:00).
Una mejor manera sería usar el momento como recomendaciones iónicas en su documentación ( https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation )
Ejemplo:
npm install moment --S .import moment from 'moment'; .this.myDate = moment().format() .Lo mejor sería crear una tubería. Bueno, mira esta demostración http://plnkr.co/edit/MHjUdC para inspirarte, buena suerte :)