如今不少處理時間格式化的插件,我平時項目中最經常使用的即是Dayjs這個插件,我以爲這個插件仍是很好用的。如今說一下這個插件的基本使用。git
Dayjs並無覆蓋Javascript原生的Date.prototype,而是創造了一個全新的包含Javascript Date對象的Dayjs的對象。Dayjs對象是不可變的,全部的API操做都會返回一個新的Dayjs對象。github
我使用的時候通常會綁在Vue原型上使用。固然,和框架使用不要緊npm
在Vue中通常是全局安裝,而後掛載到Vue原型上框架
//安裝方式
yarn add dayjs --save
npm i dayjs --save
//引入方式
import dayjs from 'dayjs' Vue.prototype.$d = dayjs
下述介紹的是最經常使用的幾種時間處理方式,原文檔中還有一些項目中不經常使用的,this
有興趣的話,能夠去git查看 https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/API-reference.mdspa
gitDemo地址:https://github.com/dreamITGirl/VueProgect/tree/master/project-demo/src/components/HandleTime prototype
1、基本使用 插件
//當前時間 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)
可用單位unix
單位 | 縮寫 | 描述 |
date | 日期 | |
day | d | 星期幾(星期天0,星期六6) |
month | M | 月(一月0,十二月11) |
year | Y/y | 年 |
hour | h | 時 |
minute | m | 分 |
second | s | 秒 |
millisecond | ms | 毫秒 |
2、獲取和設置時間code
①獲取年/月/日/星期/時/分/秒/毫秒
//獲取或設置 //年 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開始
3、時間操做(增長,減小)
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
4、格式化時間 .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 |
5、時間差 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