Calendar 日历

<template>
  <PreviewBlock title="基本">
    <DuButton @click="singleVisible = true">单个日期选择</DuButton>
    <DuButton @click="multipleVisible = true">选择日期</DuButton>
    <DuButton @click="rangeVisible = true">范围选择</DuButton>
    <DuButton @click="singleTimeVisible = true">日期时间选择</DuButton>
    <DuButton @click="multipleTimeVisible = true">多日期时间选择</DuButton>
    <DuButton @click="rangeTimeVisible = true">范围日期时间选择</DuButton>
  </PreviewBlock>
  <PreviewBlock title="最小可选时间">
    <DuButton @click="visible4 = true">范围日期选择</DuButton>
  </PreviewBlock>
  <DuCalendar v-model:visible="singleVisible" type="single" @confirm="handleSingleConfirm" />
    <DuCalendar v-model:visible="singleTimeVisible" type="single" show-time-picker @confirm="handleSingleConfirm" />
  <DuCalendar v-model:visible="multipleVisible" type="multiple" @confirm="handleMultipleConfirm" />
  <DuCalendar v-model:visible="multipleTimeVisible" type="multiple" show-time-picker @confirm="handleMultipleConfirm" />
  <DuCalendar v-model:visible="rangeVisible" type="range" @confirm="handleRangeConfirm" />
  <DuCalendar
    v-model:visible="rangeTimeVisible"
    type="range"
    show-time-picker
    :selected-date="rangeTimeSelected"
    :time-step="1"
    @confirm="handleRangeTimeConfirm"
  />
  <DuCalendar v-model:visible="visible4" type="range" :min="minDate" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuButton, DuCalendar } from 'dangoui'
import dayjs from 'dayjs'

const singleVisible = ref(false)
const singleTimeVisible = ref(false)
const multipleVisible = ref(false)
const multipleTimeVisible = ref(false)
const rangeVisible = ref(false)
const rangeTimeVisible = ref(false)

const rangeTimeSelected = ref([dayjs().subtract(1, 'day').startOf('day').add(10, 'hour').add(31, 'minute'), dayjs().startOf('day')])

const minDate = dayjs().subtract(6, 'month')
const visible4 = ref(false)

function handleSingleConfirm({ value }: any) {
  console.log(`[demo] ${value.format('YYYY-MM-DD HH:mm')}`)
}

function handleMultipleConfirm({ value }: any) {
  console.log(`[demo] ${value.map(e => e.format('YYYY-MM-DD HH:mm')).join(', ')}`)
}

function handleRangeConfirm({ value }: any) {
  console.log(`[demo] ${value.map(e => e.format('YYYY-MM-DD HH:mm')).join(', ')}`)
}

function handleRangeTimeConfirm({ dates }) {
  rangeTimeSelected.value = dates
  rangeTimeVisible.value = false
}
</script>