Neverending Perpetual Motion

    @gravitano/vue-date-range-picker

    0.1.9 • Public • Published

    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

    Install

    npm i @gravitano/vue-date-range-picker

    DownloadsWeekly Downloads

    273

    Version

    0.1.9

    License

    none

    Unpacked Size

    2.23 MB

    Total Files

    20

    Last publish

    Collaborators

    • gravitano