zoukankan      html  css  js  c++  java
  • moment.js 前端日期格式化的常用方法

    原文:https://blog.csdn.net/halo1416/article/details/83620022

    官网:http://momentjs.cn/

    vue项目中,需要把 moment.js 挂载到全局上(即vue的原型链上),访问时直接使用 this.moment() ;

    vue项目中不挂载到全局,单文件(单组件)使用:

              ==>>  import moment from "moment";      然后直接使用 moment() 

    1. 初始化日期 / 时间

    初始化日期:moment().format('YYYY-MM-DD');

    初始化日期时间:moment().format('YYYY-MM-DD HH:mm:ss');

    2. 格式化日期 / 时间

    格式化日期:moment(value).format('YYYY-MM-DD');

    格式化日期时间:moment(value).format('YYYY-MM-DD HH:mm:ss');

    3. 加/减  ==>>  操作之前必须使用 this.moment(日期变量) ;将要操作的日期转为 moment.js 可以处理的日期时间格式

    加法:this.moment().add(1, 'months').format('YYYY-MM-DD');    ==>> 当前日期加一个月并输出格式为 'YYYY-MM-DD'

    加法:this.moment(startDate).add(2, 'days').format('YYYY-MM-DD')      ==>> 指定日期(startDate)加2天并输出格式                                                                                                                                       为 'YYYY-MM-DD'

    减法: this.moment().subtract(7, 'days');     ==>> 当前时间减去7天

    加法:this.moment(startDate).subtract(2, 'days').format('YYYY-MM-DD')      ==>> 指定日期(startDate)加减去2天并输出格式                                                                                                                                       为 'YYYY-MM-DD'

    4. 获取星期几

    获取星期几: this.moment().day()  或  this.moment(startDate).day()      ==>> 当前日期/指定日期 是星期几

    5. 获取毫秒数

    获取毫秒数:this.moment().day()  或  this.moment(startDate).valueOf()   

                         ==>> 在获取指定时间的毫秒数时,必须要有日期。即startDate包括日期时间

    6. 获取时间差(以毫秒计算)

    两个日期/时间的时差:this.moment(endTime).diff(this.moment(startTime),'days' )

                                         ==>>  开始时间和结束时间的时间差,以“天”为单位;endTime和startTime都是毫秒数

                                        this.moment(endTime).diff(this.moment(startTime), 'minutes')

                                         ==>>  开始时间和结束时间的时间差,以“分钟”为单位

                        ==>> 注意:计算时间差时,可以以 “years”、“days”、“hours”、“minutes” 以及 "seconds" 为单位输出!

    7. 两个具体的日期之差(天数,也可以是年)

    8. 获取时、分、秒

    原理:利用字符串的 split 方法拆分时分秒,然后分别用moment的 hour、minute 和 second 方法;带有日期的可以用 .valueof() 方法。

    const fixStart = '08:00:00'

    const getHour = this.moment().hour(Number(fixStart.split(':')[0]));
    const getMinute = this.moment().minute(Number(fixStart.split(':')[1]));
    const getSecond = this.moment().second(Number(fixStart.split(':')[2]));

    // 描述为0,直接写出second(0)
    const getHour_Minute_Second = this.moment().hour(Number(fixStart.split(':')[0])).minute(Number(fixStart.split(':')[1])).second(0);

    console.log('=====输出',getHour,getMinute,getSecond,getHour_Minute_Second);
    得到的结果都是moment.js 自身的时间格式。可以用 format 转换为自己想要的格式,也可以用 diff 方法做时间差的计算

    9. 将毫秒数转为时分秒

    注意:毫秒转为其他单位时,达到你想要转的单位时,为1,超过时不管,不足时为0;

               如4800000(80分钟),转为天:0

                                                       转为小时:1

                                                       转为分钟:20

                                                       转为秒:0

    const msTime = 4800000; //80分钟

    moment.duration(msTime).hours(); //转为小时,值为1
    moment.duration(msTime).minutes(); //转为分钟,值为20
    moment.duration(msTime).seconds(); //转为秒,值为0
    转为其他单位:

    moment.duration(msTime, 'seconds'); //转为秒
    moment.duration(msTime, 'minutes'); //转为分
    moment.duration(msTime, 'hours'); //转为小时
    moment.duration(msTime, 'days'); //转为天
    moment.duration(msTime, 'weeks'); //转为周
    moment.duration(msTime, 'months'); //转为月
    moment.duration(msTime, 'years'); //转为年
    对应的显示格式:

    10. 判断一个日期是否在两个日期之前  isBetween

    语法: this.moment().isBetween(moment-like, moment-like, String, String);

    a. 不包含起始这两个日期(只有两个参数)   ==>> 中文网只有两个参数

    this.moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
    this.moment('2010-10-19').isBetween('2010-10-19', '2010-10-25'); // false
    this.moment('2010-10-25').isBetween('2010-10-19', '2010-10-25'); // false
    b. 自定义是否包含起始日期(四个参数,主要是第四个参数)   ==>> 英文网才有四个参数

            第三个参数,固定为null;

            第四个参数,字符串,( ) 表示不包含,[ ] 表示包含。右括号制开始日期,右括号控制结束日期

    this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '()'); //false
    this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '[)'); //true
    this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '()'); //false
    this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '(]'); //true
    this.moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '[]'); //true
     

  • 相关阅读:
    node.js+mysql接口入门
    input边写边验证?正则表达式写在属性里?小技巧
    创建vue,react项目
    jquery在网页中加载本地json文件
    OpenFeigin服务接口调用
    Ribbon负载均衡服务调用
    Consul服务注册与发现
    Eureka服务注册与发现
    springboot项目在idea实现热部署
    设计模式——单例模式
  • 原文地址:https://www.cnblogs.com/zhang1f/p/14573552.html
Copyright © 2011-2022 走看看