DateTimePicker 日期时间选择器

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

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

<template>
  <Stack gap="sm" align="start">
    <DateTimePicker
      v-model="at"
      placeholder="2026-09-01T09:00"
      aria-label="定时发布"
      class="w-80"
    />
    <Text tone="muted" size="sm">值：{{ at ?? '空' }}</Text>
  </Stack>
</template>

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

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

<template>
  <DateTimePicker
    v-model="at"
    min="2026-09-01T00:00"
    max="2026-09-30T23:59"
    :minute-step="15"
    :unavailable="weekend"
    aria-label="活动时间"
    class="w-80"
  />
</template>

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

  const at = ref<string | null>('2026-09-04T20:00')
</script>

<template>
  <DateTimePicker v-model="at" clearable aria-label="发布时间" class="w-80" />
</template>

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

<template>
  <Stack class="w-80">
    <DateTimePicker size="sm" model-value="2026-09-04T20:00" aria-label="小号" />
    <DateTimePicker size="md" model-value="2026-09-04T20:00" aria-label="中号" />
    <DateTimePicker size="lg" model-value="2026-09-04T20:00" aria-label="大号" />
  </Stack>
</template>

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

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

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

  const schema = v.object({
    startsAt: v.string('请选择开始时间'),
  })

  const values = reactive({ startsAt: 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="startsAt" label="开始时间" required>
      <DateTimePicker v-model="values.startsAt" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">保存</Button>
    <Text v-if="saved" tone="muted" size="sm">已保存：{{ saved }}</Text>
  </Form>
</template>