# datePicker 组件

## 组件API

属性 | 说明 | 类型 | 默认值 | 是否必须 | 示例
---|---|---|---|---|---
type | 组件类型:可选`date`和`range` 分别为单日期和区间 | `String` | 'range' |  | 
chooseDate | 生效日期 `for date` | `String` | 今日 |  | `2018-01-01`
startDate | 开始日期 `for range` | `String` | 七日前 |  | `2018-01-01`
endDate | 结束日期 `for range` | `String` | 今日 |  | `2018-01-01`
changeFun | 改变选择区域回调函数 `for range` | `Function` |  | 
submitFun | 确认按钮回调函数 `for range and date` | `Function` |  | `true`
cancelFun | 取消按钮回调函数(记得隐藏`datePicker`弹窗) `for range and date` | `Function` |  | `true`
minDate | 可选最小日期 `for range and date` | `String` |三个月前的1号 |  | `2018-01-01`
maxDate | 可选最大日期 `for range and date` | `String` | 今天 |  | `2018-01-01`
warpName  | 类名 `for range and date` | `String` | |  | `date-picker-tianye`

> 需要注意回调方法的参数接收，区间日期有两天，单日期只有一天

## 返回值
`submitFun` 会返回确认后的`startDate` 和 `endDate`, 详细处理demo见下文。

## 详细demo和使用方法

```javascript
import React, { Component }from 'react';
import {Helmet}            from "react-helmet";
import DatePicker          from './components/DatePicker'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedTime: { //目前选定的时间区间
        startDate: '2018-04-02',
        endDate: '2018-04-18'
      },
      chooseDate: '2018-04-02',
      showDatePicker: false, // 用来处理是否显示DatePicker
      showDatePicker2: false // 用来处理是否显示DatePicker
    }
  }

  render() {
    const {selectedTime, showDatePicker, chooseDate, showDatePicker2} = this.state;

    return (
      <div className="App">
        <Helmet> //样式示例，请根据实际情况配合改造
          <style type="text/css">{`
            .demo-date-picker-warp {margin: 30px; width: 200px; height: 24px; line-height: 24px; text-align: center; border: 1px solid #ddd; cursor: pointer; position: relative;}
            .show-time {display: block;}
            .demo-date-picker-warp .w-date-picker {position: absolute;top: 24px;left: 0;}
          `}</style>
        </Helmet>
        <section className="demo-date-picker-warp">
          <span className="show-time" onClick={() => this.clickDatePicker()}>{selectedTime.startDate} 至 {selectedTime.endDate}</span>
          <span className="show-time" onClick={() => this.clickDatePicker2()}>{chooseDate}</span>
          { showDatePicker &&
            <DatePicker
            type={'range'} //range
            startDate={selectedTime.startDate}
            endDate={selectedTime.endDate}
            submitFun={(startDate,endDate) => this.getDate(startDate,endDate)} //注意需要接收返回的时间区间
            cancelFun={() => this.cancelDate()}
            />
          }
          { showDatePicker2 &&
            <DatePicker
            type={'date'}
            chooseDate={chooseDate}
            submitFun={(time) => this.getDate2(time)} //注意需要接收返回的时间区间
            cancelFun={() => this.cancelDate2()}
            />
          }
        </section>
      </div>
    );
  }

  clickDatePicker() {
    const {showDatePicker} = this.state;
    this.setState({showDatePicker: !showDatePicker})
  }

  clickDatePicker2() {
    const {showDatePicker2} = this.state;
    this.setState({showDatePicker2: !showDatePicker2})
  }

  getDate(startDate,endDate) {
    this.setState({
      selectedTime: {
        startDate, endDate
      }
    })
    this.clickDatePicker()
  }

  getDate2(time) {
    this.setState({
      chooseDate: time
    })
    this.clickDatePicker2()
  }

  cancelDate() {
    this.clickDatePicker()
  }

  cancelDate2() {
    this.clickDatePicker2()
  }
}

export default App;
```