uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)

云数据表的时间类型设计

推荐使用时间戳 timestamp

json 复制代码
"createTime": {
	"bsonType": "timestamp",
	"label": "创建时间:"
}

时间生成

获取当前时间 Date.now()

cpp 复制代码
.add({
	createTime: Date.now()
})

时间格式化渲染

下载安装组件 uni-dateformat
https://ext.dcloud.net.cn/plugin?name=uni-dateformat

页面中使用

html 复制代码
<uni-dateformat :threshold="[60000, 3600000]" :date="item.createTime"></uni-dateformat>
  • 距渲染时间1分钟内------显示 "刚刚|马上"
  • 距渲染时间1分钟~1小时------ 显示 "xx分钟前|xx分钟后"
  • 距渲染时间1小时以上 ------ 显示format参数传入的格式

如仅显示年月日

html 复制代码
<uni-dateformat format='yyyy年MM月dd日' :date="item.createTime"></uni-dateformat>

效果为

cpp 复制代码
2024年01月05日

更多用法可参考官方文档
https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html

相关推荐
不如摸鱼去15 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
anyup18 小时前
uni-app 没有根组件?仅需几行代码实现全局 Toast 和 Modal
前端·架构·uni-app
2501_9160074719 小时前
Python实现HTTPS爬虫的完整指南:使用requests、BeautifulSoup、Selenium和Scrapy
爬虫·python·ios·小程序·https·uni-app·iphone
AI_AGENT_DEV_AI20 小时前
原生 APP(iOS / Android)的开发与上线
uni-app
小徐_23331 天前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
skiyee2 天前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
结网的兔子4 天前
【前端开发】Web端迁移至 uni-app 及鸿蒙扩展方案对比
前端·uni-app·harmonyos
2501_915909064 天前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派4 天前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张4 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone