# DateTimePicker 日期时间选择器 | tmagic-editor
页面可视化平台

Skip to content

# DateTimePicker 日期时间选择器 ​

在同一个选择器里选择日期和时间

## 基础用法 ​

在开启多选模式后，默认情况下会展示所有已选中的选项的Tag

    [
      {
        type: "datetime",
        name: "dateTime",
        text: "日期时间选择器"
      }
    ]

显示配置

## 禁用状态 ​

在开启多选模式后，默认情况下会展示所有已选中的选项的Tag

    [
      {
        type: "datetime",
        name: "dateTime",
        text: "日期时间选择器",
        disabled: () => true
      }
    ]

显示配置

## 日期格式 ​

使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。

默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

WARNING

请注意大小写

格式 | 含义 | 备注 | 举例
--- | --- | --- | ---
`yyyy` | 年 |  | 2017
`M` | 月 | 不补0 | 1
`MM` | 月 |  | 01
`W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1
`WW` | 周 | 仅周选择器的 `format` 可用 | 01
`d` | 日 | 不补0 | 2
`dd` | 日 |  | 02
`H` | 小时 | 24小时制；不补0 | 3
`HH` | 小时 | 24小时制 | 03
`h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3
`hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03
`m` | 分钟 | 不补0 | 4
`mm` | 分钟 |  | 04
`s` | 秒 | 不补0 | 5
`ss` | 秒 |  | 05
`A` | AM/PM | 仅 `format` 可用，大写 | AM
`a` | am/pm | 仅 `format` 可用，小写 | am
`timestamp` | JS时间戳 | 仅 `valueFormat` 可用；组件绑定值为`number`类型 | 1483326245000
`[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM

在开启多选模式后，默认情况下会展示所有已选中的选项的Tag

    [
      {
        type: "datetime",
        name: "dateTime",
        text: "日期时间选择器",
        format: "yyyy-MM-dd",
        valueFormat: "timestamp"
      }
    ]

显示配置

## Attributes ​

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
name | 绑定值 | string | — | —
text | 表单标签 | string | — | —
disabled | 是否禁用 | boolean / FilterFunction | — | false
format | 显示在输入框中的格式 | string | 见日期格式 | yyyy-MM-dd HH:mm:ss
value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | —
onChange | 值变化时触发的函数 | OnChangeHandler | — | -