InputDate

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2022, 2, 3))
</script>

<template>
  <PInputDate v-model="value" />
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const defaultValue = shallowRef(new CalendarDate(2022, 2, 6))
</script>

<template>
  <PInputDate :default-value="defaultValue" />
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({
  start: new CalendarDate(2022, 2, 3),
  end: new CalendarDate(2022, 2, 20)
})
</script>

<template>
  <PInputDate range v-model="value" />
</template>

<template>
  <PInputDate color="neutral" highlight />
</template>

<template>
  <PInputDate variant="subtle" />
</template>

<template>
  <PInputDate size="xl" />
</template>

<template>
  <PInputDate range separator-icon="i-lucide-arrow-right" />
</template>

<template>
  <PInputDate disabled />
</template>

<script setup lang="ts">
import type { DateValue } from '@internationalized/date';
import { CalendarDate } from '@internationalized/date';
import { shallowRef } from 'vue';

const modelValue = shallowRef({
  start: new CalendarDate(2022, 1, 1),
  end: new CalendarDate(2022, 1, 9),
});

function isDateUnavailable(date: DateValue) {
  return date.day >= 10 && date.day <= 16;
}
</script>

<template>
  <PInputDate
    v-model="modelValue"
    :is-date-unavailable="isDateUnavailable"
    range
  />
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date';
import { shallowRef } from 'vue';

const modelValue = shallowRef(new CalendarDate(2023, 9, 10));
const minDate = new CalendarDate(2023, 9, 1);
const maxDate = new CalendarDate(2023, 9, 30);
</script>

<template>
  <PInputDate
    v-model="modelValue"
    :min-value="minDate"
    :max-value="maxDate"
  />
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date';
import { shallowRef, useTemplateRef } from 'vue';

const inputDateRef = useTemplateRef('inputDateRef');

const modelValue = shallowRef(new CalendarDate(2022, 1, 10));
</script>

<template>
  <PInputDate
    ref="inputDateRef"
    v-model="modelValue"
  >
    <template #trailing>
      <PPopover :reference="inputDateRef?.inputsRef[3]?.$el">
        <PButton
          color="neutral"
          variant="link"
          size="sm"
          icon="i-lucide-calendar"
          aria-label="Select a date"
          class="akar:px-0"
        />

        <template #content>
          <PCalendar
            v-model="modelValue"
            class="p-2"
          />
        </template>
      </PPopover>
    </template>
  </PInputDate>
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date';
import { shallowRef, useTemplateRef } from 'vue';

const inputDateRef = useTemplateRef('inputDateRef');

const modelValue = shallowRef({
  start: new CalendarDate(2022, 1, 10),
  end: new CalendarDate(2022, 1, 20),
});
</script>

<template>
  <PInputDate
    ref="inputDateRef"
    v-model="modelValue"
    range
  >
    <template #trailing>
      <PPopover :reference="inputDateRef?.inputsRef[0]?.$el">
        <PButton
          color="neutral"
          variant="link"
          size="sm"
          icon="i-lucide-calendar"
          aria-label="Select a date range"
          class="px-0"
        />

        <template #content>
          <PCalendar
            v-model="modelValue"
            class="p-2"
            :number-of-months="2"
            range
          />
        </template>
      </PPopover>
    </template>
  </PInputDate>
</template>