2017-06-22 78 views
3

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

回答

4
<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将返回一个月

MM - 个月, mm -Minutes

1

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

1

与您的代码的问题是,你正在使用大写MM映射到t.getMonth(),而不是小写mm(分钟)。

无论如何,因为你正在使用momentjs,我建议使用时刻解析(moment(Number)解析毫秒)和format()更改getFormattedTime

需要注意的是,我的代码,你必须使用时刻令牌

这里一个活生生的例子(对于年和大写DD为一个月的日子,所以大写YYYY):

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>

相关问题