日期格式化和其他常用方法插件
src/assets/js/dateFilter.js
export default {
/**
* 獲取今天日期
* @param { String } type 返回類型 例如：yyyy-mm-dd hh:mm:ss
* @returns 日期
*/
getToday(type) {
let now = new Date();
return this.timeFormat(now, type)
},
/**
* 獲取某個日期的前幾天/后幾天的日期
* @param { String } date 日期
* @param { number } num 數(shù)字绎晃，表示幾天（分正負數(shù)）
* @param { String } type 返回類型 例如：yyyy-mm-dd hh:mm:ss
* @returns 日期
*/
getIntervalDay(date, num, type) {
let dt = new Date(date);
let targetday_milliseconds = dt.getTime() + 1000 * 60 * 60 * 24 * num;
dt.setTime(targetday_milliseconds);
return this.timeFormat(dt, type);
},
/**
* 獲取date的n個月前/后的今天的日期
* @param {String} date 日期
* @param {number} n 多少個月
* @param {String} type
* @returns 日期
*/
getPreMonth(date, num, type) {
let dt = new Date(date);
let year = dt.getFullYear(); //年
let month = dt.getMonth() + 1; //月
let day = dt.getDate(); //日
let days = new Date(year, month, 0);
days = days.getDate(); //獲取當前日期中月的天數(shù)
let year2 = year;
let month2 = parseInt(month) + num;
if (month2 <= 0) {
year2 = parseInt(year2) - 1;
month2 = 12 + month2;
} else if (month2 > 12) {
year2 = parseInt(year2) + 1;
month2 = month2 % 12;
}
let day2 = day;
let days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
let t2 = year2 + '-' + month2 + '-' + day2;
return this.timeFormat(t2, type);
},
/**
* 獲取某天的那周第一天
* @param {String} date
* @param {String} type
* @returns 日期
*/
getFirstDayOfWeek(date, type) {
let dt = new Date(date);
let weekday = dt.getDay() || 7; //獲取星期幾,getDay()返回值是 0（周日） 到 6（周六） 之間的一個整數(shù)。0||7為7饱须，即weekday的值為1-7
dt.setDate(date.getDate() - weekday + 1); //往前算（weekday-1）天愉昆，年份混驰、月份會自動變化
return this.timeFormat(dt, type);
},
/**
* 獲取本月第一天
* @param {*} type
* @returns 日期
*/
getFirstDayOfMonth(type) {
let date = new Date();
date.setDate(1); //本月第一天
return this.timeFormat(date, type);
},
/**
*格式化日期
* @param {String} dt
* @param {String} type
* @returns 日期
*/
timeFormat(dt, type) { //type:yyyy/mm/dd hh:mm:ss yyyy-mm-dd
let date = new Date(dt);
let year = date.getFullYear(); //年
let month = date.getMonth() + 1; //月
let day = date.getDate(); //日
String(month).length < 2 ? (month = "0" + month) : month;
String(day).length < 2 ? (day = "0" + day) : day;
let hour = date.getHours(); //獲取系統(tǒng)時間
let minute = date.getMinutes(); //分
let second = date.getSeconds(); //秒
String(hour).length < 2 ? (hour = "0" + hour) : hour;
String(minute).length < 2 ? (minute = "0" + minute) : minute;
String(second).length < 2 ? (second = "0" + second) : second;
if (type) {
type = type.toString();
type = type.replace(/yyyy/, year);
type = type.replace(/mm/, month);
type = type.replace(/dd/, day);
type = type.replace(/hh/, hour);
type = type.replace(/mm/, minute);
type = type.replace(/ss/, second);
return type
} else {
return year + "-" + month + "-" + day;
}
}
}
使用方法
- 直接在js中調(diào)用方法
<template>
<div class="home">
<span>日期格式化：{{date}}</span><br/><br/>
<span>今天日期：{{today}}</span><br/><br/>
<span>獲取某個日期的前幾天或幾天后的日期：{{getIntervalDay}}</span><br/><br/>
<span>獲取date的n個月前的今天的日期：{{getPreMonth}}</span><br/><br/>
<span>獲取某天的那周第一天{{getFirstDayOfWeek}}</span><br/><br/>
<span>獲取本月第一天{{getFirstDayOfMonth}}</span><br/><br/>
</div>
</template>
<script>
// @ is an alias to /src
import dateFilter from '@/assets/js/dateFilter'
export default {
name: 'Home',
data(){
return {
date:'',
today:'',
getIntervalDay:'',
getPreMonth:'',
getFirstDayOfWeek:'',
getFirstDayOfMonth:'',
}
},
mounted(){
this.today = dateFilter.getToday('mm/dd');
this.date = dateFilter.timeFormat('2019-07-08','yyyy/mm');
this.getIntervalDay = dateFilter.getIntervalDay('2019-07-08',-10);
this.getPreMonth = dateFilter.getPreMonth('2019-07-08',6);
this.getFirstDayOfWeek = dateFilter.getFirstDayOfWeek(new Date());
this.getFirstDayOfMonth = dateFilter.getFirstDayOfMonth();
}
}
</script>
- 如果要在template里面使用
則需要在main.js里面引入成公共文件扼劈，或者重新封裝過濾器
方法一：寫成公共文件
main.js
//引入公共篩選方法
import dateFilter from '@/assets/js/dateFilter'
for (let key in dateFilter) {
Vue.filter(key, dateFilter[key])
}
<template>
<div class="home">
<span>日期格式化：{{day | timeFormat}}</span>
</div>
</template>
export default {
name: 'Home',
data(){
return {
day:new Date()
}
},
}
方法二：重新封裝過濾器
<template>
<div class="home">
<span>日期格式化：{{day | newDataFormat}}</span><br/><br/>
</div>
</template>
<script>
// @ is an alias to /src
import dateFilter from '@/assets/js/dateFilter'
export default {
name: 'Home',
data(){
return {
day:new Date(),
}
},
filters: {
newDataFormat(date,type) {
return dateFilter.timeFormat(date,type);
}
}
}
</script>
