mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
148 lines
4.4 KiB
Markdown
Executable File
148 lines
4.4 KiB
Markdown
Executable File
---
|
||
title: Date 日期时间
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Date
|
||
icon:
|
||
order: 39
|
||
---
|
||
|
||
用于展示日期
|
||
|
||
## 基本使用
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "date",
|
||
"value": "1591326307"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 用作 Field 时
|
||
|
||
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
|
||
|
||
### Table 中的列类型
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "table",
|
||
"data": {
|
||
"items": [
|
||
{
|
||
"id": "1",
|
||
"date": "1591326307"
|
||
},
|
||
{
|
||
"id": "2",
|
||
"date": "1591321307"
|
||
},
|
||
{
|
||
"id": "3",
|
||
"date": "1591322307"
|
||
}
|
||
]
|
||
},
|
||
"columns": [
|
||
{
|
||
"name": "id",
|
||
"label": "Id"
|
||
},
|
||
|
||
{
|
||
"name": "date",
|
||
"label": "日期",
|
||
"type": "date"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
List 的内容、Card 卡片的内容配置同上
|
||
|
||
### Form 中静态展示
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"data": {
|
||
"now": "1591322307"
|
||
},
|
||
"body": [
|
||
{
|
||
"type": "static-date",
|
||
"name": "now",
|
||
"label": "日期",
|
||
"format": "YYYY年MM月DD日 HH时mm分ss秒"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 配置展示格式
|
||
|
||
例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 [moment 文档](https://momentjs.com/docs/#/displaying/format/) 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"data": {
|
||
"now": 1586865590
|
||
},
|
||
"body": {
|
||
"type": "date",
|
||
"value": "1586865590",
|
||
"format": "YYYY年MM月DD日 HH时mm分ss秒"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 配置数据格式
|
||
|
||
如果你的数据值默认不是`X`格式（时间戳秒格式），那么需要配置 `valueformat `参数用于解析当前时间值，比如毫秒是配置 `"valueformat": "x"`。
|
||
|
||
除此之外还支持各种自定义日期格式，例如下面`value`值为：`"2020/4/14 19:59:50"`，查阅 [moment 文档](https://momentjs.com/docs/#/displaying/format/) 可知，需要配置数据格式为 `"YYYY/MM/DD HH:mm:ss"`，然后我们配置输出格式`format`，输出指定格式日期：
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "date",
|
||
"value": "2020/4/14 19:59:50",
|
||
"valueFormat": "YYYY/MM/DD HH:mm:ss",
|
||
"format": "YYYY年MM月DD日 HH时mm分ss秒"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 转成相对当前时间的描述
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "date",
|
||
"fromNow": true,
|
||
"value": "1591326307"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------- |
|
||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"date"`；在 Form 中用作静态展示，为`"static-date"` |
|
||
| className | `string` | | 外层 CSS 类名 |
|
||
| value | `string` | | 显示的日期数值 |
|
||
| name | `string` | | 在其他组件中，时，用作变量映射 |
|
||
| placeholder | `string` | `-` | 占位内容 |
|
||
| format | `string` | `YYYY-MM-DD` | 展示格式, 更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||
| valueFormat | `string` | `X` | 数据格式，默认为时间戳。更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||
| fromNow | `boolean` | `false` | 是否显示相对当前的时间描述，比如: 11 小时前、3 天前、1 年前等，fromNow 为 true 时，format 不生效。 |
|
||
| updateFrequency | `number` | `60000` | 更新频率， 默认为 1 分钟 |
|