@daysnap/horn-ui/src/hor-calendar-popup/README.md

hron ui

# HorCalendarPopup


### 介绍
弹框式日历选择器,见案例

## 代码演示
### 单个日期
```html
<hor-cell label="最后跟进时间" arrow @click="handleClick" :value="followTime" />
  <!-- valueFormat="yyyy年MM月dd日 hh时" -->
<hor-calendar-popup
  ref="refCalendar"
  type="single"
  :maxDate="new Date(2024, 3, 20)"
  :minDate="new Date(2022, 3, 20)"
  :initialValue="initialValue"
/>
<script setup lang="ts">
import { HorCalendarPopup, HorCell, HorCellPicker } from '@daysnap/horn-ui'
import type { HorCalendarPopupInstance } from '@daysnap/horn-ui'
import { ref } from 'vue'
const followTime = ref<string[]>(['2023/04/28 16:18:16'])
const refCalendar = ref<HorCalendarPopupInstance>()
const initialValue = ref(new Date('2023/06/20'))
const handleClick = () => {
  refCalendar.value?.show({ modelValue: followTime.value }).then((res) => {
    console.log('res =>', res)
    followTime.value = res as string[]
  })
}
</script>

```

### 日期区间
```html
<hor-cell-picker
  v-model="takeDateRange"
  label="提车日期(时间段)"
  direction="column"
  arrow
  clearable
  :formatter="format"
  @click="handleClickRange"
></hor-cell-picker>
<!-- valueFormat="yyyy年MM月dd日 hh时mm分ss秒" -->
<hor-calendar-popup
  ref="refCalendarRange"
  type="range"
  :maxRange="3"
  :maxDate="new Date(2023, 7, 20)"
  :minDate="new Date(2023, 1, 20)"
  :initialValue="defaultDateRange"
/>
<script setup lang="ts">
import { HorCalendarPopup, HorCell, HorCellPicker } from '@daysnap/horn-ui'
import type { HorCalendarPopupInstance } from '@daysnap/horn-ui'
import { ref } from 'vue'
const takeDateRange = ref<string[]>(['2023/04/16 16:18:16', '2023/04/28 16:18:16'])
const refCalendarRange = ref<HorCalendarPopupInstance>()
const defaultDateRange = ref(new Date(2023, 4, 15))
const handleClickRange = () => {
  refCalendarRange.value?.show({ modelValue: takeDateRange.value }).then((res) => {
    takeDateRange.value = res
  })
}
const format = (v: any) => {
  console.log('v =>', v)
  return v ? v.join(`<br/>`) : v
}
</script>
```

### 多个个日期
```html
<hor-cell
  label="提车日期(多选概念)"
  @click="handleClickMulti"
  arrow
  :value="takeDateMulti"
  :formatter="(v) => v.join(',')"
/>
<!-- valueFormat="yyyy年MM月" -->
<hor-calendar-popup
  ref="refCalendarMulti"
  type="multiple"
  :maxRange="10"
  :maxDate="new Date(2023, 7, 20)"
  :minDate="new Date(2023, 1, 20)"
  :initialValue="defaultDateMulti"
/>
<script setup lang="ts">
import { HorCalendarPopup, HorCell, HorCellPicker } from '@daysnap/horn-ui'
import type { HorCalendarPopupInstance } from '@daysnap/horn-ui'
import { ref } from 'vue'
const takeDateMulti = ref<string[]>([
  '2023/04/16 16:18:16',
  '2023/04/18 16:18:16',
  '2023/04/20 16:18:16',
  '2023/04/22 16:18:16',
  '2023/04/24 16:18:16',
  '2023/04/26 16:18:16',
  '2023/04/28 16:18:16',
])
const refCalendarMulti = ref<HorCalendarPopupInstance>()
const defaultDateMulti = ref(new Date(2023, 4, 15))
const handleClickMulti = async () => {
  takeDateMulti.value = (await refCalendarMulti.value?.show({
    modelValue: takeDateMulti.value,
  })) as string[]
}
</script>

```
## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horCalendarPopupProps" :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 { HorCalendarPopup, horCalendarPopupProps } from '.'
  import { parseType } from '../utils'
</script>