Calendar 日历 ​

<template>
  <c-calendar v-model="curDate" @change="curDateChange"></c-calendar>
</template>

<script>
import {defineComponent, ref} from 'vue'

export default defineComponent({
  setup() {
    const curDate = ref(new Date())

    const curDateChange = (val) => {
      console.log(val)
    }
    return {
      curDate,
      curDateChange
    }
  }
})
</script>

<style>

</style>

<template>
  <c-calendar v-model="curDate" @change="curDateChange">
    <template #header="date">
      <div class="customize-header">
        当前日期 {{date}}
        <c-button type="primary" plain @click="addADay">加一天</c-button>
      </div>
    </template>
  </c-calendar>
</template>

<script>
import {defineComponent, ref} from 'vue'

export default defineComponent({
  setup() {
    const curDateChange = (val) => {
      console.log(val)
    }

    const curDate = ref(new Date())

    const addADay = () => {
      const dateTime = new Date(curDate.value).getTime() + (1000 * 60 * 60 * 24)
      curDate.value = new Date(dateTime)
    }
    return {
      curDateChange,
      curDate,
      addADay
    }
  }
})
</script>

<style scoped>
.customize-header {
  padding: 10px;
}
</style>

<template>
  <c-calendar @change="curDateChange">
    <template #dateCell="{isSelected, date, day}">
      {{isSelected ? '当前选中日期' : day}}
    </template>
  </c-calendar>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  setup() {
    const curDateChange = (val) => {
      console.log(val)
    }
    return {
      curDateChange
    }
  }
})
</script>

<style>

</style>