npm package: @retailwe/ui-datetime-picker
Description: ### 使用效果
Latest version: 0.0.19

## datetime-picker 日期时间选择器

### 使用效果

选择【年-月】

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gh25yhhl98j30nc0jsmy2.jpg" alt="image-20200724165531025" style="zoom:50%;" />

选择【年-月-日】

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gh25xysho6j30nm0jogmm.jpg" alt="image-20200724165500648" style="zoom:50%;" />

选择【年-月-日-时-分】

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gh25uh9lqsj30nm0jsdh4.jpg" alt="image-20200724165137432" style="zoom:50%;" />

选择【时-分】

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gh25vcmz9qj30nq0jkq3r.jpg" alt="image-20200724165229069" style="zoom:50%;" />

外部样式自定义

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gh25zbvw7aj30nq0es3zh.jpg" alt="image-20200724165619980" style="zoom: 50%;" />

### 使用方法

```ts
// 脚本文件
Page({
  data: {
    isShow: false,
    showText1: '年月日',
    date: new Date().getTime(),
  },

  onTap(e) {
    this.handleTap(e, true);
  },

  close(e: any) {
    this.handleTap(e, false);
  },

  handleTap(e: any, isShow: boolean) {
    this.setData({
      isShow: isShow,
    });
  },
  onConfirm(e) {
    console.log('点击了确定按钮,修改的时间值为：', e);
    const newDate = new Date(e.detail);
    this.setData({
      isShow: false,
      showText1:
        newDate.getFullYear() +
        '年' +
        newDate.getMonth() +
        '月' +
        newDate.getDate() +
        '日',
    });
  },
  onCancel(e) {
    console.log('点击了取消按钮', e.detail);
    this.setData({
      isShow: false,
    });
  },
});

```

```html
<!---wxml文件--->
<wr-datetime-picker title="年月日" type="date" value="{{date}}" isPop="{{isShow}}" bind:onCancel="onCancel" bind:onConfirm="onConfirm" picker-wrapper-class='my-picker-wrapper-class' title-class="my-title-class" cancel-btn-class='my-cancel-btn-class' confirm-btn-class='my-confirm-btn-class'></wr-datetime-picker>
```

### 参数说明

#### Props

| 参数     | 说明                                                         | 要求                                      | 默认值                 |
| -------- | ------------------------------------------------------------ | ----------------------------------------- | ---------------------- |
| title    | 标题                                                         | string                                    | 选择日期               |
| value    | 当前时间值                                                   | 时间戳                                    | `new Date(),getTime()` |
| type     | 选择器的类型：【年月日】、【时分】、【年月日时分】、【年月】 | "date"\|"time"\|"date time"\|"year-mouth" | "date"                 |
| rows     | 可见选项的行数，默认为3，不建议超过5                         | number                                    | 3                      |
| min-date | 可选的最小时间，时间戳形式                                   | 时间戳                                    | 3年前                  |
| max-date | 可选的最大时间，时间戳形式                                   | 时间戳                                    | 3年后                  |
| min-hour | 可选的最小小时，针对 `time `类型                             | 0-23的整数类型                            | 0                      |
| max-hour | 可选的最大小时，针对`time`类型                               | 0-23的整数类型                            | 23                     |
| gap      | 间隔分钟数，针对`time`类型                                   | 0-30的整数类型                            | 0                      |

#### Events

| 事件      | 说明               |
| --------- | ------------------ |
| change    | 时间值变化时触发   |
| onConfirm | 点击确定按钮时触发 |
| onCancel  | 点击取消按钮时触发 |

#### 外部样式类

| 类名                 | 说明           |
| -------------------- | -------------- |
| confirm-btn-class    | 确定按钮的样式 |
| cancel-btn-class     | 取消按钮的样式 |
| picker-wrapper-class | 选择器弹框样式 |
| title-class          | 标题样式       |

### 注意⚠️

因小程序自身实现问题，为确保外部样式生效，建议加上`!important`