uni-app如何通过过滤器转换周一到周日的显示

星婷君_6420

星婷君_6420

2026-08-16

126人浏览

原创

直接用 formatdate 的 e 占位符可输出“星期一”,但需工具函数支持该标识;不支持时应 fallback 为 getday() 查数组;vue 3 中过滤器已移除,须改用函数调用;注意 getday() 周日为 0,国内常需偏移处理;各端 date 解析差异可能导致无效日期。

uni-app如何通过过滤器转换周一到周日的显示

直接用 formatDate 工具函数的 E 占位符就能输出“星期一”这类中文星期,不需要额外写 switch 或数组映射——前提是你的日期格式化工具支持该标识。

uni-app 里 format 函数必须支持 E 才能转星期几

很多项目自己封装的 formatDate(比如从知识库中看到的 utils/dateFormatter.js)明确写了支持 E:输出“星期一”“星期二”…,而 e 输出“Mon”“Tue”等英文缩写。但如果你用的是别人写的简易版、或没声明支持 E 的函数,它大概率会原样返回字母,不转换。

  • 检查你项目里的 formatDate 实现中是否包含类似 'E+': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()] 这样的逻辑
  • 若没有,别硬改原型,直接在模板里调用时传入带 E 的格式串,比如 formatDate(date, 'E'),看是否输出预期文字
  • 不支持就 fallback:用 date.getDay() 得到 0–6,再查数组 ['星期日', '星期一', ..., '星期六']

过滤器写法要避开 Vue 2/3 的语法断层

uni-app 同时支持 Vue 2 和 Vue 3 的编译模式,但过滤器(filters)在 Vue 3 组合式 API 中已被移除。如果你在 <script setup></script> 里写 filters: { week: ... },H5 可能报错,小程序直接不生效。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • Vue 2 选项式写法可用过滤器:<view>{{ date | week }}</view>,配合 filters: { week(d) { return formatDate(d, 'E') } }
  • Vue 3 setup 中请改用函数调用:<view>{{ formatDate(date, 'E') }}</view>,并确保 formatDate 已 import 且可访问
  • 不要在 filters 里 new Date() 或做复杂计算——过滤器无响应性,date 变了它不会自动重算

getDay() 返回值是 0–6,但周几起始取决于业务规则

JavaScript 的 Date.prototype.getDay() 固定以周日为 0,周一为 1。但国内多数业务要求“周一为第一天”,比如排班、周报统计。这时候直接映射 ['周日','周一',...] 就会错位。

  • 如果 UI 上要显示“周一至周日”,且数据源是后端返回的数字(如 1=周一),别依赖 getDay(),直接查表:['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'][num]
  • 如果输入是 Date 实例,又确实要按“周一为第 1 天”来显示中文,得手动偏移:const day = date.getDay(); const zhDay = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'][(day + 6) % 7]
  • 注意:uni-calendar 组件回调里的 week 字段(如 e.week === '星期三')已按中文习惯处理好,无需再转

真正容易被忽略的是:不同端对 Date 构造函数的解析差异。比如 new Date('2026-08-05') 在 H5 正常,在微信小程序可能变成 Invalid Date——务必统一用时间戳或 new Date(2026, 7, 5) 初始化,再调 formatDate。否则星期转换第一步就崩了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app过滤器 uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2183

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4683

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5810

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5258

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

743

5

vue2.0和3.0区别
vue2.0和3.0区别

vue2.0和3.0区别:vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现,vue3中使⽤了es6的proxy API对数据代理,实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

1614

5

vue3的生命周期有哪些
vue3的生命周期有哪些

vue3的生命周期:1、beforecreate;2、created;3、beforemount;4、mounted;5、beforeupdate;6、updated;7、beforedestroy;8、destroyed;9、activated;10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

11762

5

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

2026.02.10

276

23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习