ionic 2 ion-datetime ISO 格式问题

Posted 2023-03-13

【中文标题】ionic 2 ion-datetime ISO 格式问题

【英文标题】：ionic 2 ion-datetime ISO Format issue

【发布时间】：2017-09-07 17:40:59

【问题描述】：

我正在使用 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"

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

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

【问题讨论】：

使用 toISOString() 函数将其转换为 ISO，然后在离子日期时间中显示

如果它解决了问题，请告诉我

【参考方案1】：

在显示之前将其转换为 ISO 格式

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

【讨论】：

下面是我试过的，但它没有出现：leadDetailsUpdate= appt_date: 'new Date('appt_date').toISOString()' ;

@AkashM 只需使用 appt_date 创建一个新日期并再次将其分配给 appt_date

如果我像你说的那样使用： var date = new Date('appt_date').toISOString();控制台日志（日期）；在控制台中它的出现是：2017-01-01T00:00:00.000Z

@AkashM 请添加您为 appt_date 赋值的代码，因为它在您的情况下给出“null”

@AkashM 我也使用了你的字符串，它在 Ionic 2 上运行良好。你使用的是 Ionic 1，因为你提到的 Ionic 2 上没有这样的问题

【参考方案2】：

即使 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();

【参考方案3】：

显示前使用ISO格式，如下：

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

会给我们不同的时间，每个浏览器都会做不同的事情。在我的情况下，我有 5 小时的差异（16/12/17 02:00 将是 16/12/17 07:00）。

更好的方法是在其文档中使用矩作为离子建议n (https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation)

例子：

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

最好的方法是创建一个管道。好吧，请查看此演示 http://plnkr.co/edit/MHjUdC 以获得灵感，goog 运气:)