問(wèn)題重現(xiàn)

• 當(dāng)給<ion-datetime>賦值時(shí),格式不對(duì)就顯示不出來(lái),如下圖,點(diǎn)擊圖片放大看
  

解決問(wèn)題

• 查看DateTime API得知.<ion-datetime>的值是字符串,并且是使用ISO 8601日期格式作為其值
• ISO 8601日期格式為: YYYY-MM-DDTHH:mmZ,其中T是分隔符,Z表示時(shí)區(qū),看下圖當(dāng)不指定時(shí)區(qū),new Date()格式化時(shí)間會(huì)多加8小時(shí),北京時(shí)間指定時(shí)區(qū)為+08:00,這時(shí)候用new Date()格式化字符串為日期格式才能輸出我們的期望值
  
• 綜上,我們要給<ion-datetime>賦值,需要的格式是YYYY-MM-DDTHH:mm+08:00如:2015-05-05T05:05:05+08:00.

新問(wèn)題來(lái)了

• 我們一般的日期如new Date()继蜡、時(shí)間毫秒數(shù)杂伟、2015-05-05 05:05:05等日期怎么格式化為YYYY-MM-DDTHH:mm+08:00格式?

• 我已經(jīng)準(zhǔn)備好了強(qiáng)大的格式化函數(shù)

  
  

/**
   * 日期對(duì)象轉(zhuǎn)為日期字符串
   * @param date 需要格式化的日期對(duì)象
   * @param sFormat 輸出格式,默認(rèn)為yyyy-MM-dd                        年：y很洋，月：M，日：d只盹，時(shí)：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小時(shí)制
   * @example  dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')         "2017-02-28 01:24:00"   ps:hh:12小時(shí)制
   * @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');

最后

• 日期和時(shí)間單獨(dú)使用沒(méi)有上述問(wèn)題,如下圖

  
  
• 再此強(qiáng)調(diào):<ion-datetime>的值是字符串,并且是使用ISO 8601日期格式作為其值
• ionic2官方DateTime API