vue-date-range-calendar
v1.0.7
Published
Vue version on jquery date range calendar plugin
Downloads
6
Readme
Date range calendar for Vue.js
Vue support
Supports only Vue >= 2
Installation and usage
$ npm install vue-date-range-calendar
NOTE: vue-date-range-calendar
official package appears to use jquery
as a dependency in package.json,
despite it would be more appropriate to use it as a peer dependency to avoid possibility of using multiple
versions of jquery. Be aware of that. When using webpack
you can solve this problem with aliases.
import VueDateRangeCalendar from 'vue-date-range-calendar';
new Vue({
components: { VueDateRangeCalendar },
data() {
return {
calendarOptions: {
lang: "en",
theme: "default-theme",
themeContext: this,
startDate: moment(),
endDate: moment().add('months', 12),
start : "+7",
startRangeWidth : 3,
minRangeWidth: 1,
maxRangeWidth: 14,
weekends: true,
autoHideMonths: false,
visible: true,
trigger: null
}
};
},
// All slick methods can be used too, example here
methods: {
onChange(data) {
console.log(data);
}
},
});
<vue-date-range-calendar
:options="calendarOptions"
@change="onChange">
</vue-date-range-calendar>
If you need, you can import calendar styles too:
import `node_modules/vue-date-range-calendar/calendar.module.css`;