014_TimePicker时间选择器

1. TimePicker时间选择器

1.1. 用于选择或输入日期。

1.2. 时间选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(TimePicker) / string(TimeSelect)	无	无
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
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

1.3. Time Select Options

参数	说明	类型	可选值	默认值
start	开始时间	string	无	09:00
end	结束时间	string	无	18:00
step	间隔时间	string	无	00:30
minTime	最小时间, 小于该时间的时间段将被禁用	string	无	00:00
maxTime	最大时间, 大于该时间的时间段将被禁用	string	无	无

1.4. 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	'HH:mm:ss'

1.5. 时间选择器事件

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

1.6. 时间选择器方法

方法名	说明
focus	使input获取焦点

2. 时间选择器例子

2.1. 使用脚手架新建一个名为element-ui-timepicker的前端项目, 同时安装Element插件。

2.2. 编写App.vue

<template><div id="app"><h1>固定时间点-提供几个固定的时间点供用户选择</h1><h4>使用el-time-select标签, 分别通过start、end和step指定可选的起始时间、结束时间和步长。</h4><el-time-select v-model="val1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"></el-time-select><h1>任意时间点</h1><h4>使用el-time-picker标签, 通过selectableRange限制可选时间范围。提供了两种交互方式: 默认情况下通过鼠标滚轮进行选择, 打开arrow-control属性则通过界面上的箭头进行选择。</h4><el-time-picker v-model="val21" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker><div style="display: inline-block; margin-left: 20px;"></div><el-time-picker arrow-control v-model="val22" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker><h1>固定时间范围</h1><h4>若先选择开始时间, 则结束时间内备选项的状态会随之改变。</h4><el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"></el-time-select><div style="display: inline-block; margin-left: 20px;"></div><el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"></el-time-select><h1>任意时间范围-可选择任意的时间范围</h1><h4>添加is-range属性即可选择时间范围, 同样支持arrow-control属性。</h4><el-time-picker is-range v-model="val41" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker><div style="display: inline-block; margin-left: 20px;"></div><el-time-picker is-range arrow-control v-model="val42" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker></div>
</template><script>
export default {data () {return {val1: '',val21: new Date(2016, 9, 10, 18, 40),val22: new Date(2016, 9, 10, 18, 40),startTime: '',endTime: '',val41: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],val42: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]}}
}
</script>

2.3. 运行项目

014_TimePicker时间选择器相关推荐

iView -- TimePicker 自定义修改时间选择器选择时间面板样式
iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...
UIDatePicker | 时间选择器
一:UIDatePicker的介绍 UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入. 日期选取器的 ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
JavaScript 数字转汉字+element时间选择器快速选择
window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零' } window.LEVEL = ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
Android --- 进入页面时，不弹出软键盘。当 EditText 被点击时不弹出软键盘，而是调用其他选择器，比如时间选择器等
功能需求: 1.进入页面时,不弹出软键盘 2.当 EditText 被点击时不弹出软键盘,而是调用其他选择器,比如时间选择器等搜索百度测试: 1.百度上说用 editText.setInputTyp ...
android 开发时间选择器TimePicker的使用
android 开发时间选择器TimePicker的使用 android系统自带时间控件: DatePicker 日期显示控件 DatePickerDialog 日期对话框控件 TimePicke ...
移动端material风格日期时间选择器
好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等);所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动图看看 ...
Android中TimePicker时间选择器的使用和获取选择的时和分
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...

014_TimePicker时间选择器

014_TimePicker时间选择器相关推荐

最新文章

热门文章