why is my time/date picker formatting adding minutes?

I have both a time picker and a date picker in my template. The values store to my database together as one numeric string, so I have to do a few steps to parse them from one another in the right formats when I interpolate them to my template in the required places on a different page. First I call a formatting function to separate the values and then I run it through an angular-moment pipe to convert the military time to standard 12 hour time.

I noticed that consistently when I pick a time, say 7:00 or 12:00 on the time picker, it will interpolate to my template as 7:08 or 12:08. Why is it adding minutes?

THIS IS HOW I SAVE THE DATE AND TIME TO THE 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>

THE GET FORMATTED TIME FUNCTION I RUN THE TIME THROUGH BEFORE I USE 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

Upvotes: 3

Answers (3)

VincenzoC

Reputation: 31492

The problem with your code is that you are using uppercase MM that maps to t.getMonth() instead of lowercase mm (minutes).

Anyway, since you are using momentjs, I suggest to change your getFormattedTime using moment parsing (moment(Number) to parse milliseconds) and format().

Note that, with my code, you have to use moment tokens (so uppercase YYYY for year and uppercase DD for day of month)

Here 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>

Upvotes: 1

Nilesh Khisadiya

Reputation: 1658

I used your code and try it here. You can check below code snippet. You are using new Date(this.event.date + " " + this.event.time).getTime() in code. It working fine. And you can do it new Date(this.event.date + " " + this.event.time) directly without .getTime() as well.

It seems that you did 'HH:MM', instead of 'HH:mm'. Correct it in 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' ));

Upvotes: 1

Vineesh

Reputation: 3782

<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 have to use getFormattedTime(event.eventTime,'HH:mm' ). In your code you are using getFormattedTime(event.eventTime,'HH:MM' ) MM will return month

MM- Months, mm -Minutes

Upvotes: 4

why is my time/date picker formatting adding minutes?

Answers (3)

Related Questions