element-ui时间选择控件的几种事件与用法

element-ui时间选择控件的几种事件与用法

选中日期时(有时间范围才生效)

在选择开始时间之后和选择结束时间之后会触发

<template>
    <el-date-picker
        v-model="timeSection"
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
    ></el-date-picker>
</template>
<script>
export default {
    data() {
        return {
          timeSection:[null,null],
          pickerOptions: {
            onPick() {
              // 这里可以写执行之后的逻辑 用户选择一次时间范围会触发两次
            }
          }
        }
    }
}
</script>

确定时间范围时（用户确认选定的值时触发）

在选择完开始时间和选择结束时间之后会触发

<template>
    <el-date-picker
        v-model="timeSection"
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="change"
    ></el-date-picker>
</template>
<script>
export default {
    data() {
        return {
          timeSection:[null,null],
        }
    },
    methods:{
        change() {
            // 确定时间范围之后触发的函数
        }
    }
}
</script>