# datePicker

# `Schema`类静态属性

Schema类静态属性请访问 Schema.js类静态属性及值逻辑与事件逻辑关系

{
  widget: 'datePicker',
  title: '日期选择',
  preview: '',
  type: ['string', 'array<string>'],
  validators: [],
  logic: {
    value: ['=', '!='],
    event: []
  }
}

1
2
3
4
5
6
7
8
9
10
11

# `schema.default`

默认''

# `schema.option`定义

schema完整定义请访问schema

{
  "range": false,         // 是否为日期区间
  "format": "yyyy-MM-dd"  // 日期格式
}

1
2
3
4

# 日期配置

格式	示例	说明
`yyyy`	`2020`	年
`MM`	`02`	月
`dd`	`02`	日
`HH`	`12`	小时
`mm`	`30`	分钟
`ss`	`30`	秒

可用日期格式

'yyyy',
'yyyy-MM',
'yyyy/MM',
'yyyy-MM-dd',
'yyyy/MM/dd',
'MM-dd-yyyy',
'MM/dd/yyyy'

1
2
3
4
5
6
7

可用时间格式

'HH:mm:ss',
'HH:mm',
'mm:ss',
'无'

1
2
3
4

提示

日期格式选中含有 dd的格式，才可以对时间格式进行设置

# 日期区间配置

配置同日期配置，仅需要将 range 配置为true

# 示例展示

# 基础展示

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kz07LFdAd",
  "widget": "datePicker",
  "hidden": false,
  "option": {
    "range": false,
    "format": "yyyy-MM-dd"
  },
  "name": "date",
  "type": "string",
  "label": "日期",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "trigger": "change",
      "type": "string"
    }
  ],
  "placeholder": "请选择"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 日期区间展示

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kz07LFd1d",
  "widget": "datePicker",
  "hidden": false,
  "option": {
    "range": true,
    "format": "yyyy-MM-dd"
  },
  "name": "daterange",
  "type": "array<string>",
  "label": "日期",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "trigger": "change",
      "type": "array"
    }
  ],
  "placeholder": "请选择"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 日期时间展示

完整示例 codeSandbox (opens new window)

schema

{
  "key": "ks07LFd1d",
  "widget": "datePicker",
  "hidden": false,
  "option": {
    "range": false,
    "format": "yyyy-MM-dd HH:mm:ss"
  },
  "name": "daterange",
  "type": "string",
  "label": "日期选择",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "trigger": "change",
      "type": "string"
    }
  ],
  "placeholder": "请选择"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

← checkbox timePicker →

# datePicker

# Schema类静态属性

# schema.default

# schema.option定义

# 日期配置

# 日期区间配置

# 示例展示

# 基础展示

# 日期区间展示

# 日期时间展示

# `Schema`类静态属性

# `schema.default`

# `schema.option`定义