<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>


