微信小程序時間格式化總結

時間格式化，這個問題在很多項目中都會遇到，后端返回的時間格式一般都是一致的，而前端的展示可能是2021年3月12日 15:00:00或者2021-03-12 15:00:00 亦或者是2021.03.12 15:00:00等等，這就需要前端根據UI需要展示，看到很多人是直接處理該字段的值，例如obj.startTime = moment(obj.startTime).format('YYYY-MM-DD HH:mm:ss')。個人認為這是字段展示的不同形式，沒有必要改變該字段，而是應該使用filter，格式化數據的展示。

然而在小程序里 ios真機上不支持 2020-06-28 00:00:00這種時間格式, 必須轉成2020/06/28 00:00:00 再進行格式化。

因此根據以上總結，小程序時間格式化的寫法有：

// 時間格式過濾器
Vue.filter('formatDate', function (time, fmt) {
  // 有些數據后端沒有處理格式如 2021-03-01 00:00:00.0
  time = time.replace('.0', '');
  let value = time && time.replace(/-/g, '/');
  let getDate = new Date(value);
  let o = {
   'M+': getDate.getMonth() + 1,
   'd+': getDate.getDate(),
   'h+': getDate.getHours(),
   'm+': getDate.getMinutes(),
   's+': getDate.getSeconds(),
   'q+': Math.floor((getDate.getMonth() + 3) / 3),
   'S': getDate.getMilliseconds()
  };
  if (/(y+)/.test(fmt)) {
   fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (let k in o) {
   if (new RegExp('(' + k + ')').test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
   }
  }
  return fmt;
 });

頁面上的使用方法是：

 <div class="info-item">
          {{ item.startDate | formatDate('yyyy年MM月dd日') }}~{{ item.endDate | formatDate('yyyy年MM月dd日') }}
        </div>

 

<div class="date f24">有效期: {{ item.startDate | formatDate('yyyy.MM.dd') }}~{{ item.endDate | formatDate('yyyy.MM.dd') }}</div>

這樣就可以根據頁面UI隨意展示時間格式，而非每個字段自己處理一遍。

 

開心寫代碼，愉快工作～多多指教