vue-scroll-range-datepicker v3.0.7
Vue-Scroll-Range-Datepicker beta
Introduction
This calendar was forked from https://github.com/MikaelEdebro/vue-airbnb-style-datepicker . Thanks Mikael so much for that awesome package. IMPORTANT! At the current time, this datepicker can't be used in production. He is tested, and can not be used in your code. You can use it, on your own risk.
Demo
The demo page is coming soon.
Requirements
- Vue.js
^2.0.0
Installation
npm
$ npm i vue-scroll-range-datepicker
Usage
<script>
// for Vue 2.0
import VueScrollRangeDatepicker from 'vue-scroll-range-datepicker'
import 'vue-scroll-range-datepicker/dist/styles.css'
// see docs for available options
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'
};
// make sure we can use it in our components
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>
API
License
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago