vue移动端的日期插件带农历

最近项目中需要用到一个日期选择器,百度了一下,貌似带农历的移动端的日期插件比较少,最后在github上找了个算是比较合适的改了改差不多。
以下是效果图:
vue移动端的日期插件带农历_第1张图片
vue移动端的日期插件带农历_第2张图片
以下是代码的实现:
第一步:安装依赖 npm i mpvue-calendar 。成功后在node_modules里面会找到如下文件

vue移动端的日期插件带农历_第3张图片
注意browser-style.css是浏览器端的样式,style.css是小程序端的,注意区分。
第二步:新建一个vue组件,引入插件,注释部分可以自行删除,代码如下:






具体的样式的修改可以自己在browser-style.css文件中按需求自己更改,
参数和方法git上也有详细的介绍
vue移动端的日期插件带农历_第4张图片
这里发在使用的时候发现一个bug,已经在git上提了issue,但作者好像还没改。
传入monthRange参数后 在单选模式下,会出现在每个月份的第一行点击任意日期都可以被选中,如下图所示:
vue移动端的日期插件带农历_第5张图片
这里提供一个临时的解决方法,在上面的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

你可能感兴趣的:(vue)