I don't understand how to quickstart with your component

[dpetukhov]

Hi.

I'm trying to get quick date range picker for my project and decided to try your vue2-daterange-picker. I have spent some time and still can not figure out how to get it work.

Your documentation page mention all possible options, but I don't need such customization. What do I need at minimum to get it work?

My index.js:

import Vue from 'vue';

import DateRangePicker from 'vue2-daterange-picker';

Vue.component('date-range-picker', DateRangePicker);

let startDate = new Date();
let endDate = new Date();
endDate.setDate(endDate.getDate() + 6);

var app = new Vue({
    el: '#app',
    data: {
        dateRange: {startDate, endDate}
    }
});

My template file:

    <div id="app">
       My vue app
        <date-range-picker>
            <template v-slot:input="picker" style="min-width: 350px;">
                {{ picker.startDate | date }} - {{ picker.endDate | date }}
            </template>
        </date-range-picker>
    </div>

It's not working now.

Can you please add most simple example in docs? Or give me direction how to fix that code above and I can try to add Quickstart section myself.

[iomariani]

You forgot to set the v-model referring the dateRange object, as well as the CSS.

<date-range-picker v-model="pickerDates">
    <template v-slot:input="picker" style="min-width: 350px;">
      {{ dateRange.startDate | date }} - {{ dateRange.endDate | date }}
  </template>
</date-range-picker>

import DateRangePicker from "vue2-daterange-picker";
import "vue2-daterange-picker/dist/vue2-daterange-picker.css";

Here's a simple working example:

https://codesandbox.io/s/vue2-daterange-picker-example-3tq8s

[nkostadinov]

10x @iomariani

[ousmaneNdiaye]

Thx, this small example is definitely a good way to get started, IMHO it should be on the homepage .