Element UI 时间选择器禁用过去时间到分钟
版权申诉
5星 · 超过95%的资源 116 浏览量
更新于2024-08-20
收藏 17KB DOCX 举报
"在JavaScript和Element UI框架中,如何实现TimePicker时间选择器禁用部分时间,特别是禁用到分钟的细节"
在项目开发中,经常会有特定的时间选择限制,例如仅允许用户选择当前时间之后的时刻。在Element UI中,我们可以使用TimePicker组件来实现这一功能。本示例主要探讨了两种实现方式:使用DateTimePicker组件或组合使用DatePicker和TimePicker。本文将详细介绍使用DatePicker和TimePicker结合的方式。
1. DateTimePicker 日期时间选择器:
DateTimePicker 是Element UI提供的一种复合组件,它可以同时选择日期和时间。但是,若需禁用特定时间,可能需要更复杂的配置。
2. DatePicker 和 TimePicker 组合使用:
这种方法更为灵活,我们可以分别设置日期和时间的选择限制。在示例代码中,我们使用了两个组件:一个用于日期选择,另一个用于时间选择。
关键在于`picker-options`属性,它允许我们定制时间选择器的行为。在DatePicker组件中,通过`picker-options`设置`disabledDate`属性,禁用比当前时间早的日期。在TimePicker组件中,通过`picker-options`的`selectableRange`属性来设定可选的时间范围。
以下代码展示了如何实现这一功能:
```html
<el-date-picker
v-model="formInline.inventoryDate"
type="date"
align="right"
placeholder="请选择日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
@change="changeDate"
></el-date-picker>
<el-time-picker
v-model="formInline.inventoryDateTime"
type="date"
align="right"
placeholder="请选择时间"
:picker-options="{
selectableRange: this.startTimeRange
}"
@change="changeTime"
value-format="HH:mm:ss"
format="HH:mm:ss"
></el-time-picker>
```
在Vue组件的数据对象中,定义`pickerOptions`和`startTimeRange`:
```javascript
data() {
return {
pickerOptions: {
disabledDate: time => time.getTime() < Date.now() - 3600 * 1000 * 24 // 禁用24小时之前的时间
},
startTimeRange: ''
};
},
```
并创建一个`watcher`来监听`formInline.inventoryDate`的变化,当日期改变时,更新`startTimeRange`,使其始终为当前时间之后的一分钟:
```javascript
watch: {
'formInline.inventoryDate': {
deep: true,
handler(newValue, oldValue) {
if (newValue) {
let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime() + 60 * 1000); // 一分钟之后的时间
let dt = nowDate.split('');
let st = '';
if (newValue.split('')[0] === dt[0]) { // 如果年份相同
// ... 更新小时、分钟和秒,形成新的可选时间范围
}
}
}
}
},
```
这段代码中,`sendTimeDate`是一个自定义过滤器,用于格式化时间,具体实现可以根据项目需求进行编写。在`watcher`中,我们检查新选择的日期是否与当前日期相同,如果相同,我们需要更新`startTimeRange`,使其始终为新的一分钟之后的时间。
通过这种方式,我们可以精确地控制用户在TimePicker组件中可以选择的时间,确保他们只能选择当前时间之后的时刻,并且禁用到了分钟级别。这为项目需求提供了灵活且细致的时间选择控制。
2017-09-11 上传
2019-10-28 上传
2024-07-26 上传
2013-08-01 上传
2021-12-28 上传
2019-04-05 上传
2024-09-06 上传
2021-02-04 上传
mmoo_python
- 粉丝: 2590
- 资源: 1万+
最新资源
- C++ Qt影院票务系统源码发布,代码稳定,高分毕业设计首选
- 纯CSS3实现逼真火焰手提灯动画效果
- Java编程基础课后练习答案解析
- typescript-atomizer: Atom 插件实现 TypeScript 语言与工具支持
- 51单片机项目源码分享:课程设计与毕设实践
- Qt画图程序实战:多文档与单文档示例解析
- 全屏H5圆圈缩放矩阵动画背景特效实现
- C#实现的手机触摸板服务端应用
- 数据结构与算法学习资源压缩包介绍
- stream-notifier: 简化Node.js流错误与成功通知方案
- 网页表格选择导出Excel的jQuery实例教程
- Prj19购物车系统项目压缩包解析
- 数据结构与算法学习实践指南
- Qt5实现A*寻路算法:结合C++和GUI
- terser-brunch:现代JavaScript文件压缩工具
- 掌握Power BI导出明细数据的操作指南