baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.4k stars 2.52k forks source link

feat: 新增上下文工具moment, 方便转化为Moment #11069

Closed lqPrototype closed 1 month ago

lqPrototype commented 1 month ago

What

add env.moment

Why

  1. 经常在表单遇到开始时间和结束时间表单项分开的,但又有联动,日期比较规则还复杂,valueFormat 又是特定格式,而不是默认的时间戳格式(这样 minDate 和 maxDate 就会失效),等等限制。可以通过 props env moment 字符函数将表单项转为 Moment 格式,就方便许多,以及更灵活。

  2. 对于其他组件自定义script脚本,进行日期格式转化比较更方便(利用moment)。

Example

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-date",
            "name": "start",
            "label": "开始时间",
            "required": true,
            "valueFormat": "YYYY-MM-DD HH:mm:ss",
            "placeholder": "请选择日期以及时间",
            "displayFormat": "YYYY-MM-DD HH:mm:ss",
            "disabledDate": "if(!props.data.end)return false;const moment = props.env.moment();const maxDate = moment(props.data.end).valueOf();return currentDate.valueOf() > maxDate"
        },
        {
            "type": "input-date",
            "name": "end",
            "label": "结束时间",
            "required": true,
            "valueFormat": "YYYY-MM-DD HH:mm:ss",
            "placeholder": "请选择日期以及时间",
            "displayFormat": "YYYY-MM-DD HH:mm:ss",
            "disabledDate": "if(!props.data.start)return false;const moment = props.env.moment();const minDate = moment(props.data.start).valueOf();return currentDate.valueOf() < minDate"
        },

    ]
}
github-actions[bot] commented 1 month ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

2betop commented 1 month ago

不建议直接通过 moment 来写逻辑,万一后面要换 dayjs。感觉应该用公式函数来做,目前应该有能满足以上场景的公式了

lqPrototype commented 1 month ago

不建议直接通过 moment 来写逻辑,万一后面要换 dayjs。感觉应该用公式函数来做,目前应该有能满足以上场景的公式了 好的