vue中使用moment.js 以及中文显示

阅读数:596 评论数:0

分类

html/css/js

正文

一、安装moment.js

npm install moment;

二、vue2中当全局过滤器使用

1、在main.js引入

import moment from 'moment'
// 封装是全局指令
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳，需转为Number类型
     if(input){
        return moment(input).format(fmtstring);
    }else{
        return "";
    }
});

2、使用

<text>{{item.overTime | datefmt('dddd') }}</text>

三、汉化

只需在main.js使用

import moment from "moment";
import 'moment/dist/locale/zh-cn'
moment.locale('zh-cn')

四、注意事项

1、要转换的值必须是date类型或者是number类型的时间戳

五、时间比较

moment() // 当前时间
moment().diff(moment('2021-07-08'),'days')
//也可以传入时间
moment('2021-06-08').diff(moment('2021-07-08'),'days')

六、格式化日期

1、注意12小时与24小时问题！！

moment(value).format('YYYY-MM-DD HH:mm:ss')
moment(values.data).format('YYYY-MM-DD HH:mm:ss')--------------24小时
moment(values.data).format('YYYY-MM-DD hh:mm:ss')--------------12小时

2、相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 12 年前
moment("20120620", "YYYYMMDD").fromNow(); // 11 年前
moment().startOf('day').fromNow();        // 15 小时前
moment().endOf('day').fromNow();          // 9 小时后
moment().startOf('hour').fromNow();

3、日历时间

moment().subtract(10, 'days').calendar(); // 2023/07/01
moment().subtract(6, 'days').calendar();  // 上周三14:32
moment().subtract(3, 'days').calendar();  // 上周六14:32
moment().subtract(1, 'days').calendar();  // 昨天14:32
moment().calendar();                      // 今天14:32
moment().add(1, 'days').calendar();       // 明天14:32
moment().add(3, 'days').calendar();       // 本周五14:32
moment().add(10, 'days').calendar();

4、多语言环境支持

moment.locale();         // zh-cn
moment().format('LT');   // 14:32
moment().format('LTS');  // 14:32:40
moment().format('L');    // 2023/07/11
moment().format('l');    // 2023/7/11
moment().format('LL');   // 2023年7月11日
moment().format('ll');   // 2023年7月11日
moment().format('LLL');  // 2023年7月11日下午2点32分
moment().format('lll');  // 2023年7月11日 14:32
moment().format('LLLL'); // 2023年7月11日星期二下午2点32分
moment().format('llll');

5、其它

moment(new Date()).format('MM月DD日'); // 01月20日
moment(new Date()).format('MMM'); // 1月
moment(new Date()).format('MMMM'); // 一月
moment().day(); // 获取星期
moment(new Date()).format('dd'); // 三
moment(new Date()).format('ddd'); // 周三
moment(new Date()).format('dddd'); //  星期三
moment(new Date()).isoWeekday(); // 3
moment(new Date()).isoWeekYear(); // 2021
moment(new Date()).format('A'); // 上午
moment(new Date()).format('a'); // 上午
moment(new Date()).format('ALT') // 上午10:58

七、加减

moment().add(1,'months')
moment().add(2,'days')
moment().subtract(2,'days')

八、获取开始结束时间

1、今天

$moment().startOf('day').format('YYYY/MM/DD HH:mm:ss');
$moment().endOf('day').format('YYYY/MM/DD HH:mm:ss');

2、昨天

$moment().day($moment().day() - 1).startOf('day').format('YYYY/MM/DD HH:mm:ss')；
$moment().day($moment().day() - 1).endOf('day').format('YYYY/MM/DD HH:mm:ss')；

3、本周

$moment().weekday(1).startOf('day').format('YYYY/MM/DD HH:mm:ss')
$moment().weekday(7).endOf('day').format('YYYY/MM/DD HH:mm:ss')

4、上周

$moment().week($moment().week() - 1).weekday(1).startOf('day').format('YYYY/MM/DD HH:mm:ss');
$moment().week($moment().week() - 1).weekday(1).endOf('day').format('YYYY/MM/DD HH:mm:ss')

5、本月

$moment().startOf('month').format('YYYY/MM/DD HH:mm:ss');
$moment().endOf('month').format('YYYY/MM/DD HH:mm:ss');

6、上月

$moment().month($moment().month() - 1).startOf('month').format('YYYY/MM/DD HH:mm:ss');
$moment().month($moment().month() - 1).endOf('month').format('YYYY/MM/DD HH:mm:ss');

7、今年

$moment().startOf('year').format('YYYY/MM/DD HH:mm:ss');
$moment().endOf('year').format('YYYY/MM/DD HH:mm:ss');

8、去年

$moment().year($moment().year() - 1).startOf('year').format('YYYY/MM/DD HH:mm:ss');
$moment().year($moment().year() - 1).endOf('year').format('YYYY/MM/DD HH:mm:ss');