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

  1. 利用自定义插槽增加一个清除按钮
    vant2 van-calendar组件增加清除按钮和确定按钮_第1张图片
  
            
        

定义清除事件

    clearTimePicker () {
   		  //初始化日期置空
            this.$refs[fTime].defaultDate = null;
            //重置组件
            this.$refs[fTime].reset();
	         //日期赋值初始化
	         //其他事件
        }
  1. 自定义按钮是没有传值。清除事件是比较简单的,但是会影响原本组件的确认按钮,自定义按钮是没有传值的。

设置组件:show-confirm=“false”,如下图,如果是false,则当你选择完两个日期就会触发confirm事件
在这里插入图片描述
在这里插入图片描述定义@confirm的触发事件,将选好的date保存起来,等点击确认按钮的时候,再将值传入,进行处理并关闭弹窗

        changeTimePicker (date) {
            this.tempTimePicker = date;
        },
  1. 不会根据是否选择了两个日期来改变( type=“range”),改变确认按钮状态(没有完成选择之前disabled的效果与原组件效果一样。如果不做,则确认点击的时候需要做校验),原组件需要选择了开始日期和结束日期才会触发confirm事件,只选择一个,或从两个变成一个等事件,并不会触发。这时候需要使用select事件,并定义一个变量isCanConfirm,来控制按钮的状态。
    vant2 van-calendar组件增加清除按钮和确定按钮_第2张图片代码如下
        selectTimePicker (date, ) {
            if (date && date[1]) {
                this.isCanConfirm = false;
            } else {
                this.isCanConfirm = true;
            }
        }

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

你可能感兴趣的:(框架和插件,vant2,van-calendar)