問題重現

• 當給<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