Skip to content

DateFormat 日期格式化

INFO

此组件用法基本与 uni-dateformat 对齐,部分细节有差异

基础用法

  • 用于将日期和时间格式化为指定的字符串。
  • 支持自定义格式、阈值和本地化。
vue
<template>
	<sn-dateformat :date="Date.now()"></sn-dateformat>
</template>

更多演示请下载 demo 查看

阈值

格式化组件会对时间进行用户友好转化,threshold 就是用来控制转化的时间阈值的。

[60000, 86400000]为例,将传入时间与当前时间差的绝对值记为delta(单位毫秒)

  • delta < 60000时,时间会被转化为“刚刚|马上”
  • delta >= 60000 && delta < 86400000时,时间会被转化为“xx分钟前|xx分钟后”,如果超过1小时会显示成“xx小时前|xx小时后”,以此类推
  • delta >= 86400000时,会按照format参数传入的格式进行格式化

如果不想转化为“马上|刚刚”可以传入:threshold = "[0,86400000]"。默认值[0,0]既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”

格式

本组件支持的解析占位符同 Date 日期库,与 uni-dateformat 略有差异

占位符示例描述
YY01两位数的年份
YYYY2001四位数的年份
M1-12月份,从1开始计数
MM01-12月份,两位数
MMMJan-Dec缩写的月份名称
MMMMJanuary-December完整的月份名称
D1-31一个月的某一天
DD01一个月的某一天,两位数
H0-23小时数
HH00-23小时数,两位数
h1-1212小时制的小时数
hh01-1212小时制的小时数,两位数
m0-59分钟数
mm00-59分钟数,两位数
s0-59秒数
ss00-59秒数,两位数
S0-9百毫秒数,一位数
SS00-99十毫秒数,两位数
SSS000-999毫秒数,三位数
Z-05:00相对于UTC的偏移量
ZZ-0500相对UTC的紧凑偏移量,两位数
AAM PM上午或下午,大写字母
aam pm上午或下午,小写字母

属性

参数说明类型默认值可选值
date需要格式化的日期NumberDate.now()-
format日期格式StringYYYY-MM-DD HH:mm:ss-
threshold阈值,用于判断显示相对时间还是格式化时间Array<Number[]>[60000, 86400000]-
locale本地化语言Stringzh-cnzh-cn, en
textColor文本颜色String--
textSize文本大小String--
textFont文本字体String--
customStyle自定义样式UTSJSONObject{}-

使用 MIT 协议