DatePicker 日期选择器

<script setup lang="ts">
  import { ref } from 'vue'
  import { DatePicker, Stack, Text } from '@hina-ui/vue'

  const date = ref<string | null>(null)
</script>

<template>
  <Stack gap="sm" align="start">
    <DatePicker v-model="date" aria-label="发售日期" class="w-72" />
    <Text tone="muted" size="sm">值：{{ date ?? '空' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DatePicker } from '@hina-ui/vue'

  const date = ref<string | null>('2026-09-10')
  const weekend = (value: string) => [0, 6].includes(new Date(`${value}T00:00`).getDay())
</script>

<template>
  <DatePicker
    v-model="date"
    min="2026-09-01"
    max="2026-09-30"
    :unavailable="weekend"
    aria-label="活动日期"
    class="w-72"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DatePicker } from '@hina-ui/vue'

  const date = ref<string | null>('2026-09-04')
</script>

<template>
  <DatePicker v-model="date" clearable aria-label="发布日期" class="w-72" />
</template>

<script setup lang="ts">
  import { DatePicker, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-72">
    <DatePicker size="sm" model-value="2026-09-04" aria-label="小号" />
    <DatePicker size="md" model-value="2026-09-04" aria-label="中号" />
    <DatePicker size="lg" model-value="2026-09-04" aria-label="大号" />
  </Stack>
</template>

<script setup lang="ts">
  import { DatePicker, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-72">
    <DatePicker model-value="2026-09-04" invalid aria-label="校验未通过" />
    <DatePicker model-value="2026-09-04" disabled aria-label="已禁用" />
    <DatePicker model-value="2026-09-04" readonly aria-label="只读" />
    <DatePicker model-value="2026-09-04" variant="secondary" aria-label="扁平形态" />
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, DatePicker, Form, FormField, Text } from '@hina-ui/vue'

  const schema = v.object({
    released: v.string('请选择发售日期'),
  })

  const values = reactive({ released: null as string | null })
  const saved = ref('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = JSON.stringify(data)
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="released" label="发售日期" required>
      <DatePicker v-model="values.released" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">保存</Button>
    <Text v-if="saved" tone="muted" size="sm">已保存：{{ saved }}</Text>
  </Form>
</template>