# HorDateRangePicker


### 介绍

一个可以pick时间段的组件


## 代码演示


### 基础用法
```vue
<template>
  <hor-date-range-picker
  label="拍卖时间"
  title="测试"
  v-model="value1"
  :max-date="maxDate"
 />
</template>
<script lang="ts" setup>
const maxDate = new Date()
const value1 = ref([])
</script>
```

### 纵向排列用法
```vue
<template>
  <hor-date-range-picker
  label="拍卖时间"
  title="测试"
  v-model="value1"
  direction="column"
  value-format="yyyy年MM月dd日"
 />
</template>
<script lang="ts" setup>
const maxDate = new Date()
const value1 = ref([])
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horDateRangePickerProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

### 事件

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>confirm</td>
    <td>确认回调，回调参数是被valueFormat格式化后的值</td>
  </tr>
</table>


<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorDateRangePicker, horDateRangePickerProps } from '.'
  import { parseType } from '../utils'
</script>