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'

// `precision` decides what one click commits and which grid the panel opens on.
// It is orthogonal to `mode`, so `range` + `month` is a month range. The emitted
// value is the first instant of the period, formatted to match: 'yyyy-MM-dd',
// 'yyyy-MM', 'yyyy'. The panel header zooms out from wherever it opened.
const day = ref<string | null>('2026-09-05')
const month = ref<string | null>('2026-09')
const year = ref<string | null>('2026')
const yearRange = ref<[string | null, string | null]>(['2018', '2024'])
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <div>
      <KunDatePicker v-model="day" label="发售日" />
      <p class="text-default-500 mt-1 font-mono text-xs">{{ day ?? 'null' }}</p>
    </div>

    <div>
      <KunDatePicker v-model="month" precision="month" label="收录月份" />
      <p class="text-default-500 mt-1 font-mono text-xs">{{ month ?? 'null' }}</p>
    </div>

    <div>
      <KunDatePicker v-model="year" precision="year" label="出品年份" />
      <p class="text-default-500 mt-1 font-mono text-xs">{{ year ?? 'null' }}</p>
    </div>

    <div>
      <KunDatePicker
        v-model="yearRange"
        precision="year"
        mode="range"
        label="年代区间"
        :min-date="new Date(1995, 0, 1)"
      />
      <p class="text-default-500 mt-1 font-mono text-xs">
        {{ yearRange[0] ?? 'null' }} → {{ yearRange[1] ?? 'null' }}
      </p>
    </div>
  </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>

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

<template>
  <div class="flex max-w-md flex-col gap-3">
    <KunDatePicker v-model="a" label="可清除（默认）" :clearable="true" />
    <KunDatePicker v-model="b" label="禁用" :disabled="true" />
  </div>
</template>

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

<template>
  <div class="max-w-xs">
    <KunDatePicker v-model="date" label="出生日期" error="请选择一个有效的日期" />
  </div>
</template>