TimePicker 时间选择器
用于选择或输入日期
固定时间点
提供几个固定的时间点供用户选择
使用 el-time-select 标签,分别通过star
、end
和step
指定可选的起始时间、结束时间和步长
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间">
</el-time-select> <script>
export default {
data() {
return {
value1: ''
};
}
}
</script>
任意时间点
可以选择任意时间
使用 el-time-picker 标签,通过selectableRange
限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control
属性则通过界面上的箭头进行选择。
<template>
<el-time-picker
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value3"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
</template> <script>
export default {
data() {
return {
value2: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
固定时间范围
若先选择开始时间,则结束时间内备选项的状态会随之改变
<template>
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template> <script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
任意时间范围
可选择任意的时间范围
添加is-range
属性即可选择时间范围,同样支持arrow-control
属性。
<template>
<el-time-picker
is-range
v-model="value4"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value5"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</template> <script>
export default {
data() {
return {
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
readonly | 完全只读 | boolean | — | false |
disabled | 禁用 | boolean | — | false |
editable | 文本框可输入 | boolean | — | true |
clearable | 是否显示清除按钮 | boolean | — | true |
size | 输入框尺寸 | string | medium / small / mini | — |
placeholder | 非范围选择时的占位内容 | string | — | — |
start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
is-range | 是否为时间范围选择,仅对<el-time-picker> 有效 |
boolean | — | false |
arrow-control | 是否使用箭头进行时间选择,仅对<el-time-picker> 有效 |
boolean | — | false |
value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
align | 对齐方式 | string | left / center / right | left |
popper-class | TimePicker 下拉框的类名 | string | — | — |
picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
range-separator | 选择范围时的分隔符 | string | - | '-' |
value-format | 可选,仅TimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
default-value | 可选,选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被new Date() 解析(TimePicker) / 可选值(TimeSelect) |
— |
name | 原生属性 | string | — | — |
prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
¶Time Select Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
start | 开始时间 | string | — | 09:00 |
end | 结束时间 | string | — | 18:00 |
step | 间隔时间 | string | — | 00:30 |
minTime | 最小时间,小于该时间的时间段将被禁用 | string | — | 00:00 |
maxTime | 最大时间,大于该时间的时间段将被禁用 | string | — | — |
¶Time Picker Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
selectableRange | 可选时间段,例如'18:30:00 - 20:30:00' 或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] |
string / array | — | — |
format | 时间格式化(TimePicker) | string | 小时:HH ,分:mm ,秒:ss ,AM/PM A |
'HH:mm:ss' |
¶Events
事件名 | 说明 | 参数 |
---|---|---|
change | 用户确认选定的值时触发 | 组件绑定值 |
blur | 当 input 失去焦点时触发 | 组件实例 |
focus | 当 input 获得焦点时触发 | 组件实例 |
¶Methods
方法名 | 说明 | 参数 |
---|---|---|
focus | 使 input 获取焦点 | - |
TimePicker 时间选择器的更多相关文章
- Android中TimePicker时间选择器的使用和获取选择的时和分
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
- Android课程---日历选择器和时间选择器
package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...
- Android——图片视图(ImageView)、状态开关按钮(ToggleButton)、时钟、图片透明度、滚动和时间选择器
activity_ui1.xml dth="wrap_content" android:layout_height="wrap_content" android ...
- Android 开发笔记___时间选择器---timePicker
像datepicker一样,也有timepicker. 同样有timepickerdialog 所用到的方法还是一样,监听时间选择器的变化. package com.example.alimjan.h ...
- 时间选择器(timepicker)
可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置 效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...
- android 开发 时间选择器TimePicker的使用
android系统自带时间控件:DatePicker 日期显示控件 DatePickerDialog 日期对话框控件TimePicker 时间显示控件 TimePickerDialog 时间对话框控件 ...
- 时间选择器(TimePicker)
时间选择器(TimePicker) 显示一个可供时间选择的界面 常用方法: setIs24HourView(true|false) 设置24小时格式,true为24小时格式 setCurrentHou ...
- Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker
原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...
- Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
随机推荐
- Codeforces 837D - Round Subset DP
先算出每个数的pop1(twonum),pop(fivenum)然后DP ans[i][j]表示选i个数有j个2时最多有多少个5 转移方程是 ;j--) { ;w++) { ans[j][w]=max ...
- arm开发板make编译时遇到 make[2]:*** [s-attrtab] 已杀死 问题的解决方案
未验证 出现“make[2]: *** [s-attrtab] 已杀死”log 是由于内存不足 解决方案 增加swapfile 步骤如下: 1. 查看当前swapfile状态 root@ubuntu: ...
- 关于nmap扫描端口
nmap查看一个服务器的端口,是通过扫描来实现的.所以在本机执行nmap扫描的端口有可能被防火墙阻止,在外部是访问不了的. 如:开启ORACLE监听后,在本机使用nmap 127.0.0.1是可以扫描 ...
- jumpserver部署0.3版本 =====( ̄▽ ̄*)b
jumpserver概述 跳板机概述: 跳板机就是一台服务器,开发或运维人员在维护过程中首先要统一登录到这台服务器,然后再登录到目标设备进行维护和操作: 跳板机缺点:没有实现对运维人员操作行为的控制和 ...
- CodeForces - 1175E Minimal Segment Cover (倍增优化dp)
题意:给你n条线段[l,r]以及m组询问,每组询问给出一组[l,r],问至少需要取多少个线段可以覆盖[l,r]区间中所有的点. 如果贪心地做的话,可以求出“从每个左端点l出发选一条线段可以到达的最右端 ...
- K8S集群组件
master节点主要由apiserver.controller-manager和scheduler三个组件,以及一个用于集群状态存储的etcd存储服务组成,而每个node节点则主要包含kubelet. ...
- nginx第三天
nginx架构分析 nginx模块化 nginx基于模块设计,每个模块是一个功能实现,分布式开发,团队协作 核心模块,标准http模块,可选http模块,邮件模块,第三方模块 编译后的源码目录 ob ...
- 创建Windows任务计划定时调用网页执行任务(通过Windows PowerShell的Invoke-WebRequest实现)
前言:项目中使用RoadFlow工作流,设置超时自动提交功能,自动提交功能已有现成的网页可实现(http://127.0.0.1/WorkFlowRun/AutoSubmit),现需创建Windows ...
- selenium Error
点击下载对应版本的 chromedriver.exe Message: 'geckodriver' executable needs to be in PATH. 原因是没有配置chromedrive ...
- java和c中i++(i--)的区别(网易笔试2014)
java代码: public class Test{ public static void main(String[] args){ int a=5; int b=(a++)*(a++);//5*6自 ...