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() //
③Unix时间戳(秒)
dayjs().unix() //1571195388
④UTC偏移量
dayjs().utcOffset() //480
⑤天数(月)
dayjs().daysInMonth() //31
Dayjs处理时间函数的插件的更多相关文章
- jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)
上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...
- jQuery基本API小结(下)---工具函数-基本插件
一.工具函数 1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$ ...
- 如何在sublime安装ctags函数追踪插件
一.这个插件是需要下载执行软件才能够操作的,下载地址http://prdownloads.sourceforge.net/ctags/ctags58.zip 然后解压到自己喜欢的目录下,我是安装到 D ...
- patchdiff2 函数比较插件
https://code.google.com/archive/p/patchdiff2/downloads
- WordPress插件制作教程(六): 插件函数之动作(Actions)函数
这一篇为大家说一下WordPress插件函数吧,要制作插件,了解这些函数是非常有必要的 WordPress插件函数分为“动作”(Actions)和过滤器”(Filters),WordPress 使用这 ...
- vim里添加自动补齐插件,与python 函数补齐
参考 http://www.jb51.net/article/58009.htm 将 # cat ~/.vimrc filetype plugin on let g:pydiction_locati ...
- discuz 插件核心函数hookscript分析.
function hookscript($script, $hscript, $type = 'funcs', $param = array(), $func = '', $scriptextra = ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- Jquery自定义插件之$.extend()、$.fn和$.fn.extend()
jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...
随机推荐
- static_cast关键字 dynamic_cast关键字
前言 说起C++中的继承.多态.虚函数等概念,可能很多同学都有所了解,但是要说真正熟知的同学可能就不是很多了.最近在编程过程中了解到C++类型的层次转换(这就涉及到了多态和继承的相关概率),通常C语言 ...
- 【题解】小X的AK计划
题目描述 虽然在小X的家乡,有机房一条街,街上有很多机房.每个机房里都有一万个人在切题.小X刚刷完CodeChef,准备出来逛逛.机房一条街有n个机房,第i个机房的坐标为xi,小X的家坐标为0.小X在 ...
- 【BZOJ2138】stone
题目 好厉害的题啊 这道题不难看成一个二分图模型,但是给人一种求最大匹配的感觉,这实在不是很好求的样子,于是自闭了 但是不妨这样来考虑,对于一个需求\(k_i\),我们求一个最大的\(x\leq k_ ...
- poj1285 Combinations, Once Again(泛化背包)
题目传送门 Combinations, Once Again Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1897 A ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- 数据库设计-Mysql数据库表设计的过程中几个关键点
一.表设计过程中应该注意的数据类型 1)更小的通常更好 控制字节长度 2)使用合适的数据类型: 如tinyint只占8个位,char(1024)与varchar(1024)的对比,char用于类似定长 ...
- Linux上部署Springboot相关命令
ps -ef|grep java 看有关java的进程 ps -ef是显示所有进程信息 后面那个grep是匹配的意思 kill -9 123123 213231 后面两个数字是两个进程的进程号pid, ...
- MyEclipse2017搭建android开发环境
1 安装MyEclipse2017cli7; 2 准备安装ADT插件和 Android SDK 开发包;比如:ADT-24.0.2 android-sdk_r24.4.1-windows; 工具栏点击 ...
- Angular的一些常用命令
Angular的一些常用命令 cmd中创建项目: ng new taskmgr -si --style=scss //先不安装依赖,si 为skip install material需要scss样式的 ...
- 启动ABP项目
1.在官网下载ABP项目 2.打开项目选择解决方案,右击还原NuGet包 3.修改appsettings.json中的ConnectionStrings 例子"ConnectionStrin ...