Skip to content
On this page

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

Released under the MIT License.