ElementPlus TimeSelect 时间选择

2021-09-08 09:52 更新

TimeSelect 时间选择

用于选择或输入日期

固定时间点

提供几个固定的时间点供用户选择


使用 el-time-select 标签,分别通过start、end和step指定可选的起始时间、结束时间和步长

<template>
  <el-time-select
  v-model="value"
  start="08:30"
  step="00:15"
  end="18:30"
  placeholder="选择时间"
>
</el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
      }
    },
  }
</script>

固定时间范围

若先选择开始时间,则结束时间内备选项的状态会随之改变


<template>
  <el-time-select
    placeholder="起始时间"
    v-model="startTime"
    start="08:30"
    step="00:15"
    end="18:30"
  >
  </el-time-select>
  <el-time-select
    placeholder="结束时间"
    v-model="endTime"
    start="08:30"
    step="00:15"
    end="18:30"
    :minTime="startTime"
  >
  </el-time-select>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: '',
      }
    },
  }
</script>

Attributes

参数说明类型可选值默认值
model-value / v-model绑定值string
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringmedium / small / mini
placeholder非范围选择时的占位内容string
name原生属性string
prefix-icon自定义头部图标的类名stringel-icon-time
clear-icon自定义清空图标的类名stringel-icon-circle-close
start开始时间string09:00
end结束时间string18:00
step间隔时间string00:30
minTime最小时间,小于该时间的时间段将被禁用string00:00
maxTime最大时间,大于该时间的时间段将被禁用string

Events

事件名说明参数
change用户确认选定的值时触发组件绑定值
blur当 input 失去焦点时触发组件实例
focus当 input 获得焦点时触发组件实例

Methods

方法名说明参数
focus使 input 获取焦点
blur使 input 失去焦点


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号