Skip to content
On this page

Calendar configuration

Configure calendar options such as behavior or available dates

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, weekNumbers as week-numbers and so on

week-numbers

Display week numbers in the calendar. Datepicker uses ISO week numbering

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" week-numbers />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

hide-offset-dates

Hide dates from the previous/next month in the calendar

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" hide-offset-dates />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

min-date

All dates before the given date will be disabled

  • Type: Date | string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" :min-date="new Date()" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

max-date

All dates after the given date will be disabled

  • Type: Date | string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" :max-date="new Date()" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

prevent-min-max-navigation

Prevent navigation after or before the min-date or max-date

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" :min-date="minDate" :max-date="maxDate" prevent-min-max-navigation />
</template>

<script>
import { ref } from 'vue';
import { addMonths, getMonth, getYear, subMonths } from 'date-fns';

export default {
    setup() {
        const date = ref(new Date());
        // 2 months before and after the current date
        const minDate = computed(() => subMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
        const maxDate = computed(() => addMonths(new Date(getYear(new Date()), getMonth(new Date())), 2));
        
        return {
            date,
            minDate,
            maxDate
        }
    }
}
</script>

ignore-time-validation

By default, when using min-date or max-date the time set on those dates will be included in validation. If you want to just check dates, pass this option to disable time check

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker 
            v-model="date"
            :max-date="maxDate"
            ignore-time-validation
            placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        // Today with the time 00:00
        // Without ignoreTimeValidation, you will not be able to select the date
        const maxDate = ref(new Date(2022, (new Date()).getMonth(), (new Date()).getDate()));
        
        return {
            date,
            maxDate,
        }
    }
}
</script>

start-date

Open the datepicker to some preselected month and year

  • Type: Date | string
  • Default: null
Code Example
vue
<template>
    <Datepicker v-model="date" :start-date="startDate" placeholder="Select Date" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        const startDate = ref(new Date(2020, 1));
        
        return {
            date,
            startDate,
        }
    }
}
</script>

week-start

Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday

  • Type: number | string
  • Default: 1
Code Example
vue
<template>
    <Datepicker v-model="date" week-start="0" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

filters

Disable specific values from being selected in the month, year, and time picker overlays

  • Type: Filters
  • Default: null
ts
interface Filters {
  months?: number[]; // 0 = Jan, 11 - Dec
  years?: number[]; // Array of years to disable
  times?: {
    hours?: number[]; // disable specific hours
    minutes?: number[]; // disable sepcific minutes
    seconds?: number[] // disable specific seconds
  }
}
Code Example
vue
<template>
    <Datepicker v-model="date" :filters="filters" />
</template>

<script>
import { ref } from 'vue';
import { getMonth, addMonths } from 'date-fns'

export default {
    setup() {
        const date = ref(new Date());

        // For demo purposes, disable the next 3 months from the current month
        const filters = computed(() => {
          const currentDate = new Date()
          return {
            months: Array.from(Array(3).keys())
                    .map((item) => getMonth(addMonths(currentDate, item + 1)))
          }
        })
        
        return {
            filters,
            date,
        }
    }
}
</script>

disable-month-year-select

Removes the month and year picker

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" disable-month-year-select />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

year-range

Specify start and end year for years to generate

  • Type: [number, number]
  • Default: [1900, 2100]
Code Example
vue
<template>
    <Datepicker v-model="date" :year-range="[2020, 2040]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

reverse-years

Reverse the order of the years in years overlay

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" reverse-years :year-range="[2020, 2040]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref(new Date());
        
        return {
            date,
        }
    }
}
</script>

allowed-dates

Allow only specific dates

  • Type: string[] | Date[]
  • Default: []
Code Example
vue
<template>
    <Datepicker v-model="date" :allowed-dates="allowedDates" />
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const date = ref();
        
        // For demo purposes, enable only today and tomorrow
        const allowedDates = computed(() => {
          return [
            new Date(),
            new Date(new Date().setDate(new Date().getDate() + 1))
          ];
        });
        
        return {
            date,
          allowedDates,
        }
    }
}
</script>

disabled-dates

Disable specific dates

  • Type: Date[] | string[] | (date: Date) => boolean
  • Default: []

Note: If you use a custom function, make sure to return true for a disabled date and false for enabled

Code Example
vue
<template>
    <Datepicker v-model="date" :disabled-dates="disabledDates" />
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const date = ref(new Date());

        // For demo purposes disables the next 2 days from the current date
        const disabledDates = computed(() => {
            const today = new Date();
            
            const tomorrow = new Date(today)
            tomorrow.setDate(tomorrow.getDate() + 1)
            
            const afterTomorrow = new Date(tomorrow);
            afterTomorrow.setDate(tomorrow.getDate() + 1);
            
            return [tomorrow, afterTomorrow]
        })
        
        return {
            disabledDates,
            date,
        }
    }
}
</script>

disabled-week-days

Disable specific days from the week

  • Type: string[] | number[] - 0-6, 0 is Sunday, 6 is Saturday
  • Default: []
Code Example
vue
<template>
    <Datepicker v-model="date" :disabled-week-days="[6, 0]" />
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const date = ref();
        
        return {
            date,
        }
    }
}
</script>

no-disabled-range

Prevents range selection if the range includes disabled dates

  • Type: boolean
  • Default: false
Code Example
vue
<template>
    <Datepicker v-model="date" 
                range
                no-disabled-range
                :disabled-dates="disabledDates" />
</template>

<script>
import { ref } from 'vue';
import { addDays, subDays } from 'date-fns';

export default {
    setup() {
        const date = ref(new Date());

        const disabledDates = [subDays(new Date(), 1), new Date(), addDays(new Date(), 1)];
        
        return {
            date,
            disabledDates,
        }
    }
}
</script>

Released under the MIT License.