init
This commit is contained in:
5
uni_modules/uni-dateformat/changelog.md
Normal file
5
uni_modules/uni-dateformat/changelog.md
Normal file
@@ -0,0 +1,5 @@
|
||||
## 0.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 0.0.3（2021-02-04）
|
||||
- 调整为uni_modules目录规范
|
||||
- 修复 iOS 平台日期格式化出错的问题
|
||||
@@ -0,0 +1,197 @@
|
||||
// yyyy-MM-dd hh:mm:ss.SSS 所有支持的类型
|
||||
function pad(str, length = 2) {
|
||||
str += ''
|
||||
while (str.length < length) {
|
||||
str = '0' + str
|
||||
}
|
||||
return str.slice(-length)
|
||||
}
|
||||
|
||||
const parser = {
|
||||
yyyy: (dateObj) => {
|
||||
return pad(dateObj.year, 4)
|
||||
},
|
||||
yy: (dateObj) => {
|
||||
return pad(dateObj.year)
|
||||
},
|
||||
MM: (dateObj) => {
|
||||
return pad(dateObj.month)
|
||||
},
|
||||
M: (dateObj) => {
|
||||
return dateObj.month
|
||||
},
|
||||
dd: (dateObj) => {
|
||||
return pad(dateObj.day)
|
||||
},
|
||||
d: (dateObj) => {
|
||||
return dateObj.day
|
||||
},
|
||||
hh: (dateObj) => {
|
||||
return pad(dateObj.hour)
|
||||
},
|
||||
h: (dateObj) => {
|
||||
return dateObj.hour
|
||||
},
|
||||
mm: (dateObj) => {
|
||||
return pad(dateObj.minute)
|
||||
},
|
||||
m: (dateObj) => {
|
||||
return dateObj.minute
|
||||
},
|
||||
ss: (dateObj) => {
|
||||
return pad(dateObj.second)
|
||||
},
|
||||
s: (dateObj) => {
|
||||
return dateObj.second
|
||||
},
|
||||
SSS: (dateObj) => {
|
||||
return pad(dateObj.millisecond, 3)
|
||||
},
|
||||
S: (dateObj) => {
|
||||
return dateObj.millisecond
|
||||
},
|
||||
}
|
||||
|
||||
// 这都n年了iOS依然不认识2020-12-12，需要转换为2020/12/12
|
||||
function getDate(time) {
|
||||
if (time instanceof Date) {
|
||||
return time
|
||||
}
|
||||
switch (typeof time) {
|
||||
case 'string':
|
||||
{
|
||||
// 2020-12-12T12:12:12.000Z、2020-12-12T12:12:12.000
|
||||
if (time.indexOf('T') > -1) {
|
||||
return new Date(time)
|
||||
}
|
||||
return new Date(time.replace(/-/g, '/'))
|
||||
}
|
||||
default:
|
||||
return new Date(time)
|
||||
}
|
||||
}
|
||||
|
||||
export function formatDate(date, format = 'yyyy/MM/dd hh:mm:ss') {
|
||||
if (!date && date !== 0) {
|
||||
return ''
|
||||
}
|
||||
date = getDate(date)
|
||||
const dateObj = {
|
||||
year: date.getFullYear(),
|
||||
month: date.getMonth() + 1,
|
||||
day: date.getDate(),
|
||||
hour: date.getHours(),
|
||||
minute: date.getMinutes(),
|
||||
second: date.getSeconds(),
|
||||
millisecond: date.getMilliseconds()
|
||||
}
|
||||
const tokenRegExp = /yyyy|yy|MM|M|dd|d|hh|h|mm|m|ss|s|SSS|SS|S/
|
||||
let flag = true
|
||||
let result = format
|
||||
while (flag) {
|
||||
flag = false
|
||||
result = result.replace(tokenRegExp, function(matched) {
|
||||
flag = true
|
||||
return parser[matched](dateObj)
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export function friendlyDate(time, {
|
||||
locale = 'zh',
|
||||
threshold = [60000, 3600000],
|
||||
format = 'yyyy/MM/dd hh:mm:ss'
|
||||
}) {
|
||||
if (!time && time !== 0) {
|
||||
return ''
|
||||
}
|
||||
const localeText = {
|
||||
zh: {
|
||||
year: '年',
|
||||
month: '月',
|
||||
day: '天',
|
||||
hour: '小时',
|
||||
minute: '分钟',
|
||||
second: '秒',
|
||||
ago: '前',
|
||||
later: '后',
|
||||
justNow: '刚刚',
|
||||
soon: '马上',
|
||||
template: '{num}{unit}{suffix}'
|
||||
},
|
||||
en: {
|
||||
year: 'year',
|
||||
month: 'month',
|
||||
day: 'day',
|
||||
hour: 'hour',
|
||||
minute: 'minute',
|
||||
second: 'second',
|
||||
ago: 'ago',
|
||||
later: 'later',
|
||||
justNow: 'just now',
|
||||
soon: 'soon',
|
||||
template: '{num} {unit} {suffix}'
|
||||
}
|
||||
}
|
||||
const text = localeText[locale] || localeText.zh
|
||||
let date = getDate(time)
|
||||
let ms = date.getTime() - Date.now()
|
||||
let absMs = Math.abs(ms)
|
||||
if (absMs < threshold[0]) {
|
||||
return ms < 0 ? text.justNow : text.soon
|
||||
}
|
||||
if (absMs >= threshold[1]) {
|
||||
return formatDate(date, format)
|
||||
}
|
||||
let num
|
||||
let unit
|
||||
let suffix = text.later
|
||||
if (ms < 0) {
|
||||
suffix = text.ago
|
||||
ms = -ms
|
||||
}
|
||||
const seconds = Math.floor((ms) / 1000)
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const days = Math.floor(hours / 24)
|
||||
const months = Math.floor(days / 30)
|
||||
const years = Math.floor(months / 12)
|
||||
switch (true) {
|
||||
case years > 0:
|
||||
num = years
|
||||
unit = text.year
|
||||
break
|
||||
case months > 0:
|
||||
num = months
|
||||
unit = text.month
|
||||
break
|
||||
case days > 0:
|
||||
num = days
|
||||
unit = text.day
|
||||
break
|
||||
case hours > 0:
|
||||
num = hours
|
||||
unit = text.hour
|
||||
break
|
||||
case minutes > 0:
|
||||
num = minutes
|
||||
unit = text.minute
|
||||
break
|
||||
default:
|
||||
num = seconds
|
||||
unit = text.second
|
||||
break
|
||||
}
|
||||
|
||||
if (locale === 'en') {
|
||||
if (num === 1) {
|
||||
num = 'a'
|
||||
} else {
|
||||
unit += 's'
|
||||
}
|
||||
}
|
||||
|
||||
return text.template.replace(/{\s*num\s*}/g, num + '').replace(/{\s*unit\s*}/g, unit).replace(/{\s*suffix\s*}/g,
|
||||
suffix)
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<text>{{dateShow}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {friendlyDate} from './date-format.js'
|
||||
/**
|
||||
* Dateformat 日期格式化
|
||||
* @description 日期格式化组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
|
||||
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
|
||||
* @property {String} locale 格式化使用的语言
|
||||
* @value zh 中文
|
||||
* @value en 英文
|
||||
* @property {Array} threshold 应用不同类型格式化的阈值
|
||||
* @property {String} format 输出日期字符串时的格式
|
||||
*/
|
||||
export default {
|
||||
name: 'uniDateformat',
|
||||
props: {
|
||||
date: {
|
||||
type: [Object, String, Number],
|
||||
default () {
|
||||
return Date.now()
|
||||
}
|
||||
},
|
||||
locale: {
|
||||
type: String,
|
||||
default: 'zh',
|
||||
},
|
||||
threshold: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [0, 0]
|
||||
}
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'yyyy/MM/dd hh:mm:ss'
|
||||
},
|
||||
// refreshRate使用不当可能导致性能问题，谨慎使用
|
||||
refreshRate: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refreshMark: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dateShow() {
|
||||
this.refreshMark
|
||||
return friendlyDate(this.date, {
|
||||
locale: this.locale,
|
||||
threshold: this.threshold,
|
||||
format: this.format
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
refreshRate: {
|
||||
handler() {
|
||||
this.setAutoRefresh()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.refreshMark++
|
||||
},
|
||||
setAutoRefresh() {
|
||||
clearInterval(this.refreshInterval)
|
||||
if (this.refreshRate) {
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.refresh()
|
||||
}, parseInt(this.refreshRate))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
84
uni_modules/uni-dateformat/package.json
Normal file
84
uni_modules/uni-dateformat/package.json
Normal file
@@ -0,0 +1,84 @@
|
||||
{
|
||||
"id": "uni-dateformat",
|
||||
"displayName": "uni-dateformat 日期格式化",
|
||||
"version": "0.0.4",
|
||||
"description": "日期格式化组件，可以将日期格式化为1分钟前、刚刚等形式",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"日期格式化",
|
||||
"时间格式化",
|
||||
"格式化时间",
|
||||
""
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
77
uni_modules/uni-dateformat/readme.md
Normal file
77
uni_modules/uni-dateformat/readme.md
Normal file
@@ -0,0 +1,77 @@
|
||||
|
||||
|
||||
### DateFormat 日期格式化
|
||||
> **组件名：uni-dateformat**
|
||||
> 代码块： `uDateformat`
|
||||
|
||||
|
||||
日期格式化组件。
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<!-- 一般用法 -->
|
||||
<uni-dateformat date="2020/10/20 20:20:20"></uni-dateformat>
|
||||
|
||||
<!-- 不显示刚刚/马上/xx分钟前 -->
|
||||
<uni-dateformat date="2020/10/20 20:20:20" :threshold="[0,0]"></uni-dateformat>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Dateformat Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|date |Object|String|Number |Date.now() |要格式化的日期对象/日期字符串/时间戳 |
|
||||
|threshold |Array |[0, 0] |转化类型阈值 |
|
||||
|format |String |'yyyy/MM/dd hh:mm:ss' |格式字符串 |
|
||||
|locale |String |zh |格式化使用的语言，目前支持zh（中文）、en（英文） |
|
||||
|
||||
|
||||
#### Threshold Options
|
||||
|
||||
格式化组件会对时间进行用户友好转化，threshold就是用来控制转化的时间阈值的。
|
||||
|
||||
以`[60000, 3600000]`为例，将传入时间与当前时间差的绝对值记为delta（单位毫秒）
|
||||
|
||||
- `delta < 60000`时，时间会被转化为“刚刚|马上”
|
||||
- `delta >= 60000 && delta < 3600000`时，时间会被转化为“xx分钟前|xx分钟后”，如果超过1小时会显示成“xx小时前|xx小时后”，以此类推
|
||||
- `delta >= 3600000`时，会按照format参数传入的格式进行格式化
|
||||
|
||||
如果不想转化为“马上|刚刚”可以传入`:threshold = "[0,3600000]"`。默认值`[0,0]`既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”
|
||||
|
||||
#### Format Options
|
||||
|
||||
format接收字符以及含义如下：
|
||||
|
||||
|字符 |说明 |
|
||||
|:-: |:-: |
|
||||
|yyyy |四位年份 |
|
||||
|yy |两位年份 |
|
||||
|MM |两位月份（不足两位在前面补0） |
|
||||
|M |月份，不自动补0 |
|
||||
|dd |两位天（不足两位在前面补0） |
|
||||
|d |天，不自动补0 |
|
||||
|hh |两位小时（不足两位在前面补0） |
|
||||
|h |小时，不自动补0 |
|
||||
|mm |两位分钟（不足两位在前面补0） |
|
||||
|m |分钟，不自动补0 |
|
||||
|ss |两位秒（不足两位在前面补0） |
|
||||
|s |秒，不自动补0 |
|
||||
|SSS |三位毫秒（不足三位在前面补0） |
|
||||
|S |毫秒，不自动补0 |
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat](https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat)
|
||||
Reference in New Issue
Block a user