typescript ionic 2 ion-datetime ISO 格式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43361108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic 2 ion-datetime ISO Format issue
提问by Akash M
I am using ion-datetime for my appointment form. While inserting it is working fine without any problem. But when I need to update the inserted appointment date form details from back end, the date value is not displaying in ion-datetime.
我在我的约会表格中使用了 ion-datetime。插入时它工作正常，没有任何问题。但是当我需要从后端更新插入的约会日期表单详细信息时，日期值没有显示在 ion-datetime 中。
Below is my code:
下面是我的代码：
update.html:
更新.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:
更新.ts：
leadDetailsUpdate={
appt_date:''
};
The Date format I am getting from back end as follows:
appt_date: "2017-01-01"
我从后端得到的日期格式如下：
appt_date: "2017-01-01"
Below is the error message I am getting in console:
以下是我在控制台中收到的错误消息：
Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime
Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime
回答by Gaurav Chaudhary
convert it to ISO format before displaying
在显示之前将其转换为 ISO 格式
var date = new Date('2017-01-01').toISOString()
console.log(date)回答by Carlos Roig
Even Gaurav is right, I found that if your timezone is not +0, you can have problems with that. I found somewhere this solution:
即使 Gaurav 是对的，我发现如果您的时区不是 +0，您可能会遇到问题。我在某处找到了这个解决方案：
let tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
this.startTime = (new Date(this.myStartTime - tzoffset)).toISOString().slice(0,-1);
Then in my HTML I have it like this:
然后在我的 HTML 中，我是这样的：
<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" (ionChange)="changeCheckOutStartTime()" style="padding-left: 21px"></ion-datetime>
And in the changeCheckOutStartTime()method, I take the time and create a moment:
在changeCheckOutStartTime()方法中，我花时间创造了一个时刻：
changeCheckOutStartTime() {
this.myStartTime = moment(this.startTime).toDate();
}
回答by Daniel Eduardo Delgado Diaz
Using ISO format before displaying, like this:
显示前使用 ISO 格式，如下所示：
this.myDate = new Date('2017-01-01').toISOString()
Will give us a difference of hours, each browser would do something different. In my case I had a difference of 5 hours (16/12/17 02:00 would be 16/12/17 07:00).
会给我们不同的时间，每个浏览器会做不同的事情。在我的情况下，我有 5 个小时的差异（16/12/17 02:00 将是 16/12/17 07:00）。
A better way would be to use moment as ionic recomends on its documentationn (https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation)
更好的方法是使用 moment 作为 ionic recomends on its documentationn ( https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation)
Example:
例子：
- Open console at root proyect and install moment:
npm install moment --S. - Import moment in component file:
import moment from 'moment';. - Set value of model variable:
this.myDate = moment().format().
- 在 root 项目中打开控制台并安装 moment:
npm install moment --S。 - 在组件文件中导入时刻：
import moment from 'moment';. - 设置模型变量的值：
this.myDate = moment().format()。
The best would be create a pipe. Well check this demo http://plnkr.co/edit/MHjUdCfor inspiration, goog luck :)
最好的办法是创建一个管道。好吧，检查这个演示http://plnkr.co/edit/MHjUdC以获得灵感，祝你好运:)
