Vuetify 3 Date Range Picker Format Library


Vuetify Daterange Picker is missing the VueJS date range picker you were looking for.

vuetify date range picker example, vuetify 3 datepicker, v date picker on change


  • Preset Selection
  • Automatically highlight preset based on the chosen date.
  • Custom format
  • Material Design (Obviously!)
  • Light & Dark Themes
  • Custom Prev & Next buttons

How to make use of it:


yarn add [email protected]
# OR
npm install --save [email protected]

1. 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";

2. Import in Components

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

3. Usage

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

vuetify date range picker plugin/github/gitbook

See Demo And Download

Official Website(praveenpuglia): Click Here

This superior jQuery/javascript plugin is developed by praveenpuglia. For extra advanced usage, please go to the official website.