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

柔光的暖阳◎ 2022-03-17 04:14 763阅读 0赞

## 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，763人围观）

还没有评论，来说两句吧...

相关阅读

相关 Intent的几种用法

下面列出几种Intent的用法显示网页: 1. Uri uri = Uri.parse("http://www.google.com"); 2. In

逃离我推掉我的手/ 2023年10月17日 15:43/ 0 赞/ 39 阅读

相关 layui表单选择时间_layui时间控件选择时间范围

解决layui时间控件清空之后无法正常使用的问题，以及时间范围的选择共有两种解决方式：方式一(layui 1.x)： html代码： placeholder="开始

Love The Way You Lie/ 2023年01月08日 08:11/ 0 赞/ 295 阅读

相关 elementui 时间件选择器 zuijinwunian

pickerOptions: \{ disabledDate (time) \{ var startDate = new D

深碍√TFBOYSˉ_/ 2022年12月17日 11:53/ 0 赞/ 281 阅读

相关 using的几种用法

[using的几种用法][using] 1.using指令。using + 命名空间名字，这样可以在程序中直接用命令空间中的类型，而不必指定类型的详细命名空间，类似于Ja

落日映苍穹つ/ 2022年08月27日 08:56/ 0 赞/ 228 阅读

相关 java Swing 时间选择器控件

效果图: ![这里写图片描述][SouthEast]![这里写图片描述][SouthEast 1]![这里写图片描述][SouthEast 2] 简要说明: 一个视图

╰半橙微兮°/ 2022年06月13日 06:48/ 0 赞/ 1223 阅读

相关常用时间控件

1、My97日期控件：http://www.my97.net/index.asp 2、兼容IE8的简单jQuery日期选择器插件：http://www.htmleaf.com

深藏阁楼爱情的钟/ 2022年06月05日 04:25/ 0 赞/ 355 阅读

相关几款实用的前端日历时间日期选择控件

1.Bootstrap的datetimepicker ![70][] 具体用法：[https://blog.csdn.net/lianzhang861/article/de

心已赠人/ 2022年05月23日 10:27/ 0 赞/ 2851 阅读

相关 Intent的几种用法

显示网页: Uri uri = Uri.parse(“http://www.google.com”); Intent it = new Intent(Intent.AC

冷不防/ 2022年05月16日 12:25/ 0 赞/ 236 阅读

相关分享一个特别好用的时间选择控件

分享一个特别好用的时间选择控件，可以任意插入到自己想要的页面中 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

你的名字/ 2022年04月25日 09:40/ 0 赞/ 234 阅读

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

element-ui时间选择控件的几种事件与用法选中日期时(有时间范围才生效) > 在选择开始时间之后和选择结束时间之后会触发 <template>

柔光的暖阳◎/ 2022年03月17日 04:14/ 0 赞/ 764 阅读