Calendar 日历 ​

<template>
  <u-calendar v-model="value" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(new Date())
</script>

<template>
  <u-radio-group v-model="controllerType">
    <u-radio-button label="select" value="select" />
    <u-radio-button label="button" value="button" />
  </u-radio-group>

  <u-calendar v-model="value" :controller-type="controllerType" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const controllerType = ref<'select' | 'button'>('select')
const value = ref(new Date())
</script>

<template>
  <u-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </u-calendar>
</template>

<style>
.is-selected {
  color: #1989fa;
}
</style>

<template>
  <u-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
</template>

<template>
  <u-calendar ref="calendar">
    <template #header="{ date }">
      <span>Custom header content</span>
      <span>{{ date }}</span>
      <u-button-group>
        <u-button size="small" @click="selectDate('prev-year')">
          Previous Year
        </u-button>
        <u-button size="small" @click="selectDate('prev-month')">
          Previous Month
        </u-button>
        <u-button size="small" @click="selectDate('today')">Today</u-button>
        <u-button size="small" @click="selectDate('next-month')">
          Next Month
        </u-button>
        <u-button size="small" @click="selectDate('next-year')">
          Next Year
        </u-button>
      </u-button-group>
    </template>
  </u-calendar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { CalendarDateType, CalendarInstance } from 'uniboot-ui'

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
</script>