VUE酒店日期选择,时间段选择插件vue-mobile-calendar使用
npm install vue-mobile-calendarimport Calendar from 'vue-mobile-calendar'Vue.use(Calendar)<template><div><button class="btn" @click="selectDate">时间段选择模式</button>...
·
npm install vue-mobile-calendar
import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar)
<template>
<div>
<button class="btn" @click="selectDate">时间段选择模式</button>
<p>已选日期:{{this.date}}</p>
<calendar
:minDate="minDate"
:show.sync="show"
:defaultDate="defaultDate"
mode="during"
@change="onChange"/>
</div>
</template>
<script>
export default{
data(){
return{
minDate: new Date(),//设置过期时间为当天
show: false,
date: '',
defaultDate: ["2019-07-02","2019-07-05"],
}
},
methods: {
selectDate() {
this.show = true;
this.date = '';
},
onChange(date) {
this.date = JSON.stringify(date.map((item) => item.format('YYYY-MM-DD')));
},
},
}
</script>
更多推荐
已为社区贡献27条内容
所有评论(0)