@apility/vue-datepicker

Datepicker for Vue 3

Installation

NPM

npm install @apility/vue-datepicker

Yarn

yarn add @apility/vue-datepicker

Usage

You can either register the component globally or locally.

import { DatePicker } from '@apility/vue-datepicker';
Vue.component('date-picker', DatePicker);

<date-picker v-model="date" />

Or you can import it locally in your component.

<script setup>
    import { ref } from 'vue';
    import { DatePicker } from '@apility/vue-datepicker';

    const date = ref(new Date());
</script>

<template>
    <DatePicker v-model="date" />
</template>

Props

Name	Type	Default	Description
v-model	Date	null	The currently selected date.
min	Date	null	The minimum date that can be selected.
max	Date	null	The maximum date that can be selected.
predicate	Function	(date) => true	Determine if a given date should be selectable
options	Object	{}	Options for the DatePicker.

The predicate property is a function that receives a Date object and returns a boolean. If the function returns true, the date will be selectable. If the function returns false, the date will be disabled.

This can be used to disable dates that are not available, for example, if you are booking a hotel room.

Options

Name	Type	Default	Description
emitOnMonthChange	Boolean	false	Sets the v-model value to the end or start of the month when changing month in the month view.
emitOnYearChange	Boolean	false	Sets the v-model value to the end or start of the year when changing year in the year view.
emitOnDecadeChange	Boolean	false	Sets the v-model value to the end or start of the decade when changing decade in the decade view.

Localization

This datepicker is built with date-fns. To override the locale and other date-fns options, you must provide a date-fns-options injection.

This package provides a composable to make it easier to provide the localization options.

import { useDateFnsOptions } from '@apility/vue-datepicker';
import { nb } from 'date-fns/locale';

const { setLocale } = useDateFnsOptions();
setLocale(nb)

You may also provide this manually:

import { nb } from 'date-fns/locale';

provide('date-fns-options', {
    locale: nb,
});

Styling

This datepicker is written to be independent of any CSS framework. It is up to you to style the datepicker to fit your needs. However, we provide a default SCSS stylesheet for Bootstrap 5 for your convenience that you can use to get started.

// If using Webpack
@import "~@apility/vue-datepicker";
// If using Vite
@import "../path/to/node_modules/@apility/vue-datepicker";

Make sure to import this stylesheet after Bootstrap, otherwise it won't be able to inherit the Bootstrap styles.