快捷導(dǎo)航

Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天

更新時(shí)間：2023年10月31日 09:34:33 作者：qq_42753983

這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天

1.下載依賴moment
   npm install moment
2. 在當(dāng)前頁(yè)面使用插件moment
   import moment from "moment";
3.實(shí)際操作
  getDate(val) {
		let month = val.slice(5);
		//當(dāng)前日期
		let time = new Date();
		//選取的月份
		let monthNum = month;
		//某月第一天
		let startTime = moment(time).month(monthNum - 1).date(1).startOf("month")
		                .format("YYYY-MM-DD");
		//某月最后一天
		let endTime = moment(time).month(monthNum - 1).date(1).endOf("month")
				      .format("YYYY-MM-DD");
		//日期選擇器 中的值
		this.dateRange = startTime + "~" + endTime;
	},
4.使用過(guò)程
  調(diào)用這個(gè)方法傳參數(shù)就可以,this.getDate(val)
  val為這種格式  '2022-05'

以下為擴(kuò)展知識(shí)

  1、獲取當(dāng)前時(shí)間 
  moment().format('YYYY-MM-DD HH:mm:ss')
  2、獲取當(dāng)月的一號(hào)
  moment().startOf('months').format('YYYY-MM-DD')
  3、獲取當(dāng)月的最后一天
  moment().endOf('months').format('YYYY-MM-DD')
  4、獲取上個(gè)月的一號(hào) 
  moment().subtract(1, 'months').startOf('months').format('YYYY-MM-DD')
  5、獲取上個(gè)月的最后一天
  moment().subtract(1, 'months').endOf('months').format('YYYY-MM-DD')
  6、獲取當(dāng)前年
  moment().year()
  7、獲取上一年
  moment().add(-1, 'years').format('YYYY')
  8、獲取下一年
  moment().add(1, 'years').format('YYYY')
  9、獲取去年的月初
  moment().add(-1, 'years').startOf('months').format('YYYY-MM-DD')
  10、獲取去年的月末
  moment().add(-1, 'years').month(11).endOf('months').format('YYYY-MM-DD')

到此這篇關(guān)于Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天的文章就介紹到這了,更多相關(guān)vue獲取當(dāng)前月的第一天和最后一天內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)
這篇文章主要介紹了ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實(shí)現(xiàn)寬度自適應(yīng),本文給大家分享實(shí)現(xiàn)方案，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
從前端Vue到后端Java防重復(fù)提交的全面解決方案
這篇文章主要給大家介紹了關(guān)于從前端Vue到后端Java防重復(fù)提交的全面解決方案,通過(guò)示例講解了包括禁用提交按鈕、表單令牌、防抖與節(jié)流等前端技術(shù),以及表單令牌驗(yàn)證、數(shù)據(jù)庫(kù)唯一約束、事務(wù)隔離與鎖機(jī)制等后端技術(shù),需要的朋友可以參考下
2025-05-05
vue中使用定義好的變量設(shè)置css樣式詳解
vue項(xiàng)目中我們可以通過(guò)行內(nèi)樣式進(jìn)行動(dòng)態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿?dòng)到DOM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下
2023-04-04
vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue3中keep-alive緩存問(wèn)題的解決方法
文章主要介紹了在Vue3中使用keep-alive組件時(shí)的緩存問(wèn)題及其解決方法,包括手動(dòng)清除緩存、使用VueDevtools調(diào)試、自定義keep-alive邏輯、升級(jí)Vue版本、使用路由重定向和記錄keep-alive狀態(tài)等方法,幫助了解決keep-alive緩存問(wèn)題,保持組件高效性和維護(hù)性
2026-04-04
Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟
本文主要介紹了Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
解決vue的touchStart事件及click事件沖突問(wèn)題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue-cli3.X使用px2 rem遇到的問(wèn)題及解決方法
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08