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
                }
			},