zoukankan      html  css  js  c++  java
  • Dayjs处理时间函数的插件

           现在很多处理时间格式化的插件,我平时项目中最常用的便是Dayjs这个插件,我觉得这个插件还是很好用的。现在说一下这个插件的基本使用。

           Dayjs并没有覆盖Javascript原生的Date.prototype,而是创造了一个全新的包含Javascript Date对象的Dayjs的对象。Dayjs对象是不可变的,所有的API操作都会返回一个新的Dayjs对象。

      我使用的时候一般会绑在Vue原型上使用。当然,和框架使用没关系

      在Vue中一般是全局安装,然后挂载到Vue原型上

    //安装方式
    yarn add dayjs --save
    npm i dayjs --save

    //引入方式
    import dayjs from 'dayjs' Vue.prototype.$d = dayjs 

    下述介绍的是最常用的几种时间处理方式,原文档中还有一些项目中不常用的,

    有兴趣的话,可以去git查看 https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/API-reference.md

    gitDemo地址:https://github.com/dreamITGirl/VueProgect/tree/master/project-demo/src/components/HandleTime    

      一、基本使用   

    //当前时间
    dayjs()
    //格式化的时间
    this.$d().format('YYYY-MM-DD HH:mm:ss')
    //Date对象
    dayjs(new Date(2019,10,15))//输出结果:Thu, 14 Nov 2019 16:00:00 GMT
    dayjs(new Date(2019,10,15)).format('YYYY-MM-DD) //输出结果:2019-11-15
    //Unix时间戳(毫秒/秒)
    //毫秒和秒的差别就在传入的时间戳是13位还是10位
    dayjs.unix(new Date().getTime())//输出结果 Tue, 15 Oct 2019 08:01:01 GMT
    //自定义时间格式
    dayjs().format('DD-MM-YYYY')//输出结果 15-10-2019
    //复制时间
      Dayjs 对象是不可变的,如果想获得一个对象的拷贝,执行.clone()的方法。像dayjs()中传入一个Dayjs对象也能实现同样的效果
    dayjs().clone()
    //验证时间(返回值是true或false)

        可用单位

    单位 缩写 描述
    date   日期
    day d 星期几(星期天0,星期六6)
    month M 月(一月0,十二月11)
    year Y/y
    hour h
    minute m
    second s
    millisecond ms 毫秒

     二、获取和设置时间

      ①获取年/月/日/星期/时/分/秒/毫秒

    //获取或设置
    //
    dayjs().year()
    dayjs().year(2019)
    //
    dayjs().month() //输出9
    dayjs().month(10).format('YYYY-MM-DD') //输出2019-11-15
    //
    dayjs().date()
    dayjs().date(1)
    //星期
    dayjs().day()
    dayjs.day(1)
    //
    dayjs().hour()
    dayjs().hour(1)
    //
    dayjs().second()
    dayjs().second(1)
    //毫秒
    dayjs().millisecond()
    dayjs().millisecond(1)

      ②设置时间

      dayjs().set( unit : String ,value : Int)

    dayjs().set('date',30).format('YYYY-MM-DD') //2019-10-30

      ③获取时间

    dayjs().get(unit:String)
    dayjs().get('month') //从0开始

    三、时间操作(增加,减少)

      dayjs().startOf('month').add(1,'day').substract(1,‘day’)

      ①增加:增加时间并返回一个新的Dayjs()对象

    //格式
    dayjs().add(value:Number,unit:String) eg: dayjs().add(
    1,'year') //Fri, 16 Oct 2020 01:42:30 GMT

           ②减少  

    //格式
    dayjs().subtract(value:Number,unit:String)
    //举例
    dayjs().subtract(7,'month)// Sat, 16 Mar 2019 01:46:59 GMT

      ③开头时间 : 返回当前时间的开头时间的Dayjs() 对象,如月份第一天 

    //格式
    dayjs().startOf(unit:String)
    //举例
    dayjs().startOf('month').format('YYYY-MM-DD') //2019-10-01 

      ④末尾时间

    //格式
    dayjs().endOf(unit : String)
    //举例
    dayjs().endOf('month').format('YYYY-MM-DD') //2019-10-31

     四、格式化时间 .format()  

    格式 输出 描述
    YY 19 两位数年份
    YYYY 2019 四位数年份
    M 1~12 月份,从1开始
    MM 01~12 月份,两位数
    MMM Jan~Dec 简写的月份名称
    MMMM January-December 完整的月份名称
    D 1~31 月份里的一天
    DD 01~31 月份里的一天,两位数
    d 0~6 一周中的一天,星期天是0
    dd Su~Sa 最简写的一周中一天的名称
    ddd Sun-Sat 简写的一周中一天的名称
    dddd Sunday-Saturday 一周中一天的名称
    H 0~23 小时
    HH 00~23 小时,两位数
    h 1~12 小时,12小时制
    hh 01~12 小时,12小时制,两位数
    m 0~59 分钟
    mm 00~59 分钟,两位数
    s 0~59
    ss 00~59 秒,两位数
    SSS 000~999 毫秒,三位数
    Z +5:00 UTC的偏移量
    ZZ +500 UTC 的偏移量,数字前面加上 0
    A AM  PM  
    a am pm  

    五、时间差  return Number

      ①获取两个时间差,默认返回值是毫秒 

    const date1 = dayjs('2019-11-20')
    const date2 = dayjs('2019-10-15')
    
    date1.diff(date2) //3110400000
    date1.diff(date2,'month') //1
    date1.diff(date2,'month',true) // 1.1666666666666667
    date1.diff(date2,'day') //36

      ②Unix时间戳

    //格式
    dayjs().valueOf()
    //举例
    dayjs().valueOf()  //1571195016139

      ③Unix时间戳(秒)  

    dayjs().unix() //1571195388

      ④UTC偏移量

    dayjs().utcOffset() //480

      ⑤天数(月)

    dayjs().daysInMonth() //31  

       

     

  • 相关阅读:
    cisco/CCNA思科静态路由配置(附PKA文件)
    Web前端常用词汇大全
    解决Linux无法安装pygame问题
    CC2530常用的控制寄存器
    解决MySQL外键约束中的引用列和引用列不兼容问题
    详解使用Hyper-V安装Ubuntu Server 16.10
    虚拟机VMware下CentOS6.6安装教程图文详解
    word论文排版技法之五——标题样式关联多级列表
    如何写《软件需求规格说明书》
    VisualStudio官网使用教程
  • 原文地址:https://www.cnblogs.com/bllx/p/11679366.html
Copyright © 2011-2022 走看看