问题重现
- 当给
<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
