JS常用時間操作moment.js的使用方法
更新時間：2023年09月16日 10:29:59 作者：后端常規(guī)開發(fā)人員
Moment.js是一個輕量級的JavaScript時間庫,通常會對時間進行下面這幾個操作：比如獲取時間,設(shè)置時間,格式化時間,比較時間等等,本文就來介紹一下如何使用,感興趣的可以了解下
Moment.js是一個輕量級的JavaScript時間庫，它方便了日常開發(fā)中對時間的操作，提高了開發(fā)效率。日常開發(fā)中，通常會對時間進行下面這幾個操作：比如獲取時間，設(shè)置時間，格式化時間，比較時間等等。下面就是我對moment.js使用過程中的整理，方便以后查閱。
一、引入moment.js
1.Node.js方式引入
（1）安裝
npm install moment 或者 yarn add moment
（2）引入
// require 方式
var moment = require('moment');
// import 方式
import moment from 'moment'; 2.瀏覽器方式引入
<script src="moment.js"></script>
二、moment時區(qū)和轉(zhuǎn)換
1.時區(qū)的設(shè)置
// require 方式
require('moment/locale/zh-cn')
moment.locale('zh-cn');
// import 方式
import 'moment/locale/zh-cn'
moment.locale('zh-cn');
//使用utc時區(qū),后面可繼續(xù)添加相關(guān)獲取時間或格式化操作
moment.utc()2.UTC和北京時間的互轉(zhuǎn)
2.1 目標是UTC時間，則用moment(utcTime).utc()方法，舉例：
moment(utcTime).utc().format('YYYY-MM-DD HH:mm:ss')2.2 目標是北京時間，則用moment(utcTime).utcOffset(8)方法，舉例：
moment(utcTime).utcOffset(8).format('YYYY/MM/DD HH:mm:ss')三、使用
1.獲取時間
（1）獲取當前時間
moment()
（2）獲取今天0時0分0秒
moment().startOf('day')
（3）獲取本周第一天(周日)0時0分0秒
moment().startOf('week')
（4）獲取本周周一0時0分0秒
moment().startOf('isoWeek')
（5）獲取當前月第一天0時0分0秒
moment().startOf('month')
（6）獲取今天23時59分59秒
moment().endOf('day')
（7）獲取本周最后一天(周六)23時59分59秒
moment().endOf('week')
（8）獲取本周周日23時59分59秒
moment().endOf('isoWeek')
（9）獲取當前月最后一天23時59分59秒
moment().endOf('month')
（10）獲取當前月的總天數(shù)
moment().daysInMonth()
（11）獲取時間戳(以秒為單位)
moment().format('X') // 返回值為字符串類型
moment().unix() // 返回值為數(shù)值型
（12）獲取時間戳(以毫秒為單位)
moment().format('x') // 返回值為字符串類型
moment().valueOf() // 返回值為數(shù)值型（13）獲取年份
moment().year()
moment().get('year')
（14）獲取月份
moment().month() // (0~11, 0: January, 11: December)
moment().get('month')
（15）獲取一個月中的某一天
moment().date()
moment().get('date')
（16）獲取一個星期中的某一天
moment().day() // (0~6, 0: Sunday, 6: Saturday)
moment().weekday() // (0~6, 0: Sunday, 6: Saturday)
moment().isoWeekday() // (1~7, 1: Monday, 7: Sunday)
moment().get('day')
mment().get('weekday')
moment().get('isoWeekday')
（17）獲取小時
moment().hours()
moment().get('hours')
（18）獲取分鐘
moment().minutes()
moment().get('minutes')
（19）獲取秒數(shù)
moment().seconds()
moment().get('seconds')
（20）獲取當前的年月日時分秒
moment().toArray() // [years, months, date, hours, minutes, seconds, milliseconds]
moment().toObject() // {years: xxxx, months: x, date: xx ...}
2.設(shè)置時間
（1）設(shè)置年份
moment().year(2019)
moment().set('year', 2019)
moment().set({year: 2019})
（2）設(shè)置月份
moment().month(11) // (0~11, 0: January, 11: December)
moment().set('month', 11)
（3）設(shè)置某個月中的某一天
moment().date(15)
moment().set('date', 15)
（4）設(shè)置某個星期中的某一天
moment().weekday(0) // 設(shè)置日期為本周第一天（周日）
moment().isoWeekday(1) // 設(shè)置日期為本周周一
moment().set('weekday', 0)
moment().set('isoWeekday', 1)
（5）設(shè)置小時
moment().hours(12)
moment().set('hours', 12)
（6）設(shè)置分鐘
moment().minutes(30)
moment().set('minutes', 30)
（7）設(shè)置秒數(shù)
moment().seconds(30)
moment().set('seconds', 30)
（8）年份+1
moment().add(1, 'years')
moment().add({years: 1})
（9）月份+1
moment().add(1, 'months')
（10）日期+1
moment().add(1, 'days')
（11）星期+1
moment().add(1, 'weeks')
（12）小時+1
moment().add(1, 'hours')
（13）分鐘+1
moment().add(1, 'minutes')
（14）秒數(shù)+1
moment().add(1, 'seconds')
（15）年份-1
moment().subtract(1, 'years')
moment().subtract({years: 1})
（16）月份-1
moment().subtract(1, 'months')
（17）日期-1
moment().subtract(1, 'days')
（18）星期-1
moment().subtract(1, 'weeks')
（19）小時-1
moment().subtract(1, 'hours')
（20）分鐘-1
moment().subtract(1, 'minutes')
（21）秒數(shù)-1
moment().subtract(1, 'seconds')
3.格式化時間
| 格式代碼 | 說明 | 返回值例子 |
|---|---|---|
| M | 數(shù)字表示的月份，沒有前導零 | 1到12 |
| MM | 數(shù)字表示的月份，有前導零 | 01到12 |
| MMM | 三個字母縮寫表示的月份 | Jan到Dec |
| MMMM | 月份，完整的文本格式 | January到December |
| Q | 季度 | 1到4 |
| D | 月份中的第幾天，沒有前導零 | 1到31 |
| DD | 月份中的第幾天，有前導零 | 01到31 |
| d | 星期中的第幾天，數(shù)字表示 | 0到6，0表示周日，6表示周六 |
| ddd | 三個字母表示星期中的第幾天 | Sun到Sat |
| dddd | 星期幾，完整的星期文本 | 從Sunday到Saturday |
| w | 年份中的第幾周 | 如42：表示第42周 |
| YYYY | 四位數(shù)字完整表示的年份 | 如：2014 或 2000 |
| YY | 兩位數(shù)字表示的年份 | 如：14 或 98 |
| A | 大寫的AM PM | AM PM |
| a | 小寫的am pm | am pm |
| HH | 小時，24小時制，有前導零 | 00到23 |
| H | 小時，24小時制，無前導零 | 0到23 |
| hh | 小時，12小時制，有前導零 | 00到12 |
| h | 小時，12小時制，無前導零 | 0到12 |
| m | 沒有前導零的分鐘數(shù) | 0到59 |
| mm | 有前導零的分鐘數(shù) | 00到59 |
| s | 沒有前導零的秒數(shù) | 1到59 |
| ss | 有前導零的描述 | 01到59 |
| X | Unix時間戳 | 1411572969 |
（1）格式化年月日： ‘xxxx年xx月xx日’
moment().format('YYYY年MM月DD日')
（2）格式化年月日： ‘xxxx-xx-xx’
moment().format('YYYY-MM-DD')
（3）格式化時分秒(24小時制)： ‘xx時xx分xx秒’
moment().format('HH時mm分ss秒')
（4）格式化時分秒(12小時制)：‘xx:xx:xx am/pm’
moment().format('hh:mm:ss a')
（5）格式化時間戳(以毫秒為單位)
moment().format('x') // 返回值為字符串類型
4.比較時間
（1）獲取兩個日期之間的時間差
let start_date = moment().subtract(1, 'weeks') let end_date = moment() end_date.diff(start_date) // 返回毫秒數(shù) end_date.diff(start_date, 'months') // 0 end_date.diff(start_date, 'weeks') // 1 end_date.diff(start_date, 'days') // 7 start_date.diff(end_date, 'days') // -7
5.轉(zhuǎn)化為JavaScript原生Date對象
moment().toDate() new Date(moment())
6.日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 五月 24日 2019, 7:47:43 晚上
moment().format('dddd'); // 星期五
moment().format("MMM Do YY"); // 5月 24日 19
moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-05-24T19:47:43+08:00
7.相對時間輸出實例
moment("20111031", "YYYYMMDD").fromNow(); // 8 年前
moment("20120620", "YYYYMMDD").fromNow(); // 7 年前
moment().startOf('day').fromNow(); // 20 小時前
moment().endOf('day').fromNow(); // 4 小時內(nèi)
moment().startOf('hour').fromNow(); // 1 小時前
8.日歷時間輸出實例
moment().subtract(10, 'days').calendar(); // 2019年5月14日 moment().subtract(6, 'days').calendar(); // 上周六晚上7點49 moment().subtract(3, 'days').calendar(); // 本周二晚上7點49 moment().subtract(1, 'days').calendar(); // 昨天晚上7點49分 moment().calendar(); // 今天晚上7點49分 moment().add(1, 'days').calendar(); // 明天晚上7點49分 moment().add(3, 'days').calendar(); // 下周一晚上7點49 moment().add(10, 'days').calendar(); // 2019年6月3日
9.多語言支持輸出實例
moment().format('L'); // 2019-05-24
moment().format('l'); // 2019-05-24
moment().format('LL'); // 2019年5月24日
moment().format('ll'); // 2019年5月24日
moment().format('LLL'); // 2019年5月24日晚上7點50分
moment().format('lll'); // 2019年5月24日晚上7點50分
moment().format('LLLL'); // 2019年5月24日星期五晚上7點50分
moment().format('llll'); // 2019年5月24日星期五晚上7點50分
10.其它實用技巧
moment().format("YYYY-MM-DD") //格式化顯示當前時間
`${moment().subtract("month", +1).format("YYYY-MM")}-01` //上一個月的1號
`${moment().add("month", -1).format("YYYY-MM")}-01` //還是上一個月1號
let M = `${moment().format("YYYY-MM")}-01` //本月一號
moment(M).add("days", -1).format("YYYY-MM-DD") //上一個月月底
moment().startOf("year").format("YYYY-MM-DD") //本年的的開始日期，（"2019-01-01"）
moment().endOf("year").format("YYYY-MM-DD") //本年的的結(jié)束日期，（"2019-12-31"）
//moment 轉(zhuǎn)成時間戳
moment().valueOf()
//時間戳 轉(zhuǎn) moment
moment(string).format()
更多可參見官方文檔：文檔 | Moment.js 中文網(wǎng)
到此這篇關(guān)于JS常用時間操作moment.js的使用方法的文章就介紹到這了,更多相關(guān)moment.js使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)鼠標框選效果,可實現(xiàn)鼠標點擊出現(xiàn)框選效果的功能,同時下方實時顯示框選大小,涉及javascript鼠標事件的響應與頁面元素的動態(tài)運算技巧,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了微信小程序工具函數(shù)封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要是對IE與FireFox的JavaScript兼容問題解決辦法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了js獲取會話框prompt的返回值的方法,通過一個簡單的密碼判斷實例分析了js獲取會話框prompt返回值的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了javascript表單正則應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了js無提示關(guān)閉瀏覽器窗口的兩種方法分析,需要的朋友可以參考下2016-11-11
Webpack?5的新特性和改進為前端開發(fā)者提供了更強大、更高效的構(gòu)建工具,通過內(nèi)置的持久性緩存插件、優(yōu)化的默認配置、Webpack?CLI的改進等,Webpack?5使得構(gòu)建過程更加簡化,性能更加優(yōu)越2024-05-05
IE6/7中g(shù)etAttribute獲取href/src 屬性(相對路徑0值與其它瀏覽器不同
IE6/7中g(shù)etAttribute獲取href/src 屬性(相對路徑0值與其它瀏覽器不同的解決方法2011-08-08
JavaScript簡單實現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了如何利用Cesium實現(xiàn)衛(wèi)星在軌繞行動畫，文中的示例代碼講解詳細，對我們了解Cesium有一定的幫助，感興趣的可以嘗試一下2022-06-06