vant2 van-calendar组件增加清除按钮和确定按钮
- 利用自定义插槽增加一个清除按钮
<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();//日期赋值初始化//其他事件}
- 自定义按钮是没有传值。清除事件是比较简单的，但是会影响原本组件的确认按钮，自定义按钮是没有传值的。
设置组件:show-confirm=“false”，如下图，如果是false，则当你选择完两个日期就会触发confirm事件
定义@confirm的触发事件，将选好的date保存起来，等点击确认按钮的时候，再将值传入，进行处理并关闭弹窗
changeTimePicker (date) {this.tempTimePicker = date;},
- 不会根据是否选择了两个日期来改变（ type=“range”），改变确认按钮状态（没有完成选择之前disabled的效果与原组件效果一样。如果不做，则确认点击的时候需要做校验），原组件需要选择了开始日期和结束日期才会触发confirm事件，只选择一个，或从两个变成一个等事件，并不会触发。这时候需要使用select事件，并定义一个变量isCanConfirm，来控制按钮的状态。
代码如下
selectTimePicker (date, ) {if (date && date[1]) {this.isCanConfirm = false;} else {this.isCanConfirm = true;}}
注意：date是一个数组，有两个对象，只选择一个日期的时候，返回[{日期},null]，故不能根据数组的长度来进行判断。