The demo page is coming soon.
<script>
import VueScrollRangeDatepicker from 'vue-scroll-range-datepicker'
import 'vue-scroll-range-datepicker/dist/styles.css'
const datepickerOptions = {
sundayFirst: false,
days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
daysShort: ['Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
monthNames: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
colors: {
selected: '#00a699',
inRange: '#66e2da',
selectedText: '#fff',
text: '#565a5c',
inRangeBorder: '#33dacd',
disabled: '#fff'
},
texts: {
apply: 'apply',
cancel: 'cancel'
};
Vue.use(vueScrollRangeDatepicker, datepickerOptions);
</script>
<template>
<div>
<div class="datepicker-trigger">
<input
type="text"
id="datepicker-trigger"
placeholder="Select dates"
:value="formatDates(dateOne, dateTwo)"
>
<VueScrollRangeDatepicker
:trigger-element-id="'datepicker-trigger'"
:mode="'range'"
:fullscreen-mobile="true"
:date-one="dateOne"
:date-two="dateTwo"
@date-one-selected="val => { dateOne = val }"
@date-two-selected="val => { dateTwo = val }"
/>
</div>
</div>
</template>