codecamp

ElementPlus TimeSelect 时间选择

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 失去焦点


ElementPlus TimePicker 时间选择器
ElementPlus DatePicker 日期选择器
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ElementPlus 配置

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }