vue 监听两个时间插件都变化后执行

1.

                           <DatePicker  id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"
                                    placeholder="选择日期"></DatePicker>
                            <!-- <input class="timeInput" type="text" id="startTime"> -->
                            <span>—</span>
                            <DatePicker v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"
                                    placeholder="选择日期" id="endTime"></DatePicker>

methods: {
            getTaxDate: function (date) {
                this.startTime = date
            },
            getTaxEndDate: function (date) {
                this.endTime = date
            }
}

 data () {
            return {
                id: 'echartsBarType',
                id2: 'echartsPieType',
                option: {},
                option2: {},
                startTime: '',
                endTime: ''
            }
        },

 

watch:{
　　　　startTime() {
                if (this.startTime) {
                   console.log('开始时间',this.startTime)
                } else {
                    this.actTaxDate = '';
                }
            }
}

二：

同时监听两个输入框，如果两个都有值才执行一些方法

用computed

        computed: {
            timeChange() {
                const { startTime, endTime } = this
                return {
                    startTime,
                    endTime
                }
            }
        },

        watch: {
            timeChange: {
                handler: function(val) {
                    console.log('address change: ', val)
                },
                deep: true
            }
        },

 判断两个时间都有

watch: {
            timeChange: {
                handler: function(val) {
                    if(val.startTime!=''&&val.endTime!=''){
                        if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                            console.log('address change1: ',val)
                        }
                    }
                },
                deep: true
            }
        },

 加判断，结束时间必须大于开始时间（数据双向绑定）

getTaxDate: function (date) {
                if(date>this.endTime&&this.endTime!=''){
                    this.startTime = ''
                    alert('开始时间不能大于结束时间');
                }else{
                    this.startTime = date
                }
            },
            getTaxEndDate: function (date) {
                if(date<this.startTime){
                    alert('结束时间必须大于开始时间');
                    this.endTime = ''
                }else{
                    this.endTime = date
                }
            },

 

 

<DatePicker  v-model="startTime" id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"
                                    placeholder="选择日期"></DatePicker>
                            <span>—</span>
                            <DatePicker v-model="endTime"  v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"
                                    placeholder="选择日期" id="endTime"></DatePicker>

 

 

 完整代码：

 

export default {
        name: 'incomeTotal',
        data () {
            return {
                id: 'echartsBarType',
                id2: 'echartsPieType',
                option: {},
                option2: {},
                startTime: '',
                endTime: ''
            }
        },
        components: {
            IncomeHeader,
            Echarts
        },
        mounted () {
            this.getAjax()
        },
        computed: {
            timeChange() {
                const { startTime, endTime } = this
                return {
                    startTime,
                    endTime
                }
            }
        },
        watch: {
            timeChange: {
                handler: function(val) {
                    if(val.startTime!=''&&val.endTime!=''){
                        if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                            console.log('address change1: ',val)
                        }
                    }
                },
                deep: true
            }
        },
        methods: {
            getTaxDate: function (date) {
                if(date>this.endTime&&this.endTime!=''){
                    this.startTime = ''
                    alert('开始时间不能大于结束时间');
                }else{
                    this.startTime = date
                }
			},
            getTaxEndDate: function (date) {
                if(date<this.startTime){
                    alert('结束时间必须大于开始时间');
                    this.endTime = ''
                }else{
                    this.endTime = date
                }
			},

　　

转载于:https://www.cnblogs.com/SunShineM/p/9046616.html