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

相关推荐
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料12 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23412 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq229511650220 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165021 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165021 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
qq22951165022 天前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
重生之我是菜鸡程序员2 天前
uniapp 使用vue/pwa
javascript·vue.js·uni-app