阅读 221

VUE酒店日期选择,时间段选择插件vue-mobile-calendar使用

npm装包

npm install vue-mobile-calendar
复制代码

main.js中引入

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>
复制代码

参考网站:www.npmjs.com/package/vue…

关注下面的标签,发现更多相似文章
评论