问题重现

• 当给<ion-datetime>赋值时,格式不对就显示不出来,如下图,点击图片放大看
  

解决问题

• 查看DateTime API得知.<ion-datetime>的值是字符串,并且是使用ISO 8601日期格式作为其值
• ISO 8601日期格式为: YYYY-MM-DDTHH:mmZ,其中T是分隔符,Z表示时区,看下图当不指定时区,new Date()格式化时间会多加8小时,北京时间指定时区为+08:00,这时候用new Date()格式化字符串为日期格式才能输出我们的期望值
  
• 综上,我们要给<ion-datetime>赋值,需要的格式是YYYY-MM-DDTHH:mm+08:00如:2015-05-05T05:05:05+08:00.

新问题来了

• 我们一般的日期如new Date()、时间毫秒数、2015-05-05 05:05:05等日期怎么格式化为YYYY-MM-DDTHH:mm+08:00格式?

• 我已经准备好了强大的格式化函数

  
  

/**
   * 日期对象转为日期字符串
   * @param date 需要格式化的日期对象
   * @param sFormat 输出格式,默认为yyyy-MM-dd                        年：y，月：M，日：d，时：h，分：m，秒：s
   * @example  dateFormat(new Date())                               "2017-02-28"
   * @example  dateFormat(new Date(),'yyyy-MM-dd')                  "2017-02-28"
   * @example  dateFormat(new Date(),'yyyy-MM-dd HH:mm:ss')         "2017-02-28 13:24:00"   ps:HH:24小时制
   * @example  dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')         "2017-02-28 01:24:00"   ps:hh:12小时制
   * @example  dateFormat(new Date(),'hh:mm')                       "09:24"
   * @example  dateFormat(new Date(),'yyyy-MM-ddTHH:mm:ss+08:00')   "2017-02-28T13:24:00+08:00"
   * @example  dateFormat(new Date('2017-02-28 13:24:00'),'yyyy-MM-ddTHH:mm:ss+08:00')   "2017-02-28T13:24:00+08:00"
   * @returns {string}
   */
  static dateFormat(date: Date, sFormat: String = 'yyyy-MM-dd'): string {
    let time = {
      Year: 0,
      TYear: '0',
      Month: 0,
      TMonth: '0',
      Day: 0,
      TDay: '0',
      Hour: 0,
      THour: '0',
      hour: 0,
      Thour: '0',
      Minute: 0,
      TMinute: '0',
      Second: 0,
      TSecond: '0',
      Millisecond: 0
    };
    time.Year = date.getFullYear();
    time.TYear = String(time.Year).substr(2);
    time.Month = date.getMonth() + 1;
    time.TMonth = time.Month < 10 ? "0" + time.Month : String(time.Month);
    time.Day = date.getDate();
    time.TDay = time.Day < 10 ? "0" + time.Day : String(time.Day);
    time.Hour = date.getHours();
    time.THour = time.Hour < 10 ? "0" + time.Hour : String(time.Hour);
    time.hour = time.Hour < 13 ? time.Hour : time.Hour - 12;
    time.Thour = time.hour < 10 ? "0" + time.hour : String(time.hour);
    time.Minute = date.getMinutes();
    time.TMinute = time.Minute < 10 ? "0" + time.Minute : String(time.Minute);
    time.Second = date.getSeconds();
    time.TSecond = time.Second < 10 ? "0" + time.Second : String(time.Second);
    time.Millisecond = date.getMilliseconds();

    return sFormat.replace(/yyyy/ig, String(time.Year))
      .replace(/yyy/ig, String(time.Year))
      .replace(/yy/ig, time.TYear)
      .replace(/y/ig, time.TYear)
      .replace(/MM/g, time.TMonth)
      .replace(/M/g, String(time.Month))
      .replace(/dd/ig, time.TDay)
      .replace(/d/ig, String(time.Day))
      .replace(/HH/g, time.THour)
      .replace(/H/g, String(time.Hour))
      .replace(/hh/g, time.Thour)
      .replace(/h/g, String(time.hour))
      .replace(/mm/g, time.TMinute)
      .replace(/m/g, String(time.Minute))
      .replace(/ss/ig, time.TSecond)
      .replace(/s/ig, String(time.Second))
      .replace(/fff/ig, String(time.Millisecond))
  }

综合事例

 <ion-datetime displayFormat="YYYY年MM月DD日 HH:mm" [(ngModel)]="myDate"
                    doneText="确定" cancelText="取消"></ion-datetime>

 myDate= Utils.dateFormat(new Date(), 'yyyy-MM-ddTHH:mm:ss+08:00');

最后

• 日期和时间单独使用没有上述问题,如下图

  
  
• 再此强调:<ion-datetime>的值是字符串,并且是使用ISO 8601日期格式作为其值
• ionic2官方DateTime API