# DatePicker 日期选择器

用于选择或输入日期

## 基础用法

<demo-block type="form" :config="[{
  type: 'date',
  name: 'date',
  text: '日期选择器'
}]">
<template #source>

<p>
以日期为基本单位，基础的日期选择控件
</p>
</template>
</demo-block>

## 禁用状态

<demo-block type="form" :config="[{
  type: 'date',
  name: 'date',
  text: '日期选择器',
  disabled: () => true
}]">
<template #source>

<p>
通过 <code>disabled</code> 属性禁用日期选择器
</p>
</template>
</demo-block>

## 占位符

<demo-block type="form" :config="[{
  type: 'date',
  name: 'date',
  text: '日期选择器',
  placeholder: '请选择日期'
}]">
<template #source>

<p>
通过 <code>placeholder</code> 属性设置输入框占位文本
</p>
</template>
</demo-block>

## 日期格式

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

默认情况下，组件的 `format` 默认值为 `YYYY/MM/DD`，`valueFormat` 默认值为 `YYYY/MM/DD`。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

:::warning
请注意大小写
:::

| 格式   | 含义             | 备注                                           | 举例          |
| ------ | ---------------- | ---------------------------------------------- | ------------- |
| `YYYY` | 年               |                                                | 2017          |
| `M`    | 月               | 不补0                                          | 1             |
| `MM`   | 月               |                                                | 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            |
| `x`    | JS时间戳         | 组件绑定值为`number`类型                       | 1483326245000 |
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM            |

<demo-block type="form" :config="[{
  type: 'date',
  name: 'date',
  text: '日期选择器',
  format: 'YYYY-MM-DD',
  valueFormat: 'x'
}]">
<template #source>

<p>
设置 <code>valueFormat</code> 为 <code>timestamp</code>，绑定值将返回时间戳格式
</p>
</template>
</demo-block>

## Attributes

| 参数        | 说明                                     | 类型                                                                                                                                                     | 可选值                  | 默认值     |
| ----------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------- |
| name        | 绑定值的字段名                           | string                                                                                                                                                   | —                       | —          |
| text        | 表单标签                                 | string                                                                                                                                                   | —                       | —          |
| placeholder | 输入框占位文本                           | string                                                                                                                                                   | —                       | —          |
| disabled    | 是否禁用                                 | boolean / `FilterFunction` | —                       | false      |
| format      | 显示在输入框中的格式                     | string                                                                                                                                                   | 见[日期格式](#日期格式) | YYYY/MM/DD |
| valueFormat | 绑定值的格式。不指定则绑定值为 Date 对象 | string                                                                                                                                                   | 见[日期格式](#日期格式) | YYYY/MM/DD |
| onChange    | 值变化时触发的函数                       | `OnChangeHandler`           | —                       | —          |

::: details 查看 FilterFunction / OnChangeHandler 及关联类型定义
<<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}

<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}

<<< @/../packages/form-schema/src/base.ts#FormValue{ts}
:::


## 配置类型

::: details 查看 DateConfig 配置类型定义
<<< @/../packages/form-schema/src/base.ts#DateConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FormItem{ts}

<<< @/../packages/form-schema/src/base.ts#Input{ts}

:::

## TypeScript 定义

```typescript
interface DateConfig extends FormItem, Input {
  type: "date";
  format?: "YYYY-MM-dd HH:mm:ss" | string;
  valueFormat?: "YYYY-MM-dd HH:mm:ss" | string;
}
```
