为什么我的 time/date 选择器格式会增加分钟数?
why is my time/date picker formatting adding minutes?
我的模板中同时有时间选择器和日期选择器。这些值作为一个数字字符串一起存储到我的数据库中,因此当我将它们插入到不同页面上所需位置的模板时,我必须执行几个步骤以正确的格式相互解析它们。首先,我调用格式化函数来分隔值,然后我 运行 通过 angular-moment 管道将军事时间转换为标准的 12 小时时间。
我注意到当我选择一个时间时,在时间选择器上说 7:00 或 12:00,它会插入到我的模板中作为 7:08 或 12:08 .为什么要增加分钟数?
这是我将日期和时间保存到数据库的方式
constructor(//controllers n stuff) {
//empty event object
this.event = {
hostName : "",
hostId: "",
hostPhoto : "",
coverCharge: 0,
drinkMin: false,
reimburse: false,
venue : "",
guests : 0,
date : "",
time : "",
city : "",
eventTime : "",
createdTime: "",
volunteers : 0
}
}//close constructor
addEvent(){
let authData = OnymosAccess.getAuth(); //GET DATABASE AUTH
this.event.hostName = authData.userName;
this.event.hostId = authData.userId;
this.event.hostPhoto = authData.userPhoto();
**this.event.eventTime = new Date(this.event.date + " " + this.event.time).getTime();**
this.event.createdTime = Date.now();
let that = this;
OnymosUtil.addData( //SEND TO DATABASE
'/events/' + this.event.city + '/' + this.event.createdTime,
this.event,
function optionalSuccessCallback (statusMessage) {
console.log(statusMessage);
that.saveStatus = "successfully saved";
},
function optionalFailureCallback (error) {
that.saveStatus = "failed saving" + error;
});
}//end addEvent
HTML 模板
<ion-row>
<ion-col>
<ion-icon name="calendar"></ion-icon>
<BR>
**{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}**
</ion-col>
<ion-col>
<ion-icon name="clock"></ion-icon>
<BR>
**{{ getFormattedTime(event.eventTime,'HH:MM' ) | amParse:'HH:mm' | amDateFormat:'hh:mm A' }}**
</ion-col>
获取格式化的时间函数 I 运行 使用 MOMENT 之前的时间。
getFormattedTime (time, format) {
var t = new Date(time);
var tf = function (i) { return (i < 10 ? '0' : '') + i };
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
case 'MM':
return tf(t.getMonth() + 1);
case 'mm':
return tf(t.getMinutes());
case 'dd':
return tf(t.getDate());
case 'HH':
return tf(t.getHours());
case 'ss':
return tf(t.getSeconds());
}
})
} // end of getFormattedTime
<ion-col>
<ion-icon name="calendar"></ion-icon>
<BR>
**{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}**
</ion-col>
<ion-col>
<ion-icon name="clock"></ion-icon>
<BR>
**{{ getFormattedTime(event.eventTime,'HH:mm' ) | amParse:'HH:mm' | amDateFormat:'hh:mm A' }}**
</ion-col>
你必须使用 getFormattedTime(event.eventTime,'HH:mm' )
。在您的代码中,您使用的是 getFormattedTime(event.eventTime,'HH:MM' )
MM will return month
MM
- 个月,
mm
-分钟
我使用了您的代码并在此处尝试。您可以检查下面的代码片段。您正在代码中使用 new Date(this.event.date + " " + this.event.time).getTime()
。它工作正常。您也可以直接 new Date(this.event.date + " " + this.event.time)
而无需 .getTime()
。
您似乎 'HH:MM'
而不是 'HH:mm'
。在代码中改正并尝试。
function getFormattedTime (time, format) {
var t = new Date(time);
var tf = function (i) { return (i < 10 ? '0' : '') + i };
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
case 'MM':
return tf(t.getMonth() + 1);
case 'mm':
return tf(t.getMinutes());
case 'dd':
return tf(t.getDate());
case 'HH':
return tf(t.getHours());
case 'ss':
return tf(t.getSeconds());
}
})
}
var time=new Date("2017-07-05 07:00").getTime();
console.log(time);
console.log( getFormattedTime(time, 'MM-dd-yyyy'));
console.log(getFormattedTime(time,'HH:mm' ));
您的代码存在问题,您使用的是映射到 t.getMonth()
的大写 MM
而不是小写 mm
(分钟)。
无论如何,由于您使用的是 momentjs,我建议使用矩解析更改您的 getFormattedTime
(moment(Number)
to parse milliseconds) and format()
.
请注意,使用我的代码,您必须使用时刻标记(因此大写 YYYY
代表年份,大写 DD
代表月份)
这是一个活生生的例子:
function getFormattedTime(time, format) {
return moment(time).format(format);
}
console.log( getFormattedTime(1499200000000, 'MM-DD-YYYY') );
console.log( getFormattedTime(1499200000000, 'HH:mm') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
我的模板中同时有时间选择器和日期选择器。这些值作为一个数字字符串一起存储到我的数据库中,因此当我将它们插入到不同页面上所需位置的模板时,我必须执行几个步骤以正确的格式相互解析它们。首先,我调用格式化函数来分隔值,然后我 运行 通过 angular-moment 管道将军事时间转换为标准的 12 小时时间。
我注意到当我选择一个时间时,在时间选择器上说 7:00 或 12:00,它会插入到我的模板中作为 7:08 或 12:08 .为什么要增加分钟数?
这是我将日期和时间保存到数据库的方式
constructor(//controllers n stuff) {
//empty event object
this.event = {
hostName : "",
hostId: "",
hostPhoto : "",
coverCharge: 0,
drinkMin: false,
reimburse: false,
venue : "",
guests : 0,
date : "",
time : "",
city : "",
eventTime : "",
createdTime: "",
volunteers : 0
}
}//close constructor
addEvent(){
let authData = OnymosAccess.getAuth(); //GET DATABASE AUTH
this.event.hostName = authData.userName;
this.event.hostId = authData.userId;
this.event.hostPhoto = authData.userPhoto();
**this.event.eventTime = new Date(this.event.date + " " + this.event.time).getTime();**
this.event.createdTime = Date.now();
let that = this;
OnymosUtil.addData( //SEND TO DATABASE
'/events/' + this.event.city + '/' + this.event.createdTime,
this.event,
function optionalSuccessCallback (statusMessage) {
console.log(statusMessage);
that.saveStatus = "successfully saved";
},
function optionalFailureCallback (error) {
that.saveStatus = "failed saving" + error;
});
}//end addEvent
HTML 模板
<ion-row>
<ion-col>
<ion-icon name="calendar"></ion-icon>
<BR>
**{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}**
</ion-col>
<ion-col>
<ion-icon name="clock"></ion-icon>
<BR>
**{{ getFormattedTime(event.eventTime,'HH:MM' ) | amParse:'HH:mm' | amDateFormat:'hh:mm A' }}**
</ion-col>
获取格式化的时间函数 I 运行 使用 MOMENT 之前的时间。
getFormattedTime (time, format) {
var t = new Date(time);
var tf = function (i) { return (i < 10 ? '0' : '') + i };
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
case 'MM':
return tf(t.getMonth() + 1);
case 'mm':
return tf(t.getMinutes());
case 'dd':
return tf(t.getDate());
case 'HH':
return tf(t.getHours());
case 'ss':
return tf(t.getSeconds());
}
})
} // end of getFormattedTime
<ion-col>
<ion-icon name="calendar"></ion-icon>
<BR>
**{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}**
</ion-col>
<ion-col>
<ion-icon name="clock"></ion-icon>
<BR>
**{{ getFormattedTime(event.eventTime,'HH:mm' ) | amParse:'HH:mm' | amDateFormat:'hh:mm A' }}**
</ion-col>
你必须使用 getFormattedTime(event.eventTime,'HH:mm' )
。在您的代码中,您使用的是 getFormattedTime(event.eventTime,'HH:MM' )
MM will return month
MM
- 个月,
mm
-分钟
我使用了您的代码并在此处尝试。您可以检查下面的代码片段。您正在代码中使用 new Date(this.event.date + " " + this.event.time).getTime()
。它工作正常。您也可以直接 new Date(this.event.date + " " + this.event.time)
而无需 .getTime()
。
您似乎 'HH:MM'
而不是 'HH:mm'
。在代码中改正并尝试。
function getFormattedTime (time, format) {
var t = new Date(time);
var tf = function (i) { return (i < 10 ? '0' : '') + i };
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
case 'MM':
return tf(t.getMonth() + 1);
case 'mm':
return tf(t.getMinutes());
case 'dd':
return tf(t.getDate());
case 'HH':
return tf(t.getHours());
case 'ss':
return tf(t.getSeconds());
}
})
}
var time=new Date("2017-07-05 07:00").getTime();
console.log(time);
console.log( getFormattedTime(time, 'MM-dd-yyyy'));
console.log(getFormattedTime(time,'HH:mm' ));
您的代码存在问题,您使用的是映射到 t.getMonth()
的大写 MM
而不是小写 mm
(分钟)。
无论如何,由于您使用的是 momentjs,我建议使用矩解析更改您的 getFormattedTime
(moment(Number)
to parse milliseconds) and format()
.
请注意,使用我的代码,您必须使用时刻标记(因此大写 YYYY
代表年份,大写 DD
代表月份)
这是一个活生生的例子:
function getFormattedTime(time, format) {
return moment(time).format(format);
}
console.log( getFormattedTime(1499200000000, 'MM-DD-YYYY') );
console.log( getFormattedTime(1499200000000, 'HH:mm') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>