您现在的位置是:首页 > 网站制作 > vue.js心得vue.js心得

vue 使用moment时间处理插件

蒙xs2021-04-20【vue.js心得】人已围观

简介1.引入import moment from 'moment'获取当前时间let now = moment();console.log(now) // 当前时间对象格式化let now = moment().format('YYYY-MM-DD HH:mm:ss

使用npm命令安装moment
npm install moment --save
1.引入
import moment from 'moment'

获取当前时间
let now = moment();
console.log(now) // 当前时间对象

格式化
let now = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(now);
// 2018-12-14 16:00:08


示例 - 获取周几

// 先获取星期中的第几天0-6,0是周日
let now = moment().format('d');
let weekStr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
let week = weekStr[now];
console.log(weekStr);
// 输出周x


算法

可以轻松计算某个日期后多少天,两个日期差,两个日期比较等。

当前日期后20天

let now = moment('2018-12-14').add(20, 'day').format('YYYY-MM-DD');
console.log(now);
// 输出 2019-01-03
 

diff计算两个日期差

let diff = moment('2019-01-03').diff(moment('2018-12-14'));
console.log(diff);
// 1728000000 单位是毫秒
 

diff时间差格式化

let starttime = '2018-12-14 18:00';
let endtime = '2018-12-15 10:22';
var totalMinute = moment(endtime).diff(starttime) / (1000 * 60),
  hours = Math.floor(totalMinute / 60),
  minute = totalMinute % 60,
  result = '';

if(hours > 0){
  result = result + hours + '小时';
}

if(minute > 0){
  result = result + minute + '分钟';
}
console.log(result);
// 16小时22分钟
 

两个日期比较

// 是否之前
moment('2018-10-20').isBefore('2018-12-31', 'year'); // false
moment('2018-10-20').isBefore('2019-01-01', 'year'); // true
moment('2018-10-20').isBefore('2019-01-01'); // true

// 是否之后
moment('2010-10-20').isAfter('2010-01-01', 'year'); // false
moment('2010-10-20').isAfter('2009-12-31', 'year'); // true

// 是否相同
moment('2010-10-20').isSame('2009-12-31', 'year');  // false
moment('2010-10-20').isSame('2010-01-01', 'year');  // true
moment('2018-01-01').isSame('2018-01-01');  // true

// 是否是闰年
moment([2000]).isLeapYear() // true
moment([2001]).isLeapYear() // false

定义全局过滤器
// 全局引入 (main.js)
import moment from 'moment'
//  全局过滤器 时间戳 
使用
Vue.filter('dateformat', function (dataStr, pattern = 'YYYY-MM-DD') {
  if (dataStr) {
    return moment(dataStr).format(pattern)
  } else {
    return dataStr
  }
})

// 页面使用过滤 如: <cell title="还款日" :value="data | dateformat('YYYY-MM-DD HH:mm:ss')"></cell>

该帖子只做记录,转自http://www.javanx.cn/20181214/moment-js/

Tags:

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2019-1-11
  • 文章统计142篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 建站,写前端联系我:扫描二维码,