Vue?日期獲取的示例代碼
更新時間：2023年01月10日 12:00:25 作者：夢之歸途
moment.js是一款現(xiàn)在對時間處理的強大的函數，這篇文章主要介紹了Vue?日期獲取的示例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
獲取前幾天的時間
moment.js是一款現(xiàn)在對時間處理的強大的函數
如果沒有安裝的話先執(zhí)行npm install moment命令
import moment from 'moment';
export default {
data() {
return {
// 寫在data中或者寫在methods里面，一定要寫不然會報錯
moment
}
},
methods: {
changeRecent(value) {
// 開始日期
moment(new Date()).format('YYYY-MM-DD')+' '+'23:59:59'
// 結束日期 value 3、7、30
moment(new Date().getTime() - value * 1000 * 24 * 60 * 60).format('YYYY-MM-DD')+' '+'00:00:00');
},
}
}vue 根據指定日期 獲取日期所在月份的第一天和最后一天
將當前時間格式化
dateFormat(time) {
let date = new Date(time);
let year = date.getFullYear();
let wk = date.getDay()
/* 在日期格式中，月份是從0開始的，因此要加0
* 使用三元表達式在小于10的前面加0，以達到格式統(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';
// 寫在data中或者寫在methods里面，一定要寫不然會報錯
moment,
// 獲取當前月的開始結束時間
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)當天日期以及前一天和前一月前一年
1、首先vue項目中要安裝到moment.js
獲取前一天的日期
moment().subtract(1, 'day').format('YYYY-MM-DD') //1，day就代表前一天如果要獲取前一個月或者前一年就將day換成month或者year，剩下的時間可以根據實際情況來定
例如前一月
moment().subtract(1, 'month').format('YYYY-MM-DD')前一年
moment().subtract(1, 'year').format('YYYY-MM-DD')如果要按照具體的時間來的話，在’moment()'中加入對應格式的日期字符串比如’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 ， 獲取今天日期
傳入負數， 獲取過去N天日期
傳入整數， 獲取未來N天日期
這里主要是對setDate / setMonth / setYear的一個運用，筆者還是建議直接使用vue的moment()方法，底層已經幫我們封裝好，不用計算跨月第一天的前一天或者跨年的前一天，省去了代碼的冗余度，提高效率。
3、也是vue獲取，但是沒有第一種那么簡單暴力
// 前一天
beforeDay() {
//前一天
let beforeDay = new Date(
new Date(this.alarmformSearch.date).getTime() - 24 * 60 * 60 * 1000
); //計算當前日期 -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
); //計算當前日期 -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;
},對比下來感覺第三種還不如寫原生js，哈哈，還好vue底層幫我們封裝好了現(xiàn)成的moment（）方法，很方便
el-date-picker設置默認時間為當前時間
<el-form-item
label="創(chuàng)建時間"
:label-width="formLabelWidth"
>
<el-date-picker
v-model="addForm.createDate"
style="width:100%"
type="datetime"
placeholder="選擇日期"
/>
</el-form-item>
//data里的數據
data(){
addForm:{
createDate:new Date() // 只需要在這里聲明的時候直接值賦為 new Date()
}
}
dingdKpData:"",
this.dingdKpData = [this.date_start,this.date_end]
getdate(){
//年
let year = new Date().getFullYear();
//月份是從0月開始獲取的，所以要+1;
let month = new Date().getMonth() +1;
//日
let day = new Date().getDate();
//時
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
//獲取當前日期 參數 "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(), // 時
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以繼續(xù)添加，必須轉化成字符串
};
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;
}
到此這篇關于Vue 日期獲取的文章就介紹到這了,更多相關Vue 日期獲取內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的登錄彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
在Vue中通過Mustache模板引擎將data中的文本數據插入到HTML中,下面這篇文章主要給大家介紹了關于Vue中Mustache模板引擎插值語法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue+springboot實現(xiàn)登錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
elementui 開始結束時間可以選擇同一天不同時間段的實現(xiàn)代碼
這篇文章主要介紹了elementui 開始結束時間可以選擇同一天不同時間段的實現(xiàn)代碼,需要先在main.js中導入相應代碼,代碼簡單易懂,需要的朋友可以參考下2024-02-02
vue項目中按需引入element-ui的正確實現(xiàn)方法
這篇文章主要介紹了vue項目中按需引入element-ui的正確實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中的echarts圖表如何實現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實現(xiàn)loading效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue3+TypeScript實現(xiàn)圖片預覽組件
在現(xiàn)代的 Web 應用中,圖片預覽是一個常見的需求,本文將介紹如何使用 Vue3 和 TypeScript 開發(fā)一個圖片預覽組件,支持展示單張或多張圖片,并提供了豐富的配置選項,需要的朋友可以參考下2024-04-04
vue與bootstrap實現(xiàn)時間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實現(xiàn)時間選擇器的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-08-08
在Vue項目中實現(xiàn)全局的消息鏈接監(jiān)聽主要涉及到了WebSocket技術,這是一種雙向通信協(xié)議,允許客戶端與服務器之間實時、高效地交換數據,這篇文章主要給大家介紹了關于vue2前端調用WebSocket有消息進行通知的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了VUE在線調用阿里Iconfont圖標庫的方法,內容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經歷了從網站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，需要的朋友可以參考下2021-10-10