为什么我的 time/date 选择器格式会增加分钟数？

Question

我的模板中同时有时间选择器和日期选择器。这些值作为一个数字字符串一起存储到我的数据库中，因此当我将它们插入到不同页面上所需位置的模板时，我必须执行几个步骤以正确的格式相互解析它们。首先，我调用格式化函数来分隔值，然后我运行通过 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

Answer 1

<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-分钟

Answer 2

我使用了您的代码并在此处尝试。您可以检查下面的代码片段。您正在代码中使用 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' ));

Answer 3

您的代码存在问题，您使用的是映射到 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>

为什么我的 time/date 选择器格式会增加分钟数？

why is my time/date picker formatting adding minutes?

javascript

angular

datetime

datepicker

angular-moment