日历组件修改

新接到一个需求需要用到日历，从新写一个日历组件我是拒绝的，因为我菜。

需求

基本几点需求：单选，多选，区间选择，预选择，禁止选择

方案

明确几点需求后，第一步是去看各位大佬的轮子，社区有位大佬写的仿携程的日历组件基本能全部满足，剩下的还有正在使用的wux weaapp ui组件库的calendar，还有就是webview引入。

首选 仿携程的日历组件，嗯。。在各种尝试后选择放弃，可能是我使用方法不对，使用失败，后期扩展的话也是有点难度（菜是原罪）。剩下的再去尝试 wux 的calendar，这个组件只有单选多选。说干就干，在calendar基础上改造实现我们的功能，先下载未压缩版的源码，按文档复制粘贴。

查看源码发现未压缩版还是平易近人，我这个菜菜能看懂。

页面修改

修改布局后<br />

添加我们需要的功能

1 添加不可选中

实现不可选中，先看选中，选中状态大佬的处理方式

if (p.year === valueYear && p.month === valueMonth && p.day === valueDay) {
      changedPath[`months[${i}].items[${k}][${j}].type.selected`] = true
   }

那我照葫芦画瓢新增一个不可选中的状态

if (p.year === banYear && p.month === banMonth && p.day === banDay) {
      changedPath[`months[${i}].items[${k}][${j}].type.ban`] = true
  }

在demo观察data的传递，是在页面onLoad()调用组件open，传递value，这里我们新增一个banvalue传过去，在改造一下源码

 this.$$setData({
         in: true,
         ...options
       }).then(() => this.init())
          let arr = options.value.concat(options.banvalue || []);
          	this.setValue(arr)
          let bandate = options.banvalue;
            bandate && wx.setStorageSync('banvalue', bandate)
          if (typeof this.fns.onOpen === 'function') {
               this.fns.onOpen.call(this)
               this.setValue(bandate)
        }

<a name=“FYoRd”></a>

2 区间选择

区间就是选择两天，不允许选第三个。数组大于2就return一下

arrValues > 2 retnrn<br />

<a name=“p6y8U”></a>

3 优化

增加禁用选项后可能要去重，还有这个1970-01-01的这个bug<br />

暂时就这样吧，记个笔记先