ionic 2 ion-datetime ISO格式问题

时间:2017-04-12 05:39:45

标签: javascript angular typescript ionic2

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

3 个答案:

答案 0 :(得分:14)

在显示

之前将其转换为ISO格式

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

答案 1 :(得分: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();
}

答案 2 :(得分:1)

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

foreach (DataRow rows in folders.Rows)
            {
                if (Convert.ToInt32(rows["PARENTID"]) == parentID)
                {
                    String key = rows["ID"].ToString();
                    String text = rows["title"].ToString();
                    TreeNodeCollection newParentNode = parentNode.Add(key, text).Nodes;
                    PopulateTreeView(newParentNode, Convert.ToInt32(rows["ID"]), folders);
                }
            }

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

更好的方法是在其文档中使用时刻作为离子推荐(https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime-validation-and-manipulation

示例:

  1. 在root proyect打开控制台并安装时刻:this.myDate = new Date('2017-01-01').toISOString()
  2. 导入组件文件中的时刻:npm install moment --S
  3. 设置模型变量的值:import moment from 'moment';
  4. 最好的是创建一个管道。那么请查看这个演示http://plnkr.co/edit/MHjUdC获取灵感,goog luck:)