<script setup>
import ViewSDateSelect from './dateSelect.vue'
 const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"desc",title:"说明"},
  {key:"type",title:"类型"},
  {key:"defaultValue",title:"默认值"},
]
	
const filedData0 = [
  {
		field: 'onChangeDate',
		type: 'Function',
		required: '是',
    defaultValue: "''",
		desc: "时间选择器值改变时触发",
	},
  {
		field: 'title',
		type: 'String',
		required: '否',
    defaultValue: "''",
		desc: "显示的标题，默认时间范围",
	},
	{
		field: 'dateList',
		type: 'Array',
		required: '否',
    defaultValue: `[
        {
            value: 'hour_0.5',
            label: '0.5小时'
        },
        {
            value: 'hour_1',
            label: '1小时'
        },
        {
            value: 'hour_3',
            label: '3小时'
        },
        {
            value: 'day_1',
            label: '1天'
        },
        {
            value: 'day_7',  
            label: '7天'
        },
        {
            value: 'month_1',
            label: '30天'
        }
      ]`,
		desc: "展示的时间选择按钮组, 如果需要自定义value一定要按照时间_天数的格式，eg day_2",
	},
	{
		field: 'placeholder',
		type: 'String',
		required: '否',
    defaultValue: "请选择",
		desc: "时间选择器的placeholder",
	},
]
</script>

# 时间范围选择器
对日期范围进行选择，支持自定义时间范围选择按钮组。

## 功能介绍
<ClientOnly>
 <Table :data="filedData0" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>

## 代码示例
<ClientOnly>
  <ViewSDateSelect/>
</ClientOnly>

## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<template>
  <div>
    <h4 class='ks-title-h4'>基本使用</h4>
    <KsDateSelect @onChangeDate='onChangeDate1'/>
    <p>
      选中的时间：<span v-text="dateValue1"></span>
    </p>

    <h4 class='ks-title-h4'>自定义标题和按钮组</h4>
    <KsDateSelect @onChangeDate='onChangeDate2' title='我是自定义时间组' :dateList='list'/>
    <p>
      选中的时间：<span v-text="dateValue2"></span>
    </p>
    
  </div>
</template>
<script setup>
import { KsDateSelect } from '@ksconsole/components'
import { ref } from "vue";
const dateValue1 = ref('')
const dateValue2 = ref('')
const list = [
  {value: 'day_2',label:'2天'},
  {value: 'day_3',label:'3天'},
  {value: 'day_7',label:'7天'},
]
const onChangeDate1 = (date) => {
  dateValue1.value = date.length ? date.join(' - ') : ''
}
const onChangeDate2 = (date) => {
  dateValue2.value = date.length ? date.join(' - ') : ''
}
</script>
<style scoped>
.ks-title-h4 {
  margin-bottom: 10px;
}
</style>


```
</div>
