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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐