**
一、自定義date.js
**
/**
* 對Date的擴展，將 Date 轉化爲指定格式的String
* 月(M)、日(d)、12小時(h)、24小時(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 個佔位符
* 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)
* eg:
* "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423
* "yyyy-MM-dd E HH:mm:ss" ==> 2009-03-10 二 20:09:04
* "yyyy-MM-dd EE hh:mm:ss" ==> 2009-03-10 週二 08:09:04
* "yyyy-MM-dd EEE hh:mm:ss" ==> 2009-03-10 星期二 08:09:04
* "yyyy-M-d h:m:s.S" ==> 2006-7-2 8:9:4.18
*/
function formatDate(date, fmt) {
let o = {
'M+': date.getMonth() + 1,//月份
'd+': date.getDate(), //日
'H+': date.getHours(),//小時
"h+": date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小時
'm+': date.getMinutes(),//分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
var week = {
"0" : "日",
"1" : "一",
"2" : "二",
"3" : "三",
"4" : "四",
"5" : "五",
"6" : "六"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "星期" : "周") : "")+week[date.getDay()+""]);
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
//
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
// filter過濾器（必須先引入Vue.js）
Vue.filter('dateFormat', function (date, format='yyyy-MM-dd HH:mm:ss') {
return formatDate(date,format);
)}
二、在頁面中引入date.js，然後調用時間格式化過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時間格式化(Vue過濾器)</title>
<style type="text/css">
.lable{color: red;}
</style>
</head>
<body>
<!--
1. 理解過濾器
功能: 對要顯示的數據進行特定格式化後再顯示
注意: 並沒有改變原本的數據, 可是產生新的對應的數據
2. 編碼
1). 定義過濾器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進行一定的數據處理
return newValue
})
2). 使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 對當前時間進行指定格式顯示-->
<div id="test">
<h2>顯示格式化的日期時間</h2>
<p><span class="lable">原始時間：</span>{{time}}</p>
<p><span class="lable">默認格式:</span> {{time | dateFormat}}</p>
<p><span class="lable">年月日: </span>{{time | dateFormat('yyyy-MM-dd')}}</p>
<p><span class="lable">年月日 時分秒 周幾:</span> {{time | dateFormat('yyyy-MM-dd hh:mm:ss EE')}}</p>
<p><span class="lable">年月日 時分秒 星期:</span> {{time | dateFormat('yyyy-MM-dd hh:mm:ss EEE')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="date.js"></script>
<script>
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {
setInterval(() => {
this.time = new Date()
}, 1000)
}
})
</script>
</body>
</html>
作者：qq15577969
來源：CSDN
原文：https://blog.csdn.net/qq15577969/article/details/89157700
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！