Installation & Usage

Requirements

You need to have stylus and stylus-loader as dev dependencies. You probably already have them if you added Vuetify through their plugin. However, if you don't have them installed, you can do so by doing

yarn add -D stylus stylus-loader

You also need to have date-fns for the component to work. It is required for date manipulation, formatting and all things related to dates. It is great because it supports code splitting and tree shaking and adds minimal baggage to the component.

yarn add date-fns

When you install vuetify-daterange-picker, the peer dependencies warning should point that out for you.

Installation

Version 3.x.x is the latest and is compatible with @vue/cli 3 and latest Vuetify.

yarn add vuetify-daterange-picker@3
# OR
npm install --save vuetify-daterange-picker@3

Install as a Plugin

This lets you use the component everywhere in your app.

// main.js
import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
Vue.use(VuetifyDaterangePicker);

Import in Components

<script>
import { VDaterange } from "vuetify-daterange-picker"
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
export default {
  components: { VDaterange },
}
</script>

Usage

<!-- Assuming you have installed as plugin -->
<!-- If you wanna use it in components, 
     please import necessary files as shown above -->
<template>
  <v-daterange v-model="range"></v-daterange>
</template>
<script>
export default {
  components: { VDaterange },
  data() {
    return {
      range: {}
    }
  }
}
</script>