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 as six-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 and close are added on overlays show/hide
next and previous added when switching months in the calendar
menuAppear is added on menu open
vNext and vPrevious are added when switching months in the calendar in the vertical mode

Code Example

vue

<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

vue

<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

vue

<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

vue

<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

vue

<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

vue

<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

vue

<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>

Add a custom class to the datepicker menu wrapper

Type: string
Default: null

Code Example

vue

<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

vue

<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

vue

<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

vue

<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>

Look and feel #

transitions #

six-weeks #

dark #

offset #

hide-input-icon #

state #

input-class-name #

menu-class-name #

calendar-class-name #

calendar-cell-class-name #

day-class #

Look and feel

transitions

six-weeks

dark

offset

hide-input-icon

state

input-class-name

menu-class-name

calendar-class-name

calendar-cell-class-name

day-class