Vuetify 3 Date Range Picker Format Library

vuetify-date-range-picker

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

Features:

  • 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:

Installation:

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";
Vue.use(VuetifyDaterangePicker);

2. Import in Components

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

3. 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>

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.

Share