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

相关推荐
顽疲13 小时前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero13 小时前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
FliPPeDround16 小时前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
PedroQue9918 小时前
@meng-xi/uni-router
uni-app
Stone_zzl18 小时前
uniapp写app做测试手机通知栏展示内容
uni-app
顽疲19 小时前
从零用java实现 小红书 springboot vue uniapp(15) 集成minio存储 支持本地和minio切换
java·vue.js·spring boot·uni-app
2501_9160074721 小时前
iOS 抓包工具有哪些?2025实用指南与场景推荐
android·ios·小程序·https·uni-app·iphone·webview
jaqi.l1 天前
uni-app小程序云效持续集成
ci/cd·小程序·uni-app
黑马源码库miui520861 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
2501_916008891 天前
iOS WebView 加载失败与缓存刷新问题排查实战指南
android·ios·小程序·https·uni-app·iphone·webview