amis2/docs/zh-CN/components/date.md

title	description	type	group	menuName	icon	order
Date 日期时间		0	⚙ 组件	Date		39

用于展示日期

基本使用

{
    "type": "page",
    "body": {
        "type": "date",
        "value": "1591326307"
    }
}

用作 Field 时

当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置name属性，映射同名变量

Table 中的列类型

{
    "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 中静态展示

{
    "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 文档 可知配置格式应为 YYYY年MM月DD日 HH时mm分ss秒，即：

{
  "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 文档 可知，需要配置数据格式为 "YYYY/MM/DD HH:mm:ss"，然后我们配置输出格式format，输出指定格式日期：

{
  "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秒"
  }
}

转成相对当前时间的描述

{
    "type": "page",
    "body": {
        "type": "date",
        "fromNow": true,
        "value": "1591326307"
    }
}

设置展示时区

通过配置 displayTimeZone 参数，可以设置展示时区，默认展示当前时区。

{
    "type": "crud",
    "api": {
      "method": "get",
      "url": "/whatever/api",
      "mockResponse": {
        "status": 200,
        "data": [
          {
            "date": "2023-10-27 15:00:00"
          }
        ]
      }
    },
    "columns": [
      {
        "type": "date",
        "label": "Asia/Shanghai",
        "name": "date",
        "displayTimeZone": "Asia/Shanghai",
        "format": "YYYY-MM-DD HH:mm:ss"
      },
      {
        "type": "date",
        "label": "America/Los_Angeles",
        "name": "date",
        "displayTimeZone": "America/Los_Angeles",
        "format": "YYYY-MM-DD HH:mm:ss"
      },
      {
        "type": "date",
        "name": "date",
        "label": "Asia/Tokyo",
        "displayTimeZone": "Asia/Tokyo",
        "format": "YYYY-MM-DD HH:mm:ss"
      }
    ]
  }

属性表

属性名	类型	默认值	说明	版本
type	string		如果在 Table、Card 和 List 中，为"date"；在 Form 中用作静态展示，为"static-date"
className	string		外层 CSS 类名
value	string		显示的日期数值
name	string		在其他组件中，时，用作变量映射
placeholder	string	-	占位内容
displayFormat	string	YYYY-MM-DD	展示格式, 更多格式类型请参考 文档	版本号 3.4.0 及以上支持
valueFormat	string	X	数据格式，默认为时间戳。更多格式类型请参考 文档
fromNow	boolean	false	是否显示相对当前的时间描述，比如: 11 小时前、3 天前、1 年前等，fromNow 为 true 时，format 不生效。
updateFrequency	number	60000	更新频率， 默认为 1 分钟
displayTimeZone	string		设置日期展示时区，可设置清单参考：https://gist.github.com/diogocapela/12c6617fc87607d11fd62d2a4f42b02a