# DoubleDatePicker 双排日期选择

### 介绍

弹出双排日期选择，用于同时选择开始时间和结束时间

<img src="https://ftp.bmp.ovh/imgs/2020/11/75813e84630bd1ac.png" style="width: 375px; height: 812px; margin-top: 15px; box-shadow: none" >

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "time-picker": "@vant/weapp/timePicker/timePicker"
}
```

## 代码演示

### 用于同时显示开始时间与结束时间

```html
<time-picker id='picker' pickerShow={this.state.isPickerShow} config={this.state.pickerConfig} easyTime
            onHide={(val)=>this.pickerHide(val)} onOk={(val)=>this.setPickerTime(val)}
/>
```

```javascript
  state = {
    type:'',
    current:'',
    isPickerShow:true,
    pickerConfig: {
      endDate: true,
      column: "minute",
      dateLimit: false,
      initStartTime: this.getTimeStr('startTime',new Date()),
      initEndTime: this.getTimeStr('endTime',new Date()),
      limitStartTime: "2020-03-01 00:00:00",
      limitEndTime: "2030-03-01 00:00:00"
    }
  };

  getTimeStr(type,time) {
    let dateTime='';
    if(type==='startTime'){
      time=new Date(time.getTime()+1000*60*60);
      dateTime= time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate() + ' '+time.getHours()+':00:00';
    }else if(type==='endTime'){
      time=new Date(time.getTime()+1000*60*60*2);
      dateTime= time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate() + ' '+time.getHours()+':00:00';
    } else{
      dateTime= time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate() + ' '+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();
    }
    return dateTime;
  }


  showTimePicker() {
    this.setState({
      isPickerShow: true,
      isPickerRender: true
    })
  }

  pickerHide(val) {
    console.log(val);
  }



```


## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```

### Options

通过函数调用 config 时，支持传入以下选项：

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| endDate | 结束时间 | _boolean_ | false | - |
| column | 日期维度 | _string_ | `minute` | 1.0.0 |
| initStartTime | 初始开始时间 | _date_ | - | 1.0.0 |
| initEndTime | 初始结束时间 | _date_ | - | 1.0.0 |
| limitStartTime | 最小可选时间 | _date_ | - | - |
| limitEndTime | 最大可选时间 | _date_ | - | - |