vue手机端日期插件

前段时间项目有一个需求，就是手机端需要一个日期筛选的功能，试过各种插件都不太满意。

后来看到vue的一款日期插件，很好用，现在分享给大家。

vue-mobile-calendar

1、npm安装

npm install vue-mobile-calendar

2、main.js引入插件

//日期插件
import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);

3、组件中去使用插件

<button class="btn el-button" @click="selectDate">时间筛选</button>
    <span v-if="begin_time">开始时间:{{begin_time}}结束时间:{{end_time}}</span> 
    <calendar :show.sync="show" mode="during" @change="onChange"/>

4、data中去定义时间变量

data(){
    minDate: new Date(),//设置过期时间为当天
    show: false,
    date: '',
    begin_time:'',
    end_time:''
}

5、输入选择的日期

methods:{
    onChange(date) {
        this.date = JSON.stringify(date.map((item) => item.format('YYYY-MM-DD')));
        var d = JSON.parse(this.date);
        this.begin_time = d[0];
        this.end_time = d[1];
        console.log(this.begin_time);
        console.log(this.end_time);
    }
}

6、效果