@apility/vue-datepicker v2.2.0

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

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

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.