# DatetimeRangePicker 日期时间区间选择组件

## 介绍

日期时间区间选择组件

## 引入

```js
import { Vue } from "vue";
import { DatetimeRangePicker } from "@bingoit/mobile-ui";

Vue.use(DatetimeRangePicker);
```

## 代码演示

### 基础用法

```html
<bgo-datetime-range-picker
    v-model="datetimeRange"
    type="date"
    start-placeholder="请选择开始日期"
    end-placeholder="请选择结束日期"
/>
```

## API

### Props

|       名称       |         说明         |    类型    |                              可选值                              |         默认值         |
| :--------------: | :------------------: | :--------: | :--------------------------------------------------------------: | :--------------------: |
|       type       |     日期时间类型     |  _string_  | `yearrange`/`monthrange`/`daterange`/`datetimerange`/`timerange` |      `daterange`       |
|    separator     |     区间分隔字符     |  _string_  |                                -                                 |          `-`           |
| startPlaceholder |   开始日期占位字符   |  _string_  |                                -                                 |    `请选择开始时间`    |
|  endPlaceholder  |   结束日期占位字符   |  _string_  |                                -                                 |    `请选择结束时间`    |
|     minDate      |   可选择的最小日期   |   _Date_   |                                -                                 |         十年前         |
|     maxDate      |   可选择的最大日期   |   _Date_   |                                -                                 |         十年后         |
|    formatter     | 显示的时间格式化函数 | _function_ |                                -                                 | 使用 YYYY-MM-DD 格式化 |

### Events

| 事件    | 说明           | 回调参数                             |
| ------- | -------------- | ------------------------------------ |
| blur    | 失去焦点时触发 | _event: Event_                       |
| focus   | 获得焦点时触发 | _event: Event_                       |
| confirm | 确认选择时触发 | {currentValue: Array&lt;Date&gt;, type: string} |