Date Carousel
The Date Carousel component provides a week-based date selector with navigation arrows and an integrated date picker. It displays a week view with clickable day buttons, supports date restrictions, highlighted dates, and flexible week configurations including ISO weekdays.
Basic usage
The Date Carousel component supports v-model for two-way data binding with an IkTime instance. It displays the current week with navigation arrows to move between weeks.
Selected: Mon, 2 Feb 2026
<template>
<IkDateCarousel v-model="selectedDate" />
<p v-if="selectedDate" class="ik-mt-4">Selected: {{ selectedDate.format('ddd, D MMM YYYY') }}</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const selectedDate = ref(time());
</script>Day description mode
Enable the day_description prop to show descriptive text for today, yesterday, and tomorrow instead of the date range.
Range mode: 2 Feb 2026
Description mode: 2 Feb 2026
<template>
<IkDateCarousel
v-model="date1"
:day_description="false"
class="ik-mb-4"
/>
<p v-if="date1" class="ik-text--sm ik-text--default-regular ik-mb-4">
Range mode: {{ date1.format('D MMM YYYY') }}
</p>
<IkDateCarousel
v-model="date2"
:day_description="true"
/>
<p v-if="date2" class="ik-text--sm ik-text--default-regular">
Description mode: {{ date2.format('D MMM YYYY') }}
</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const date1 = ref(time());
const date2 = ref(time());
</script>ISO weekdays
Use the iso_weekdays prop to use ISO week numbering (Monday-Sunday) instead of the default week (Sunday-Saturday).
Default week (Sunday-Saturday)
ISO week (Monday-Sunday)
<template>
<IkDateCarousel
v-model="date1"
:iso_weekdays="false"
class="ik-mb-4"
/>
<p class="ik-text--sm ik-text--default-regular ik-mb-4">
Default week (Sunday-Saturday)
</p>
<IkDateCarousel
v-model="date2"
:iso_weekdays="true"
/>
<p class="ik-text--sm ik-text--default-regular">
ISO week (Monday-Sunday)
</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const date1 = ref(time());
const date2 = ref(time());
</script>Disabled dates
Disable past dates
Use the disabled_past prop to prevent selection of past dates.
Selected: 2 Feb 2026
<template>
<IkDateCarousel
v-model="futureDate"
:disabled_past="true"
/>
<p v-if="futureDate" class="ik-mt-4">Selected: {{ futureDate.format('D MMM YYYY') }}</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const futureDate = ref(time());
</script>Disable future dates
Use the disabled_future prop to prevent selection of future dates.
Selected: 2 Feb 2026
<template>
<IkDateCarousel
v-model="pastDate"
:disabled_future="true"
/>
<p v-if="pastDate" class="ik-mt-4">Selected: {{ pastDate.format('D MMM YYYY') }}</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const pastDate = ref(time());
</script>Disable specific weekdays
Use the disabled_weekdays prop to disable specific days of the week. Days are numbered 0-6 (Sunday-Saturday).
Selected: Mon, 2 Feb 2026
Weekends (Sunday=0, Saturday=6) are disabled
<template>
<IkDateCarousel
v-model="weekdayDate"
:disabled_weekdays="[0, 6]"
/>
<p v-if="weekdayDate" class="ik-mt-4">Selected: {{ weekdayDate.format('ddd, D MMM YYYY') }}</p>
<p class="ik-text--sm ik-text--default-light ik-mt-2">Weekends (Sunday=0, Saturday=6) are disabled</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const weekdayDate = ref(time());
</script>Disable date ranges
Use the disabled_datespans prop to disable specific date ranges. This accepts an array of IkTimeSpan objects.
Selected: 2 Feb 2026
<template>
<IkDateCarousel
v-model="rangeDate"
:disabled_datespans="disabledRanges"
/>
<p v-if="rangeDate" class="ik-mt-4">Selected: {{ rangeDate.format('D MMM YYYY') }}</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { IkTimeSpan, time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const rangeDate = ref(time());
// Disable dates from 2 days ago to 2 days from now
const disabledRanges = [
new IkTimeSpan({
from: time().subtract(2, 'days'),
to: time().add(2, 'days')
})
];
</script>Highlighted dates
Use the highlighted_dates prop to highlight specific date ranges in the carousel. Highlighted dates are visually distinguished from regular dates.
Selected: 2 Feb 2026
<template>
<IkDateCarousel
v-model="highlightedDate"
:highlighted_dates="highlightedRanges"
/>
<p v-if="highlightedDate" class="ik-mt-4">Selected: {{ highlightedDate.format('D MMM YYYY') }}</p>
</template>
<script setup>
import { IkDateCarousel } from '@ikol/ui-kit/components/IkDateCarousel';
import { IkTimeSpan, time } from '@ikol/ui-kit/classes/dates';
import { ref } from 'vue';
const highlightedDate = ref(time());
// Highlight dates from today to 5 days from now
const highlightedRanges = [
new IkTimeSpan({
from: time(),
to: time().add(5, 'days')
})
];
</script>