DatePicker

<template>
  <AcceleratorDatePicker v-model="singleDate" :input-props="{ validate: false }" />
  <p>Selected: {{ singleDate || '—' }}</p>
</template>

<script setup lang="ts">
const singleDate = ref<string>();
</script>

<template>
  <AcceleratorDatePicker v-model="selectedMonth" :calendar-props="{ view: 'months' }" :input-props="{ validate: false }" placeholder="Select month" />
  <p>Selected: {{ selectedMonth || '—' }}</p>
</template>

<script setup lang="ts">
const selectedMonth = ref<string>();
</script>

<template>
  <AcceleratorDatePicker v-model="selectedYear" :calendar-props="{ view: 'years' }" :input-props="{ validate: false }" placeholder="Select year" />
  <p>Selected: {{ selectedYear || '—' }}</p>
</template>

<script setup lang="ts">
const selectedYear = ref<string>();
</script>

<template>
  <AcceleratorDatePicker v-model="dateRange" :calendar-props="{ mode: 'range' }" :input-props="{ validate: false }" placeholder="Select date range" />
  <p>Range: {{ dateRange?.start || '—' }} to {{ dateRange?.end || '—' }}</p>
</template>

<script setup lang="ts">
import type { RangeValue } from '@levarnebv/accelerator-nuxtv3-module/types';

const dateRange = ref<RangeValue>();
</script>

<template>
  <AcceleratorDatePicker v-model="monthRange" :calendar-props="{ view: 'months', mode: 'range' }" :input-props="{ validate: false }" placeholder="Select month range" />
  <p>Range: {{ monthRange?.start || '—' }} to {{ monthRange?.end || '—' }}</p>
</template>

<script setup lang="ts">
import type { RangeValue } from '@levarnebv/accelerator-nuxtv3-module/types';

const monthRange = ref<RangeValue>();
</script>

<template>
  <AcceleratorDatePicker v-model="yearRange" :calendar-props="{ view: 'years', mode: 'range' }" :input-props="{ validate: false }" placeholder="Select year range" />
  <p>Range: {{ yearRange?.start || '—' }} to {{ yearRange?.end || '—' }}</p>
</template>

<script setup lang="ts">
import type { RangeValue } from '@levarnebv/accelerator-nuxtv3-module/types';

const yearRange = ref<RangeValue>();
</script>

<template>
  <AcceleratorDatePicker
    v-model="selectedDate"
    :close-on-select="true"
    :input-props="{ validate: false }"
  />
</template>

<script setup lang="ts">
const selectedDate = ref<string>();
</script>

<template>
  <AcceleratorDatePicker name="birthdate" placeholder="Select your birthdate" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  birthdate: z.string().min(1, 'Birthdate is required'),
}));

const { values, errors } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorDatePicker
    name="tripDate"
    placeholder="Select date range"
    :calendar-props="{ mode: 'range' }"
  />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  tripDate: z.object({
    start: z.string().min(1, 'Start date is required'),
    end: z.string().min(1, 'End date is required'),
  }),
}));

const { values, errors } = useForm({
  validationSchema: schema,
});
</script>