vue el-date-picker中datetime类型对今天之后的日期包含时分禁用

本文主要是介绍vue el-date-picker中datetime类型对今天之后的日期包含时分禁用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue el-date-picker中datetime类型对今天之后的日期包含时分禁用

在这里插入图片描述

目前对选择秒那一列未禁用


<template><div><el-date-pickerv-model="deactivateTime"type="datetime"format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择时间":picker-options="pickerOptions"></el-date-picker></div></template><script>
export default {watch: {deactivateTime:{handler(newValue,oldValue){if(newValue == oldValue) {return;}this.selectableRange = this.timeRange(newValue);},immediate: true}},data () {return {deactivateTime: '',selectableRange: []};},computed: {pickerOptions() {return {disabledDate(time) {return time.getTime() > Date.now()},selectableRange: this.selectableRange,}}},mounted () { },methods: {initDateTime (date) {var dt = new Date(date)var h = dt.getHours() //获取时var m = dt.getMinutes() //获取分var s = dt.getSeconds() //获取秒if (h < 10) {h = '0' + h}if (m < 10) {m = '0' + m}if (s < 10) {s = '0' + s}return  h + ':' + m + ':' + s},timeRange(val) {if(val) {return new Date(val).getTime() < new Date().getTime() ? ['00:00:00 - 23:59:59'] : [`00:00:00 - ${this.initDateTime(new Date())}`]} else {return ['00:00:00 - 23:59:59']}},},
};
</script>

需要注意: el-date-picker的selectable-range属性不支持秒级的选择范围。该属性只能用于限制年、月、日、小时和分钟的选择范围。所以目前对选择秒那一列未禁用

这篇关于vue el-date-picker中datetime类型对今天之后的日期包含时分禁用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/514745

相关文章

Python标准库datetime模块日期和时间数据类型解读

《Python标准库datetime模块日期和时间数据类型解读》文章介绍Python中datetime模块的date、time、datetime类,用于处理日期、时间及日期时间结合体,通过属性获取时间... 目录Datetime常用类日期date类型使用时间 time 类型使用日期和时间的结合体–日期时间(

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器(StreamableHTTP)1 项目说明2 使用说明2.1

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled