@daysnap/horn-ui/src/hor-date-picker/README.md

hron ui

# HorDatePicker


### 介绍

一个支持promise风格date-picker组件


## 代码演示


### 基础用法

```html
<hor-cell label="请选择提车日期" :value="startTime.join('/')" @click="handleClick" arrow />
<hor-date-picker ref="refDatePicker" />
<script setup lang="ts">
  const refDatePicker = ref<HorDatePickerInstance>()
  // const startTime = ref('')
  const startTime = ref('2023/4')
  // const startTime = ref(['2023', '04'])
  const handleClick = async () => {
    refDatePicker.value
      ?.show({
        modelValue: startTime.value,
        columnsType: ['year', 'month'],
        title: '请选择提车时间',
        confirmButtonText: '确定提车时间',
        cancelButtonText: '暂不选择',
        valueFormat: 'yyyy年MM月dd日',
        minDate: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000),
        maxDate: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
        filter: (columnType: string, options: PickerOption[]): PickerOption[] => {
          if (columnType === 'month') {
            return options.filter((i) => Number(i.value) % 2 === 0)
          }
          return options
        },
      })
      .then((res) => {
        console.log('res =>', res)
        startTime.value = res.value
      })
      .catch((err) => {
        console.log('err =>', err)
      })
  }
</script>

```

### v-model模式

```html
<hor-cell label="请选择出厂日期" :value="startTime2.join('/')" @click="handleClick2" arrow />
<hor-date-picker v-bind="datePickerProp" v-model="startTime2" ref="refDatePicker2" />
<script setup lang="ts">
  const startTime2 = ref(['2023', '04', '10'])
  const refDatePicker2 = ref<HorDatePickerInstance>()
  const handleClick2 = () => {
    refDatePicker2.value?.show().catch((err) => {
      console.log('err =>', err)
    })
  }
  const datePickerProp: Partial<HorDatePickerProps> = {
    columnsType: ['year', 'month', 'day'],
    title: '请选择出厂日期',
    minDate: new Date(Date.now() - 8 * 365 * 24 * 60 * 60 * 1000),
    maxDate: new Date(),
    filter: (columnType: string, options: PickerOption[]): PickerOption[] => {
      if (columnType === 'month') {
        return options.filter((i) => Number(i.value) % 2 === 0)
      }
      return options
    },
  }
</script>
```

## API

### 属性 Props

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