InputTime 时间

基本用法

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-time”, “name”: “time”, “label”: “时间” } ] }

  1. ## 显示格式
  2. 选中任意时间,可以看到默认显示时间的格式是像`01:01`这样的格式,如果你想要自定义显示格式,那么可以配置`inputFormat`
  3. 例如你想显示`01时01分`这样的格式,查找 moment 文档可知配置格式应为 `HH时mm分`,即:
  4. ```schema: scope="body"
  5. {
  6. "type": "form",
  7. "api": "/api/mock2/form/saveForm",
  8. "body": [
  9. {
  10. "type": "input-time",
  11. "name": "time",
  12. "label": "时间",
  13. "inputFormat": "HH时mm分"
  14. }
  15. ]
  16. }

调整时间,观察显示格式

值格式

选中任意时间,可以看到默认表单项的值格式是像1591862818这样的时间戳格式。

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-time”, “name”: “time”, “label”: “时间” } ] }

  1. 如果你想要其他格式的日期值,那么可以配置`format`参数用于调整表单项的值格式。
  2. 例如你调整值为`01:11`这样的格式,查找 moment 文档可知配置格式应为 `HH:mm`,即:
  3. ```schema: scope="body"
  4. {
  5. "type": "form",
  6. "debug": true,
  7. "api": "/api/mock2/form/saveForm",
  8. "body": [
  9. {
  10. "type": "input-time",
  11. "name": "time",
  12. "label": "时间",
  13. "format": "HH:mm"
  14. }
  15. ]
  16. }

调整时间,观察数据域中表单项值的变化

显示秒

默认显示的是时和分,要显示秒请参考以下配置

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-time”, “name”: “time”, “label”: “时间”, “format”: “HH:mm:ss”, “timeFormat”: “HH:mm:ss”, “inputFormat”: “HH:mm:ss” } ] }

  1. ## 默认值
  2. 可以设置`value`属性,设置日期选择器的默认值
  3. ### 基本配置
  4. 配置符合当前 [值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) 的默认值。
  5. ```schema: scope="body"
  6. {
  7. "type": "form",
  8. "debug": true,
  9. "api": "/api/mock2/form/saveForm",
  10. "body": [
  11. {
  12. "type": "input-time",
  13. "name": "time",
  14. "label": "时间",
  15. "value": "1591862818"
  16. }
  17. ]
  18. }

相对值

value 还支持类似像"+1hours"这样的相对值,更加便捷的配置默认值

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-time”, “name”: “time”, “label”: “时间”, “value”: “+1hours” } ] }

  1. 上例中配置了`"value": "+1hours"`,默认就会选中一小时后。
  2. 支持的相对值关键字有:
  3. - `now`: 当前时间
  4. - `hour``hours`:
  5. - `minute``minutes`:
  6. - `second``seconds`:
  7. ## 控制输入范围
  8. 通过 `timeConstraints` 属性可以控制输入范围
  9. 默认值是
  10. ```json
  11. {
  12. "hours": {
  13. "min": 0,
  14. "max": 23,
  15. "step": 1
  16. },
  17. "minutes": {
  18. "min": 0,
  19. "max": 59,
  20. "step": 1
  21. },
  22. "seconds": {
  23. "min": 0,
  24. "max": 59,
  25. "step": 1
  26. },
  27. "milliseconds": {
  28. "min": 0,
  29. "max": 999,
  30. "step": 1
  31. }
  32. }

可以只修改其中的部分值,比如下面的示例将分钟每次加减改成了 15,小时的范围限制在 9 到 17

```schema: scope=”body” { “type”: “form”, “debug”: true, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-time”, “name”: “time”, “label”: “时间”, “timeConstraints”: { “hours”: { “min”: 9, “max”: 17 }, “minutes”: { “step”: 15 } } } ] }

  1. ## 原生时间组件
  2. 原生时间组件将直接使用浏览器的实现,最终展现效果和浏览器有关,而且只支持 `min``max``step` 这几个属性设置。
  3. ```schema: scope="body"
  4. {
  5. "type": "form",
  6. "api": "/api/mock2/form/saveForm",
  7. "body": [
  8. {
  9. "type": "native-time",
  10. "name": "time",
  11. "label": "时间"
  12. }
  13. ]
  14. }

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
value string 默认值
timeFormat string HH:mm 时间选择器值格式,更多格式类型请参考 moment
format string X 时间选择器值格式,更多格式类型请参考 moment
inputFormat string HH:mm 时间选择器显示格式,即时间戳格式,更多格式类型请参考 moment
placeholder string "请选择时间" 占位文本
clearable boolean true 是否可清除
timeConstraints object true

事件表

当前组件会对外派发以下事件,可以通过onEvent来监听这些事件,并通过actions来配置执行的动作,在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据,详细请查看事件动作

事件名称 事件参数 说明
change event.data.value: string 时间值 时间值变化时触发
focus event.data.value: string 时间值 输入框获取焦点(非内嵌模式)时触发
blur event.data.value: string 时间值 输入框失去焦点(非内嵌模式)时触发

动作表

当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称componentId: 该组件id来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
setValue value: string 更新的时间值 更新数据,依赖格式format,例如:’1648746120’