Package Exports

@gravitano/vue-date-range-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gravitano/vue-date-range-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Development Setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

License

MIT