• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序时间格式化总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

时间格式化,这个问题在很多项目中都会遇到,后端返回的时间格式一般都是一致的,而前端的展示可能是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 再进行格式化。

因此根据以上总结,小程序时间格式化的写法有:

 1 // 时间格式过滤器
 2 Vue.filter(\'formatDate\', function (time, fmt) {
 3   // 有些数据后端没有处理格式如 2021-03-01 00:00:00.0
 4   time = time.replace(\'.0\', \'\');
 5   let value = time && time.replace(/-/g, \'/\');
 6   let getDate = new Date(value);
 7   let o = {
 8    \'M+\': getDate.getMonth() + 1,
 9    \'d+\': getDate.getDate(),
10    \'h+\': getDate.getHours(),
11    \'m+\': getDate.getMinutes(),
12    \'s+\': getDate.getSeconds(),
13    \'q+\': Math.floor((getDate.getMonth() + 3) / 3),
14    \'S\': getDate.getMilliseconds()
15   };
16   if (/(y+)/.test(fmt)) {
17    fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + \'\').substr(4 - RegExp.$1.length))
18   }
19   for (let k in o) {
20    if (new RegExp(\'(\' + k + \')\').test(fmt)) {
21     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((\'00\' + o[k]).substr((\'\' + o[k]).length)))
22    }
23   }
24   return fmt;
25  });

页面上的使用方法是:

 <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随意展示时间格式,而非每个字段自己处理一遍。

 

开心写代码,愉快工作~多多指教


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap