vant2 van-calendar组件增加清除按钮和确定按钮

1. 利用自定义插槽增加一个清除按钮
   

  <van-calendar ref="fTime1" @select="selectTimePicker" @confirm="changeTimePicker" :default-date="null" :show-confirm="false" v-model="timePickerShow" type="range" :min-date="minDate" color="#57c315 "
            title="请选择时间">
            <template slot="footer">
                <div class="btns">
                    <van-button @click="clearTimePicker" class="cancel-btn filter-time_btn">清除</van-button>
                    <van-button @click="confirmTimePicker" :disabled="isCanConfirm" type="primary" class="order-btn-order filter-time_btn">确认</van-button>
                </div>
            </template>
        </van-calendar>

定义清除事件

    clearTimePicker () {
   		  //初始化日期置空
            this.$refs[fTime].defaultDate = null;
            //重置组件
            this.$refs[fTime].reset();
	         //日期赋值初始化
	         //其他事件
        }

2. 自定义按钮是没有传值。清除事件是比较简单的，但是会影响原本组件的确认按钮，自定义按钮是没有传值的。

设置组件:show-confirm=“false”，如下图，如果是false，则当你选择完两个日期就会触发confirm事件

定义@confirm的触发事件，将选好的date保存起来，等点击确认按钮的时候，再将值传入，进行处理并关闭弹窗

        changeTimePicker (date) {
            this.tempTimePicker = date;
        },

3. 不会根据是否选择了两个日期来改变（ type=“range”），改变确认按钮状态（没有完成选择之前disabled的效果与原组件效果一样。如果不做，则确认点击的时候需要做校验），原组件需要选择了开始日期和结束日期才会触发confirm事件，只选择一个，或从两个变成一个等事件，并不会触发。这时候需要使用select事件，并定义一个变量isCanConfirm，来控制按钮的状态。
   代码如下

        selectTimePicker (date, ) {
            if (date && date[1]) {
                this.isCanConfirm = false;
            } else {
                this.isCanConfirm = true;
            }
        }

注意：date是一个数组，有两个对象，只选择一个日期的时候，返回[{日期},null]，故不能根据数组的长度来进行判断。