开发者问题收集

ionic 2 ion-datetime ISO 格式问题

2017-04-12
12874

我正在使用 ion-datetime 来制作我的预约表格。插入时它工作正常,没有任何问题。但是当我需要从后端更新插入的预约日期表格详细信息时,日期值不会显示在 ion-datetime 中。

以下是我的代码:

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:''
}; 

我从后端获取的日期格式如下: appt_date:“2017-01-01”

以下是我在控制台中收到的错误消息:

解析日期时出错:“null”。请提供有效的 ISO 8601 日期时间格式:https://www.w3.org/TR/NOTE-datetime

3个回答

转换为ISO格式后再显示

var date = new Date('2017-01-01').toISOString()
console.log(date)
Gaurav Chaudhary
2017-04-12

即使 Gaurav 是对的,我发现如果你的时区不是 +0,你可能会遇到问题。我在某处找到了这个解决方案:

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

然后在我的 HTML 中我有这样的内容:

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

changeCheckOutStartTime() 方法中,我花时间并创建一个时刻:

changeCheckOutStartTime() {
   this.myStartTime = moment(this.startTime).toDate();
}
Carlos Roig
2017-05-29

显示之前使用 ISO 格式,如下所示:

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

会给我们几个小时的差别,每个浏览器都会做一些不同的事情。在我的情况下,相差 5 个小时(16/12/17 02:00 将是 16/12/17 07:00)。

更好的方法是使用 moment,正如 ionic 在其文档中推荐的那样( https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation

示例:

  1. 在根项目处打开控制台并安装 moment: npm install moment --S
  2. 在组件文件中导入 moment: import moment from 'moment';
  3. 设置模型变量的值: this.myDate = moment().format()

最好的办法是创建一个管道。好吧,查看此演示 http://plnkr.co/edit/MHjUdC 以获得灵感,祝你好运 :)

Daniel Delgado
2017-12-16