vue 封装日期的转换以及计算

1:封装日期格式转换为yyy-mm-dd

 convertToDate(date) {
          var date = new Date(date);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          var d = date.getDate();
          m = m < 10 ? "0" + m : m; //月小于10,加0
          d = d < 10 ? "0" + d : d; //day小于10,加0
          return y + "-" + m + "-" + d;
        },

2:计算两个时间 的差 ,得到相差天数:( date1 和date2是2002-12-18格式)

DateDiff(date1 , date2){    //date1和date2是2002-12-18格式
          var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
          //根据年 . 月 . 日的值创建Date对象
          var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
          var date2Str = date2.split("-");
          var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
          var t1 = date1Obj.getTime();
          var t2 = date2Obj.getTime();
          var dateTime = 1000*60*60*24; //每一天的毫秒数
          var minusDays = Math.floor(((t2-t1)/dateTime));//计算出两个日期的天数差
          var days = Math.abs(minusDays);//取绝对值
          return days;
    }

3:日期前一天,和后一天的函数

//前一天。value1 在data 里声明
 beforeDate() {
          // this.value1 = new Date(this.valueDate.setDate(this.value1.getDate() - 1))
          //前一天
          let odata = new Date(
            new Date(this.value1).getTime() - 24 * 60 * 60 * 1000
          ); //计算当前日期 -1
          this.value1 = this.convertToDate(odata); //格式化日期并赋值
        },
 //后一天 value2在data 里声明
   afterDate() {
          // this.value2 = new Date(this.valueDate.setDate(this.value2.getDate() + 1))
          //后一天
          let odata = new Date(
            new Date(this.value2).getTime() + 24 * 60 * 60 * 1000
          ); //计算当前日期 +1
          this.value2 = this.convertToDate(odata); //格式化日期并赋值
        },   
         //日期格式转换
 convertToDate(date) {
          var date = new Date(date);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          var d = date.getDate();
          m = m < 10 ? "0" + m : m; //月小于10,加0
          d = d < 10 ? "0" + d : d; //day小于10,加0
          return y + "-" + m + "-" + d;
        },   

4:在原有日期增加days天数,默认增加1天 (date为原有日期,days为增加天数)

 addDate(date, days) {
        if(days == undefined || days == '') {
          days = 1;
        }
        var date = new Date(date);
        date.setDate(date.getDate() + days);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var mm = "'" + month + "'";
        var dd = "'" + day + "'";

        //单位数前面加0
        if(mm.length == 3) {
          month = "0" + month;
        }
        if(dd.length == 3) {
          day = "0" + day;
        }

        var time = date.getFullYear() + "-" + month + "-" + day
        return time;
      },

5:两个时间相减得到小时数

//leave_time 为离开时间 
//Math.ceil();向上取整 
 //Math.floor(5/3);向下取整
// Math.round(5/3);四舍五入
//parseInt(5/3);直接取整,去掉小数部分
//getTime();把时间转换为毫秒
    //把离开时间转换成毫秒类型的时间
        let a=leave_time.split(/[^0-9]/);
         let d=new Date(a[0],a[1]-1,a[2],a[3],a[4],a[5]); 
         let ms = new Date().getTime() - (d.getTime());//得到现在时间减去离开世间的毫秒数
        let time = (Math.ceil(ms / 1000 / 60 / 60));//得到小时,向上取整
              console.log(time )//打印向上取整的小时

6:计算两个时间差----分钟数


           //that.nowTime = 2020-09-27 10:01:16
           //val= 2020-09-27 10:01:37
          let start = new Date(that.nowTime);
          let endTime = new Date(val);
          let day = ( endTime.getTime() - start.getTime() )
          that.duration = Math.floor(day/1000/60)//得到分钟数

7:时间戳转日期格式yyyy-mm-dd hh:mm:ss

 timestampToDate2(timestamp) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue中进行日期格式转换有多种方法。一种方法是使用day.js库。可以通过引入day.js并在Vue组件中使用它来格式化时间。首先,需要使用import语句将dayjs导入到组件中。然后,在组件的data属性中定义一个date属性来保存日期对象。接下来,在computed属性中创建一个名为formattedDate的计算属性,并在其中使用dayjs函数将date属性转换为dayjs对象,并使用format方法指定所需的时间格式,例如'YYYY-MM-DD HH:mm:ss'。最后,将formattedDate作为模板中需要显示格式化日期的地方的绑定值使用。这样就能实现Vue日期格式转换了。 另一种方法是使用moment.js库。与day.js类似,需要使用import语句将moment.js导入到Vue组件中。然后,在组件的data属性中定义一个date属性来保存日期对象。接下来,在computed属性中创建一个名为formattedDate的计算属性,并在其中使用moment函数将date属性转换为moment对象,并使用format方法指定所需的时间格式,例如'YYYY-MM-DD HH:mm:ss'。最后,将formattedDate作为模板中需要显示格式化日期的地方的绑定值使用。这样就能实现Vue日期格式转换了。 总结起来,使用day.js或moment.js库都可以在Vue中进行日期格式转换。只需将库导入到组件中,然后在computed属性中创建一个计算属性来进行格式化,并在模板中使用该计算属性的绑定值来显示格式化后的日期。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue 中常用 时间格式转化方式](https://blog.csdn.net/qq_44333271/article/details/131598097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值