Vue?日期獲取的示例代碼
獲取前幾天的時(shí)間
moment.js是一款現(xiàn)在對(duì)時(shí)間處理的強(qiáng)大的函數(shù)
如果沒(méi)有安裝的話先執(zhí)行npm install moment命令
import moment from 'moment'; export default { data() { return { // 寫(xiě)在data中或者寫(xiě)在methods里面,一定要寫(xiě)不然會(huì)報(bào)錯(cuò) moment } }, methods: { changeRecent(value) { // 開(kāi)始日期 moment(new Date()).format('YYYY-MM-DD')+' '+'23:59:59' // 結(jié)束日期 value 3、7、30 moment(new Date().getTime() - value * 1000 * 24 * 60 * 60).format('YYYY-MM-DD')+' '+'00:00:00'); }, } }
vue 根據(jù)指定日期 獲取日期所在月份的第一天和最后一天
將當(dāng)前時(shí)間格式化 dateFormat(time) { let date = new Date(time); let year = date.getFullYear(); let wk = date.getDay() /* 在日期格式中,月份是從0開(kāi)始的,因此要加0 * 使用三元表達(dá)式在小于10的前面加0,以達(dá)到格式統(tǒng)一 如 09:11:05 * */ let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] let week = weeks[wk] // 拼接 return year + "年" + month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds + ' ' + week; }, 使用:this.newDate = this.dateFormat(new Date()); import moment from 'moment'; // 寫(xiě)在data中或者寫(xiě)在methods里面,一定要寫(xiě)不然會(huì)報(bào)錯(cuò) moment, // 獲取當(dāng)前月的開(kāi)始結(jié)束時(shí)間 getCurrMonthDays() { let obj = { starttime: '', endtime: '' } obj.starttime = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss'); obj.endtime = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss'); return obj }, 使用:console.log(this.getCurrMonthDays())
獲取系統(tǒng)當(dāng)天日期以及前一天和前一月前一年
1、首先vue項(xiàng)目中要安裝到moment.js
獲取前一天的日期
moment().subtract(1, 'day').format('YYYY-MM-DD') //1,day就代表前一天
如果要獲取前一個(gè)月或者前一年就將day換成month或者year,剩下的時(shí)間可以根據(jù)實(shí)際情況來(lái)定
例如前一月
moment().subtract(1, 'month').format('YYYY-MM-DD')
前一年
moment().subtract(1, 'year').format('YYYY-MM-DD')
如果要按照具體的時(shí)間來(lái)的話,在’moment()'中加入對(duì)應(yīng)格式的日期字符串比如’moment(‘2022-3-21’).subtract(2, ‘day’).format(‘YYYY-MM-DD’))
2、使用原生js
<script> let a = getFMdate(0) let b = getFMdate(-1) let c = getFMdate(8) console.log(a, b, c) function getFMdate (number, separator) { let n = parseInt(number) let nd = new Date() let day = nd.getDate() let setd = new Date(nd.setDate(day + n)) let ryear = setd.getFullYear() let rmonth = setd.getMonth() + 1 let rday = setd.getDate() let frmonth, frday; // month day + '0' if (rmonth < 10) { frmonth = '0' + rmonth } else { frmonth = rmonth } if (rday < 10) { frday = '0' + rday } else { frday = rday } // separator let sep = separator ? separator : '-' return ryear + sep + frmonth + sep + frday } </script>
傳入 0 , 獲取今天日期
傳入負(fù)數(shù), 獲取過(guò)去N天日期
傳入整數(shù), 獲取未來(lái)N天日期
這里主要是對(duì)setDate / setMonth / setYear的一個(gè)運(yùn)用,筆者還是建議直接使用vue的moment()方法,底層已經(jīng)幫我們封裝好,不用計(jì)算跨月第一天的前一天或者跨年的前一天,省去了代碼的冗余度,提高效率。
3、也是vue獲取,但是沒(méi)有第一種那么簡(jiǎn)單暴力
// 前一天 beforeDay() { //前一天 let beforeDay = new Date( new Date(this.alarmformSearch.date).getTime() - 24 * 60 * 60 * 1000 ); //計(jì)算當(dāng)前日期 -1 this.alarmformSearch.date = this.convertToDate(beforeDay); //格式化日期并賦值 this.getWarnInfo(); },
// 前兩天 beforeTwoDay() { //前一天 let beforeTwoDay = new Date( new Date(this.alarmformSearch.date).getTime() - 24 * 60 * 60 * 1000 - 24 * 60 * 60 * 1000 ); //計(jì)算當(dāng)前日期 -1 this.alarmformSearch.date = this.convertToDate(beforeTwoDay); //格式化日期并賦值 this.getWarnInfo(); },
convertToDate(date) { var date = new Date(date); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); m = m < 10 ? "0" + m : m; //月小于10,加0 d = d < 10 ? "0" + d : d; //day小于10,加0 return y + "-" + m + "-" + d; },
對(duì)比下來(lái)感覺(jué)第三種還不如寫(xiě)原生js,哈哈,還好vue底層幫我們封裝好了現(xiàn)成的moment()方法,很方便
el-date-picker設(shè)置默認(rèn)時(shí)間為當(dāng)前時(shí)間
<el-form-item label="創(chuàng)建時(shí)間" :label-width="formLabelWidth" > <el-date-picker v-model="addForm.createDate" style="width:100%" type="datetime" placeholder="選擇日期" /> </el-form-item> //data里的數(shù)據(jù) data(){ addForm:{ createDate:new Date() // 只需要在這里聲明的時(shí)候直接值賦為 new Date() } } dingdKpData:"", this.dingdKpData = [this.date_start,this.date_end] getdate(){ //年 let year = new Date().getFullYear(); //月份是從0月開(kāi)始獲取的,所以要+1; let month = new Date().getMonth() +1; //日 let day = new Date().getDate(); //時(shí) let hour = new Date().getHours(); //分 let minute = new Date().getMinutes(); //秒 let second = new Date().getSeconds(); return year + '-' + month + '-' + day; },
<el-form-item label="收款日期" prop="collection_date"> <el-date-picker v-model="baseInfoObj.collection_date" size="small" type="date" placeholder="收款日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"> </el-date-picker> </el-form-item> this.baseInfoObj.collection_date = this.dateFormat('YYYY-mm-dd', new Date()) ==>main.js import { dateFormat } from './utils/day' Vue.prototype.dateFormat = dateFormat ==>utils=>day.js //獲取當(dāng)前日期 參數(shù) "YYYY-mm-dd HH:MM:SS" new Date() export function dateFormat(fmt, date) { let ret; const opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate().toString(), // 日 "H+": date.getHours().toString(), // 時(shí) "M+": date.getMinutes().toString(), // 分 "S+": date.getSeconds().toString() // 秒 // 有其他格式化字符需求可以繼續(xù)添加,必須轉(zhuǎn)化成字符串 }; for (let k in opt) { ret = new RegExp("(" + k + ")").exec(fmt); if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) }; }; return fmt; }
到此這篇關(guān)于Vue 日期獲取的文章就介紹到這了,更多相關(guān)Vue 日期獲取內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)簡(jiǎn)單的登錄彈出框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的登錄彈出框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10vue+springboot實(shí)現(xiàn)登錄功能
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2024-02-02vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08基于Vue3+TypeScript實(shí)現(xiàn)圖片預(yù)覽組件
在現(xiàn)代的 Web 應(yīng)用中,圖片預(yù)覽是一個(gè)常見(jiàn)的需求,本文將介紹如何使用 Vue3 和 TypeScript 開(kāi)發(fā)一個(gè)圖片預(yù)覽組件,支持展示單張或多張圖片,并提供了豐富的配置選項(xiàng),需要的朋友可以參考下2024-04-04vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-08vue2前端調(diào)用WebSocket有消息進(jìn)行通知代碼示例
在Vue項(xiàng)目中實(shí)現(xiàn)全局的消息鏈接監(jiān)聽(tīng)主要涉及到了WebSocket技術(shù),這是一種雙向通信協(xié)議,允許客戶端與服務(wù)器之間實(shí)時(shí)、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2前端調(diào)用WebSocket有消息進(jìn)行通知的相關(guān)資料,需要的朋友可以參考下2024-07-07VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫(kù)展開(kāi)的,經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代,大概是15~16年左右我開(kāi)始解除阿里Iconfont圖標(biāo)庫(kù),剛開(kāi)始就只會(huì)下載圖標(biāo)使用,需要的朋友可以參考下2021-10-10