Look and feel
Customization options
Info
- When checking the examples, for
boolean
prop types, the example will show the behavior opposite of what is set for the default value - If you use the component in the browser
<script>
tag, make sure to pass multi-word props with-
, for example,sixWeeks
assix-weeks
and so on
transitions
Control transitions inside the menu. You can define your own or disable them. Datepicker uses Vue built in transitions component for transitions control. To configure you own, please check the Vue documentation and provide a transition name in the prop
- Type:
Transitions | boolean
- Default:
true
interface Transitions {
open?: string;
close?: string;
next?: string;
previous?: string;
menuAppear?: string;
vNext?: string;
vPrevious?: string;
}
open
andclose
are added on overlays show/hidenext
andprevious
added when switching months in the calendarmenuAppear
is added on menu openvNext
andvPrevious
are added when switching months in the calendar in thevertical
mode
Code Example
<template>
<Datepicker v-model="date" :transitions="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
six-weeks
Always display six weeks on the calendar. This will prevent dynamic calendar height change depending on the month
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" six-weeks />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
dark
Theme switch between the dark and light mode
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" dark />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
offset
Number of pixels between the menu and input
- Type:
number | string
- Default:
10
Code Example
<template>
<Datepicker v-model="date" :offset="20" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
hide-input-icon
Hide calendar icon in the input field
- Type:
boolean
- Default:
false
Code Example
<template>
<Datepicker v-model="date" hide-input-icon />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
state
Validation state of the calendar value. Sets the green/red border depending on the value
- Type:
boolean
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :state="false" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
input-class-name
Add a custom class to the input field
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" input-class-name="dp-custom-input" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-input {
box-shadow: 0 0 6px #1976d2;
color: #1976d2;
&:hover {
border-color: #1976d2;
}
}
</style>
menu-class-name
Add a custom class to the datepicker menu wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" menu-class-name="dp-custom-menu" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-menu {
box-shadow: 0 0 6px #1976d2;
}
</style>
calendar-class-name
Add a custom class to the calendar wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendar-class-name="dp-custom-calendar" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-calendar {
.dp__calendar_item {
border: 1px solid var(--dp-border-color-hover);
}
}
</style>
calendar-cell-class-name
Add a custom class to the calendar cell wrapper
- Type:
string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" calendar-cell-class-name="dp-custom-cell" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const date = ref(new Date());
return {
date,
}
}
}
</script>
<style lang="scss">
.dp-custom-cell {
border-radius: 50%;
}
</style>
day-class
Add custom class to the calendar cell depending on the date
- Type:
(date: Date) => string
- Default:
null
Code Example
<template>
<Datepicker v-model="date" :day-class="getDayClass" />
</template>
<script>
import { ref } from 'vue';
import { addDays, isEqual, set } from 'date-fns';
export default {
setup() {
const date = ref(new Date());
const getDayClass = (date) => {
if (isEqual(date, addDays(set(new Date(), { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }), 1)))
return 'marked-cell';
return '';
};
return {
date,
getDayClass,
}
}
}
</script>