DatePicker (日期选择器)

<script setup lang="ts">
import { ref } from 'vue'
const date = ref('')
</script>

<template>
  <div class="max-w-xs">
    <KunDatePicker v-model="date" label="Pick a date" />
    <p class="text-default-600 mt-2 text-sm">Value: {{ date || '—' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const range = ref<[string | null, string | null]>([null, null])
</script>

<template>
  <div class="max-w-xs">
    <KunDatePicker v-model="range" mode="range" label="选择日期范围" />
    <p class="text-default-600 mt-2 text-sm">起始：{{ range[0] || '—' }}</p>
    <p class="text-default-600 text-sm">结束：{{ range[1] || '—' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const date = ref('')

// 仅允许选择今天及以后的工作日
const today = new Date()
today.setHours(0, 0, 0, 0)
const isDateDisabled = (d: Date) => {
  const day = d.getDay()
  return d < today || day === 0 || day === 6
}
</script>

<template>
  <div class="max-w-xs">
    <KunDatePicker
      v-model="date"
      label="自定义格式与禁用日期"
      format="yyyy 年 MM 月 dd 日"
      :is-date-disabled="isDateDisabled"
    />
    <p class="text-default-600 mt-2 text-sm">Value: {{ date || '—' }}</p>
    <p class="text-default-400 text-xs">已禁用过去的日期、周六与周日</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const a = ref('')
const b = ref('')
const c = ref('')
</script>

<template>
  <div class="flex max-w-md flex-col gap-3">
    <KunDatePicker v-model="a" color="primary" label="primary" />
    <KunDatePicker v-model="b" color="secondary" label="secondary" />
    <KunDatePicker v-model="c" color="success" label="success" />
  </div>
</template>