Date Picker

<script setup>
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const value = ref([]);
</script>

<template>
  <DatePicker.Root v-model="value" inline>
    <DatePicker.Calendar />
  </DatePicker.Root>
</template>

<script setup>
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const samplingWindow = ref([]);
</script>

<template>
  <DatePicker.Root v-model="samplingWindow" selection-mode="range" :num-of-months="2">
    <DatePicker.Label>Sampling window</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input placeholder="Start date" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
    <DatePicker.Content>
      <DatePicker.Calendar />
    </DatePicker.Content>
  </DatePicker.Root>
</template>

<script setup>
import { today, getLocalTimeZone } from "@internationalized/date";
import { computed, ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const RANGE_MIN_DAYS = 2;
const RANGE_MAX_DAYS = 6;

const value = ref([today(getLocalTimeZone()).add({ days: 2 }), today(getLocalTimeZone()).add({ days: 5 })]);

// A pending range start: the controlled value holds exactly one date.
const pendingStart = computed(() => (value.value.length === 1 ? value.value[0] : undefined));

const outsideRangeLimits = (date) => {
  if (!pendingStart.value) return false;
  const days = Math.abs(
    Math.round((date.toDate("UTC") - pendingStart.value.toDate("UTC")) / 86_400_000),
  );
  return days < RANGE_MIN_DAYS || days > RANGE_MAX_DAYS;
};
</script>

<template>
  <DatePicker.Root
    v-model="value"
    selection-mode="range"
    inline
    :num-of-months="2"
    :is-date-unavailable="outsideRangeLimits"
  >
    <DatePicker.Calendar />
  </DatePicker.Root>
</template>

<script setup>
import { CalendarDate, today, getLocalTimeZone } from "@internationalized/date";
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const value = ref([today(getLocalTimeZone())]);
const inDays = (days) => today(getLocalTimeZone()).add({ days });
</script>

<template>
  <DatePicker.Root v-model="value">
    <DatePicker.Control>
      <DatePicker.Input placeholder="Pick a date" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
    <DatePicker.Content>
      <DatePicker.Calendar />
      <div class="presets">
        <DatePicker.PresetTrigger :value="[inDays(0)]">Today</DatePicker.PresetTrigger>
        <DatePicker.PresetTrigger :value="[inDays(7)]">In a week</DatePicker.PresetTrigger>
      </div>
    </DatePicker.Content>
  </DatePicker.Root>
</template>

<script setup>
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const value = ref([]);
</script>

<template>
  <DatePicker.Root v-model="value">
    <DatePicker.Control>
      <DatePicker.Input placeholder="Pick a date" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
    <DatePicker.Content>
      <div class="selects">
        <DatePicker.MonthSelect aria-label="Month" />
        <DatePicker.YearSelect aria-label="Year" />
      </div>
      <DatePicker.Calendar />
    </DatePicker.Content>
  </DatePicker.Root>
</template>

<script setup>
import { today, getLocalTimeZone } from "@internationalized/date";
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const value = ref([]);
const now = today(getLocalTimeZone());
const weekendUnavailable = (date) => {
  const day = new Date(date.year, date.month - 1, date.day).getDay();
  return day === 0 || day === 6;
};
</script>

<template>
  <DatePicker.Root
    v-model="value"
    :min="now"
    :max="now.add({ days: 30 })"
    :is-date-unavailable="weekendUnavailable"
  >
    <DatePicker.Label>Submission date</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input placeholder="Next 30 days, weekdays" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
    <DatePicker.Content>
      <DatePicker.Calendar />
    </DatePicker.Content>
  </DatePicker.Root>
</template>

<script setup>
import { DatePicker } from "@dicehub/kappa/components/date-picker";
</script>

<template>
  <DatePicker.Root inline show-week-numbers>
    <DatePicker.Calendar />
  </DatePicker.Root>
</template>

<script setup>
import { ref } from "vue";
import { DatePicker } from "@dicehub/kappa/components/date-picker";

const value = ref([]);
</script>

<template>
  <DatePicker.Root v-model="value" locale="de-DE" name="abgabetermin">
    <DatePicker.Label>Abgabetermin</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input placeholder="Datum wählen" />
      <DatePicker.Trigger aria-label="Kalender öffnen" />
    </DatePicker.Control>
    <DatePicker.Content>
      <DatePicker.Calendar />
    </DatePicker.Content>
  </DatePicker.Root>
</template>

<script setup>
import { CalendarDate } from "@internationalized/date";
import { DatePicker } from "@dicehub/kappa/components/date-picker";
</script>

<template>
  <DatePicker.Root disabled :default-value="[new CalendarDate(2026, 8, 1)]">
    <DatePicker.Label>Disabled start date</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input placeholder="Unavailable" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
  </DatePicker.Root>
  <DatePicker.Root invalid>
    <DatePicker.Label>Invalid milestone date</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input placeholder="Required" aria-describedby="milestone-error" />
      <DatePicker.Trigger aria-label="Open calendar" />
    </DatePicker.Control>
  </DatePicker.Root>
  <p id="milestone-error">Select a date before the review closes.</p>
</template>