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

相关推荐
我开心就好o25 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index27 分钟前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情8 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00711 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字11 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔11 小时前
uniapp rpx兼容平板
uni-app
荔枝吖11 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗11 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141614 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子1 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测