现在很多处理时间格式化的插件,我平时项目中最常用的便是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() //

  ③Unix时间戳(秒)  

dayjs().unix() //1571195388

  ④UTC偏移量

dayjs().utcOffset() //480

  ⑤天数(月)

dayjs().daysInMonth() //31  

  

 

Dayjs处理时间函数的插件的更多相关文章

  1. jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  2. jQuery基本API小结(下)---工具函数-基本插件

    一.工具函数 1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$ ...

  3. 如何在sublime安装ctags函数追踪插件

    一.这个插件是需要下载执行软件才能够操作的,下载地址http://prdownloads.sourceforge.net/ctags/ctags58.zip 然后解压到自己喜欢的目录下,我是安装到 D ...

  4. patchdiff2 函数比较插件

    https://code.google.com/archive/p/patchdiff2/downloads

  5. WordPress插件制作教程(六): 插件函数之动作(Actions)函数

    这一篇为大家说一下WordPress插件函数吧,要制作插件,了解这些函数是非常有必要的 WordPress插件函数分为“动作”(Actions)和过滤器”(Filters),WordPress 使用这 ...

  6. vim里添加自动补齐插件,与python 函数补齐

    参考  http://www.jb51.net/article/58009.htm 将 # cat ~/.vimrc filetype plugin on let g:pydiction_locati ...

  7. discuz 插件核心函数hookscript分析.

    function hookscript($script, $hscript, $type = 'funcs', $param = array(), $func = '', $scriptextra = ...

  8. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  9. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

随机推荐

  1. Cocos2d Box2D之静态刚体

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. b2_staticBody 在模拟环境下静态物体是不会移动的,就好像有无限大的质量.在Box2D的内部会将质量至反,存储为零.静态物体也可 ...

  2. python学习第二天--字符串及格式化输出

    # 字符串# 字符串取值:字符串名[索引值] 只能取单个值# 正序访问,从0开始str1 = "hello world"print(str1[3]) # 输出"l&quo ...

  3. java虚拟机规范(se8)——class文件格式(五)

    4.7.1 定义和命名新属性 允许编译器定义和发布的class文件在class文件结构体.field_info结构体.method_info结构体和Code结构体中的attributes表中包含新的属 ...

  4. 如何在嵌套的app中运用vue去写单页面H5

    本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...

  5. 使用批处理发布 QT 的程序

    1. 将 QT Creator 生成的 exe 文件拷贝到一个目录中 :C:\Users\zyy\Desktop\qtrelease 2.新建 bat 文件:qt.bat . 编辑文件,注意替换 QT ...

  6. Aspnetcore下面服务器热更新与配置热加载

    原文:Aspnetcore下面服务器热更新与配置热加载 Asp.net的热更新方案Appdomain在aspnetcore中不被支持了 新的方案如下: 配置文件更新选项 reloadOnChange ...

  7. 从一个Activity打开另外一个Activity

    public class MainActivity extends Activity { /** Called when the activity is first created. */ @Over ...

  8. Android关于界面一定时间无操作自动跳转到指定界面的实现

    主要用到的功能,自定义一个定时器CountTimer继承CountDownTimer. public class CountTimer extends CountDownTimer { private ...

  9. 使用Surface View来显示图片

    public class YUVImageView extends SurfaceView { private static final String TAG = "YUVImageView ...

  10. 利用powerDesigner15.1连接oracle数据库并自动生成表结构

    利用powerDesigner15.1连接oracle数据库并自动生成表结构 参考:http://blog.csdn.net/qq_24531461/article/details/76713802 ...