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.