Why is my time and date formatting adding minutes?
I have both a time picker and a date picker in my template. The values are stored in my database together as a single numeric string, so I have to take a few steps to parse them apart in the correct formats when I interpolate them into my template at the required locations on another page. I first call the formatting function to split the values, and then I run it through the angular-moment pipe to convert wartime to standard 12 hour time.
I noticed that sequentially when I select a time, say 7:00 or 12:00 on the timer, it will interpolate my pattern as 7:08 or 12:08. Why does he add minutes?
THIS IS HOW I SAVE DATE AND TIME TO DATABASE
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 TEMPLATE
<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>
GET FORMATED TIME FUNCTION I CHECK THE TIME IN BEFORE USING THE 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
source to share
<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>
You must use getFormattedTime(event.eventTime,'HH:mm' )
. In your code you use getFormattedTime(event.eventTime,'HH:mm' )
MM will return the month
MM
- Months,
MM
-Minutes
source to share
I used your code and tried it here. You can check the code snippet. You are using new Date(this.event.date + " " + this.event.time).getTime()
in code. It works great. And you can do it new Date(this.event.date + " " + this.event.time)
directly without .getTime()
.
Seems like you did 'HH:MM'
instead 'HH:MM'
. Correct it in your code and try it.
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' ));
source to share
The problem with your code is that you are using uppercase MM
which appears in t.getMonth()
instead of lowercase MM
(minutes).
Anyway, since you are using momentjs, I suggest changing yours getFormattedTime
with moment moment(Number)
parsing ( to parse milliseconds) and format()
.
Please note that with my code you have to use tokens (e.g. capitalized YYYY
for the year and capitalized DD
for the day of the month)
Here's a live example:
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>
source to share