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

相关推荐
bug总结7 小时前
深入理解 uni-app 的 uni.createSelectorQuery()
uni-app
真上帝的左手7 小时前
25. 移动端-uni-app
uni-app
编程猪猪侠7 小时前
基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能(分步骤详解)
uni-app
小徐_233310 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
斯~内克10 小时前
UniApp 页面传参方式详解
网络协议·udp·uni-app
大聪明了12 小时前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app
有梦想的刺儿1 天前
uniapp手机端video标签层级过高问题
uni-app
&白帝&1 天前
Uniapp 获取系统信息:uni.getSystemInfo 与 uni.getSystemInfoSync
uni-app
熬耶1 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
加蓓努力我先飞2 天前
小兔鲜儿-小程序uni-app(二)
uni-app