Interactive Demos
All examples below are live -- click the trigger buttons to interact.
Theme Switcher
Toggle between light and dark themes. The component auto-adapts via CSS variables.
<!-- Force light theme -->
<html data-theme="light">
<!-- Force dark theme -->
<html data-theme="dark">
<!-- Or use classes -->
<html class="light"></html>
</html>
</html>📅 Single Date
Default date picker with ISO format output.
<DatePicker v-model="date" placeholder="Pick a date" />📅 Custom Format
Use the format prop to control display output.
<DatePicker v-model="date" format="DD/MM/YYYY" />Available format tokens
YYYY (year), MM (month), DD (day), HH (hour), mm (minute), MMMM (full month name), MMM (short month name), dddd (weekday), ddd (short weekday)
📅 Date Range
Enable range selection with the range prop.
<DatePicker v-model:range-start="start" v-model:range-end="end" range />⏰ Time Only — 24h
Set type="time" for a standalone time picker.
<DatePicker v-model="time" type="time" />🕐 Time Only — 12h AM/PM
Add hour-format="12" for AM/PM toggle.
<DatePicker v-model="time" type="time" hour-format="12" />📅⏰ DateTime
Combine date and time with type="datetime-local".
<DatePicker v-model="dt" type="datetime-local" />📅⏰ DateTime — 12h
DateTime with 12-hour format.
<DatePicker v-model="dt" type="datetime-local" hour-format="12" />🔒 Min / Max Constraints
Limit selectable dates with min and max props.
<DatePicker v-model="date" min="2026-02-01" max="2026-02-28" />🚫 Disabled Dates
Disable specific dates using an array of ISO strings or a predicate function.
Dates 2026-02-14, 15, 21, 22 are disabled:
<DatePicker
v-model="date"
:disabled-dates="['2026-02-14', '2026-02-15', '2026-02-21', '2026-02-22']"
/>
<!-- Or disable weekends with a function -->
<DatePicker
v-model="date"
:disabled-dates="(d) => d.getDay() === 0 || d.getDay() === 6"
/>📌 Marked Dates
Mark specific dates with colored dot indicators and optional tooltips. A single day can have multiple marks — dots are displayed side-by-side.
<DatePicker
v-model="date"
:marked-dates="[
{ date: '2026-02-14', color: '#ec4899', tooltip: 'Sevgililer Günü ❤️' },
{ date: '2026-02-14', color: '#f59e0b', tooltip: 'Hediye al 🎁' },
{ date: '2026-02-23', color: '#10b981', tooltip: 'Toplantı' },
{ date: '2026-02-28', tooltip: 'Son gün' },
]"
/>Multi-Mark
The same date can have multiple marks. Dots display side-by-side and tooltips are combined with line breaks.
🎯 Custom Tooltip
Use the #mark-tooltip scoped slot for complete control over tooltip content — any HTML, layout, or component you want.
<DatePicker
v-model="date"
:marked-dates="marks"
style="
--bt-tooltip-max-width: 320px;
--bt-tooltip-padding: 0;
--bt-tooltip-radius: 12px;
"
>
<template #mark-tooltip="{ marks, day }">
<!-- Gradient Header -->
<div style="background: linear-gradient(135deg, #667eea, #764ba2);
padding: 8px 14px; border-radius: 12px 12px 0 0;
color: white; font-weight: 700;">
📅 {{ day }}
</div>
<!-- Entries -->
<div style="padding: 10px 14px;">
<div v-for="m in marks" :key="m.date"
style="display: flex; gap: 10px; padding: 6px 0;">
<span :style="{
background: m.color,
width: '12px', height: '12px',
borderRadius: '50%',
boxShadow: '0 0 8px ' + m.color
}" />
<div>
<div style="font-weight: 700;">{{ m.tooltip }}</div>
<div style="font-size: 0.7rem; color: #94a3b8;">
{{ m.description }}
</div>
</div>
<span :style="{
background: m.color,
color: 'white',
fontSize: '0.6rem',
padding: '2px 6px',
borderRadius: '6px'
}">{{ m.badge }}</span>
</div>
</div>
</template>
</DatePicker>Full Freedom
The slot gives you complete control — use any HTML, component, image, or layout. Combine with --bt-tooltip-max-width and --bt-tooltip-padding: 0 for edge-to-edge header designs.
Tooltip CSS Customization
Tooltip appearance can be fully controlled with CSS custom properties, including width:
.my-datepicker {
/* Colors */
--bt-tooltip-bg: #1e293b;
--bt-tooltip-color: #f8fafc;
/* Typography */
--bt-tooltip-font-size: 0.875rem;
/* Spacing */
--bt-tooltip-padding: 10px 16px;
--bt-tooltip-radius: 10px;
/* Width Control */
--bt-tooltip-width: auto; /* exact width */
--bt-tooltip-min-width: 120px; /* minimum width */
--bt-tooltip-max-width: 300px; /* maximum width */
}🦶 Footer Slots
Customize the footer area around the "Bugün" (Today) and "Temizle" (Clear) buttons:
<DatePicker v-model="date">
<template #footer-prepend>
<span style="font-size: 0.7rem; opacity: 0.6;">⚡ Quick select</span>
</template>
<template #footer-append>
<button type="button" class="bt-today-btn" @click="date = '2026-01-01'">
📆 New Year
</button>
</template>
</DatePicker>TIP
#footer-prepend renders before the Today button. #footer-append renders after the Clear button. Use them to add quick shortcuts, labels, or custom actions.
🌍 Multi-Language
Switch between 15 built-in languages. The calendar, placeholders, and button labels update instantly.
<script setup>
const lang = ref("tr");
const date = ref("");
</script>
<template>
<DatePicker v-model="date" :lang="lang" />
</template>