el-date-picker默认结束为当前时分秒

news/2024/7/10 0:13:23 标签: elementui, javascript, vue

在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒,查了很多资料写的都不准确

需求:实现日期时间组件可选择当前日期,比如当前是2024年01月17号下午17:21 那选中时必须结束时间为17:21 也可选01月17号当天其他的时间(很多文章超过17:21都不能选了,搞得我头疼

在这里插入图片描述
效果如下:
在这里插入图片描述
不多说,上代码:

 :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"

设置当前默认结束时间new Date().toLocaleTimeString(‘chinese’, { hour12: false })

布局

这里主要代码是

 <el-form-item prop="carDate">
	<el-date-picker
	   v-model="ruleForm.carDate"
	   :picker-options="pickerOptions"
	   type="datetimerange"
	   value-format="yyyy-MM-dd HH:mm:ss"
	   :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"
	   range-separator="至"
	   start-placeholder="开始时间"
	   end-placeholder="结束时间"
	 >
	 </el-date-picker>
	</el-form-item>

校验

   pickerOptions: {
        disabledDate: time => {     
          return time.getTime() > Date.now()
        }
      },

难点:默认选中当前时分秒


http://www.niftyadmin.cn/n/5332811.html

相关文章

Django全文搜索

Django ORM允许你执行简单的匹配操作&#xff0c;例如contains过滤器&#xff08;或者不区分大小写的icontains&#xff09;。 比如查询正文中包含django的文章 from blog.models import Post Post.objects.filter(body__containsframework) 但是如果希望执行复杂的搜索查询&…

【Flutter】dart构造函数、工厂构造函数

在OOP中&#xff0c;我们会使用类来定义一类对象的属性&#xff0c;和行为。通过调用该类的构造函数来创建类的实例对象。在通过调用方法来实现操作行为。 1、构造函数 和大多数OOP语言一样&#xff0c;dart的构造函数&#xff0c;采用和类同名的函数名作为构造函数&#xff0…

找不到vcomp140.dll无法继续执行怎么办,多种解决方法分享

当计算机系统提示“缺失vcomp140.dll”文件时&#xff0c;用户可能会面临一系列问题和困扰。vcomp140.dll是Visual Studio运行库中一个至关重要的动态链接库文件&#xff0c;对于许多基于Microsoft Visual C编译的应用程序来说&#xff0c;它是不可或缺的组件之一。一旦这个文件…

鸿蒙HarmonyOS实战-ArkTS语言(基本语法)

&#x1f680;一、ArkTS语言基本语法 &#x1f50e;1.简介 HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言&#xff0c;它专为HarmonyOS系统开发而设计。ArkTS语言结合了JavaScript的灵活性和TypeScript的严谨性&#xff0c;使得开发者能够快速、高效地开发出高质量的Har…

一个月学会Python,零基础入门数据分析

在数据分析领域&#xff0c;python是一个绕不开的知识和工具&#xff0c;如果不会用python就很难说自己会数据分析&#xff0c;但是最近很多想要入门数据分析的小白经常问我&#xff0c;Python怎么入门&#xff1f;Python虽然被称作是“最简洁的语言”&#xff0c;但是它终究还…

前端开发中基于Web Speech API(speechSynthesis接口)实现文字转语音功能

文章目录 一、Web Speech 的概念及用法二、Web Speech 的 API 接口1、SpeechSynthesis属性方法 2、SpeechSynthesisUtterance属性方法 三、Web Speech 的 用法用法演示一用法演示二htmljs 四、扩展 一、Web Speech 的概念及用法 在开发业务系统时&#xff0c;有时候可能需要使…

ubuntu系统(10):使用samba共享linux主机中文件

目录 一、samba安装步骤 1、Linux主机端操作 &#xff08;1&#xff09;安装sabma &#xff08;2&#xff09;修改samba配置文件 &#xff08;3&#xff09;为user_name用户设置samba访问的密码 &#xff08;4&#xff09;重启samba服务 2、Windows端 二、使用 1、代码…

登录页添加验证码

登录页添加验证码 引入验证码页面组件&#xff1a;ValidCode.vue <template><div class"ValidCodeContent" style""><divclass"ValidCode disabled-select":style"width:${width}; height:${height}"click"refre…