# HorCalendar


### 介绍

基础的 日历选择 组件

## 代码演示
### 基础用法
```html
<hor-cell label="提车日期(单选概念)" :value="takeDate" />
<hor-calendar
  type="single"
  :maxDate="new Date(2024, 3, 20)"
  :minDate="new Date(2022, 3, 20)"
  :formatDays="formatDays"
  v-model="takeDate"
  :initialValue="initialValue"
/>
<script setup lang="ts">
  import { HorCalendar, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  // const takeDate = ref(['2023/05/24'])
  const takeDate = ref([])
  const initialValue = ref(new Date(2023, 2, 1))

  const formatDays = (val: CalendarDay[]) => {
    val.forEach((item, index) => {
      if ([6, 0].includes(new Date(item.dateTime).getDay())) {
        val[index].disable = true
      }
    })
    return val
  }
</script>
```

### 日期区间
```html
<hor-cell label="提车日期(时间段)" :formatter="(v) => v.join('-')" :value="takeDateRange" />
<hor-calendar
  type="range"
  :maxRange="3"
  :maxDate="new Date(2023, 7, 20)"
  :minDate="new Date(2023, 1, 20)"
  v-model="takeDateRange"
/>
<script setup lang="ts">
  import { HorCalendar, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  const takeDateRange = ref<string[]>([])
</script>
```

### 多选日期
```html
<hor-cell label="提车日期(多选概念)" :value="takeDateMulti" :formatter="(v) => v.join(',')" />
<hor-calendar
  type="multiple"
  :maxRange="10"
  :maxDate="new Date(2023, 7, 20)"
  :minDate="new Date(2023, 1, 20)"
  v-model="takeDateMulti"
/>
<script setup lang="ts">
  import { HorCalendar, HorCell } from '@daysnap/horn-ui'
  import { ref } from 'vue'
  const takeDateMulti = ref<string[]>([])
</script>
```
## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horCalendarProps" :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>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



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