最近项目中需要用到一个日期选择器，百度了一下，貌似带农历的移动端的日期插件比较少，最后在github上找了个算是比较合适的改了改差不多。
以下是效果图：


以下是代码的实现：
第一步：安装依赖 npm i mpvue-calendar 。成功后在node_modules里面会找到如下文件

注意browser-style.css是浏览器端的样式，style.css是小程序端的，注意区分。
第二步：新建一个vue组件，引入插件，注释部分可以自行删除，代码如下：

<template>
    <div class="datePicker">
        <Calendar
                :months="months"
                :value="value"
                :begin="begin"
                :end="end"
                :now="false"
                :responsive="false"
                lunar
                clean
                :monthRange="monthRange"
                @select="selected"
                :multi="false"
                ref="calendar"
        />
    </div>
</template>

<script>
    import Calendar from 'mpvue-calendar'
    import 'mpvue-calendar/src/browser-style.css'
    import util from '../../util/util'
    export default {
        data () {
            return {
                months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                // disabledArray: ['2018-6-27','2018-6-25'],
                value:util.formatDate(Date.parse(new Date())) ,
                begin:util.formatDate(Date.parse(new Date())),
                end:util.formatDate(Date.parse(new Date())+90*24*60*60*1000),//假设未来20天可以选择日期
                monthRange:['2019-6', '2019-8']
                // events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},自定义备注
                // almanacs: {'9-3': '抗战胜利日', '11-17': '学生日'},//自定义节日
                // tileContent: [
                //     {date: '2018-9-22', className: 'holiday ', content: '休'},
                //     {date: '2018-9-23', className: 'holiday ', content: '休'}
                // ],//为每个具体日期自定义class和插入文本内容，具体用法见下
            }
        },
        components: {
            Calendar,
        },
        methods: {
            // prev(year, month, weekIndex) {
            //     console.log(year, month, weekIndex)
            // },
            // next(year, month, weekIndex) {
            //     console.log(year, month, weekIndex)
            // },
            // selectYear(year) {
            //     console.log(year)
            // },
            // selectMonth(month, year) {
            //     console.log(year, month)
            // },
            // setToday() {
            //     this.$refs.calendar.setToday()
            // },
            // dateInfo() {
            //     const info = this.$refs.calendar.dateInfo(2018, 8, 23)
            //     console.log(info);
            // },
            // renderer() {
            //     this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
            // },
            selected(val, val2) {
                console.log(val)
                console.log(val2)     
            }
        }
    }
</script>
<style scoped>
    .datePicker{background-color:#f7f8fd;padding-top: 85px;height: 100%}
</style>

具体的样式的修改可以自己在browser-style.css文件中按需求自己更改，
参数和方法git上也有详细的介绍

这里发在使用的时候发现一个bug，已经在git上提了issue，但作者好像还没改。
传入monthRange参数后 在单选模式下，会出现在每个月份的第一行点击任意日期都可以被选中，如下图所示：

这里提供一个临时的解决方法，在上面的selected加上一段代码：

selected(val, val2) {
                console.log(val)
                console.log(val2)
                // console.log(this.$refs.calendar.monthRangeDays)
                let monthArray = this.$refs.calendar.monthRangeDays
                monthArray.forEach(jj=>{
                    jj.forEach(vv=>{
                        vv.forEach(ii=>{
                            if(val2.date == ii.date){
                                ii.selected = true
                            }else {
                                ii.selected = false
                            }
                        })
                    })
                })
            }

通过Calendar 对象实例来改变选中的效果，就是这些啦，希望对大家有帮助！
引用的插件github地址：https://github.com/Hzy0913/mpvue-calendar