# Date Picker 时间日期选择器

[toc]

时间选择器用于选择时间，日期以及日期+时间的选择场景

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-date-picker": "../dist/date-picker/index"
  }
}

```

## 用法

```html
// 常规应用
  <tea-list>
    <tea-form-item type="select" label="时间" placeholder="请选择时间" value="{{value}}" detail clickable bind:select="_handleTimeClicke"></tea-form-item>
  </tea-list>
  <tea-popup show="{{show}}" position="bottom">
    <tea-date-picker start="2018-09-09 12:05" end="2020-10-01 23:10" bind:confirm="handleChange" bind:cancel="handleCancel"></tea-date-picker>
  </tea-popup>

// 日期时间选择
  <tea-date-picker start="2018-09-09 12:05" end="2020-10-01 23:10" value="2020-09-10 10:10" bind:confirm="handleChange"></tea-date-picker>

// 时间选择
  <tea-date-picker start="11:05" end="23:10" value="12:00" bind:confirm="handleChange"></tea-date-picker>

// 日期选择
  <tea-date-picker start="2018-09-09" end="2020-10-01" value="{{defaultValue}}" bind:confirm="handleChange"></tea-date-picker>

```

```js
Page({
	data: {
		value: ""
	}, 
	_handleChange: function (event) {
		const { value, index } = event.detail
		this.setData({
			value
		})
  }
})
```

## Props

| 参数             | 描述             | 类型       | 默认值      | 可选值                   |
| -------------- | -------------- | -------- | -------- | --------------------- |
| start          | -              | `String` | -        | -                     |
| end            | -              | `String` | -        | -                     |
| indicatorStyle | 设置选择器中间选中框的样式  | `String` | ``       | -                     |
| indicatorClass | 设置选择器中间选中框的类名  | `String` | ``       | -                     |
| maskClass      | 设置蒙层的类名        | `String` | ``       | -                     |
| maskStyle      | 设置蒙层的样式        | `String` | ``       | -                     |
| type           | 选择器的样式，可选择起止时间 | `String` | `normal` | `['normal', 'range']` |

## 事件

| 事件名     | 描述                  | 回调参数  |     |
| ------- | ------------------- | ----- | --- |
| change  | 转动滚轮时触发             |       |     |
| confirm | 点击确认时触发，并且会返回当前选中时间 | value |     |
| cancel  | 点击取消时触发             |       |     |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |