@gravitano/vue-date-range-picker NPM

Vue.js Date Range Picker

@gravitano/vue-date-range-picker is a Vue.js wrapper for daterangepicker plugin.

Installation

To install the package, use one of those commands:

npm i @gravitano/vue-date-range-picker
# OR
yarn add @gravitano/vue-date-range-picker

Usage

Global Usage

Basically, just register the DateRangePicker component as vue plugin via Vue.use method.

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import the plugin
import DateRangePicker from "@gravitano/vue-date-range-picker";

Vue.config.productionTip = false;

// use the plugin
Vue.use(DateRangePicker);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Once the plugin installed, you can use it like so:

<template>
  <div>
    <date-range-picker v-model="range" />
  </div>
</template>

<script>
export default {
  data: () => ({
    range: ["01/09/2018", "01/10/2018"]
  })
};
</script>

Per-component Usage

If you want to use the DateRangePicker component only on certain components, you can do it like this:

<template>
  <div>
    <date-range-picker v-model="range" />
  </div>
</template>

<script>
// import the package
import DateRangePicker from "@gravitano/vue-date-range-picker";

export default {
  components: {
    DateRangePicker
  },
  data: () => ({
    range: ["01/09/2018", "01/10/2018"]
  })
};
</script>

Options

<template>
  <div>
    <h3>DateRangePicker with options</h3>
    <date-range-picker v-model="range" :options="options" />
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data: () => ({
    range: ["01/09/2018", "01/10/2018"],
    options: {
      timePicker: true,
      startDate: moment().startOf('hour'),
      endDate: moment().startOf('hour').add(32, 'hour'),
      locale: {
        format: 'M/DD hh:mm A'
      }
    }
  })
};
</script>

Single Date Picker

<template>
  <div>
    <h3>Single Date Picker Example</h3>
    <date-range-picker v-model="myDate" :options="options" />
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data: () => ({
    myDate: "01/10/2018",
    options: {
      singleDatePicker: true,
      // showDropdowns: true,
      minYear: 2001,
      maxYear: +moment().format("YYYY")
    }
  })
};
</script>

Props

Name	Type	Default	Description
v-model	Array	`[]`	Set v-model to the the content or data property you wish to bind it to
format	String	`DD/MM/YYYY`	Date format
className	String	-	Additional class name for the input
options	Object	`{}`	The daterangepicker's options. Learn more here.