el-date-picker 有效时间精确到时分秒 且给有效时间添加标记

el-date-picker实现有效日期做标记且时分秒限制选择范围


在这里插入图片描述
代码如下:

// html部分
<el-date-pickerv-model="dateTime"type="datetime":picker-options="pickerOptions"
>
</el-date-picker>// js部分
/*** 回放有效日期开始时间*/
@Prop({default: function() {return null},required: false
})
recordStartTime!: Date/*** 回放有效日期结束时间*/
@Prop({default: function() {return null},required: false
})
recordStopTime!: Date// el-date-picker绑定的值
dateTime: number = new Date().getTime()get choosedDate() {let dateObj = {year: new Date(this.dateTime).getFullYear(),month: new Date(this.dateTime).getMonth(),date: new Date(this.dateTime).getDate()}return JSON.stringify(dateObj)
}@Watch('choosedDate', { immediate: true })
watchChoosedDate(newVal) {let dateObj = JSON.parse(newVal)/*** 开始时间限制*/if (dateObj.year == new Date(this.recordStartTime).getFullYear() &&dateObj.month == new Date(this.recordStartTime).getMonth() &&dateObj.date == new Date(this.recordStartTime).getDate()) {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `${new Date(this.recordStartTime).format('hh:mm:ss')} - 23:59:59`}} /*** 结束时间限制*/else if (dateObj.year == new Date(this.recordStopTime).getFullYear() &&dateObj.month == new Date(this.recordStopTime).getMonth() &&dateObj.date == new Date(this.recordStopTime).getDate()) {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `00:00:00 - ${new Date(this.recordStopTime).format('hh:mm:ss')}`}} /*** 其他时间*/else {this.pickerOptions = {cellClassName: (time) => {let that = thisif(time.getTime() > new Date(that.recordStartTime).getTime() - 8.64e7 && time.getTime() < new Date(that.recordStopTime).getTime()){return 'custom_date_class';}},selectableRange: `00:00:00 - 23:59:59`}}
}// css部分 给有效日期下面添加标记
<style lang="less">
.custom_date_class {&::after {content: "";display: block;position: absolute;width: 4px;height: 4px;border-radius: 100%;background-color: var(--mb-main-color);left: 50%;transform: translateX(-2px);}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852898.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过MATLAB实现PID控制器,积分分离控制器以及滑模控制器

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 通过MATLAB实现PID控制器,积分分离控制器以及滑模控制器。通过对比三个算法可知&#xff0c;采用滑模控制算法&#xff0c;其具有最快的收敛性能&#xff0c;较强的鲁棒性&…

spring 对于 XML 中自定义标签的解析

我们知道&#xff0c;在 spring 的配置文件解析时&#xff0c;通过 XmlBeanDefinitionReader 来操作&#xff0c;下面来看看对 XML 配置文件解析时&#xff0c;这个类具体是如何操作的。 入口 protected int doLoadBeanDefinitions(InputSource inputSource, Resource resour…

链路追踪-微服务小白入门(6)

背景 什么是链路追踪 随着微服务分布式系统变得日趋复杂&#xff0c;越来越多的组件开始走向分布式化&#xff0c;如分布式服务、分布式数据库、分布式缓存等&#xff0c;使得后台服务构成了一种复杂的分布式网络。在服务能力提升的同时&#xff0c;复杂的网络结构也使问题定…

inux下nvidia驱动安装-ubuntu22.04安装2060-notebook驱动

原文链接&#xff1a;linux下gcc编译安装与卸载-ubuntu22.04安装gcc-12.3.0 导言 nvidia驱动是显卡稳定运行的重要保证&#xff0c;不同的显卡有不同驱动&#xff0c;不同驱动对操作系统/cuda支持都存在一定差别。本次驱动安装主要完成2060-notebook显卡在linux系统下的驱动安…

ffmpeg封装和解封装介绍-(6)完成重封装mp4文件并截断10s~20s的视频并生成10s视频文件

源文件&#xff1a; #include <iostream> #include <thread> using namespace std; extern "C" { //指定函数是c语言函数&#xff0c;函数名不包含重载标注 //引用ffmpeg头文件 #include <libavformat/avformat.h> } //预处理指令导入库 #pragma …

Java语言+前端框架html+Thymeleaf +后端框架springboot开发的UWB智能定位系统源码 UWB三维可视化人员定位系统源码

Java语言前端框架htmlThymeleaf 后端框架springboot开发的UWB智能定位系统源码 UWB三维可视化人员定位系统源码 UWB定位系统基于B/S架构的软件和嵌入式硬件都具有很好的扩展性和兼容性&#xff0c;可以与其他系统接口&#xff08;比如&#xff1a;围界、AB门、高压电网、报警、…

对抗式生成模仿学习(GAIL)

目录 1 预先基础知识 1.1 对抗生成网络&#xff08;GAN&#xff09; 1.1.1 基本概念 1.1.2 损失函数 1.1.2.1 固定G&#xff0c;求解令损失函数最大的D 1.1.2.2 固定D&#xff0c;求解令损失函数最小的G 1.2 对抗式生成模仿学习特点 2 对抗式生成模仿学习&#xff08;…

【CS.PL】Lua 编程之道: 简介与环境设置 - 进度8%

1 初级阶段 —— 简介与环境设置 文章目录 1 初级阶段 —— 简介与环境设置1.1 什么是 Lua&#xff1f;特点?1.2 Lua 的应用领域1.3 安装 Lua 解释器1.3.1 安装1.3.2 Lua解释器的结构 1.4 Lua执行方式1.4.0 程序段1.4.1 使用 Lua REPL&#xff08;Read-Eval-Print Loop&#x…

计算机专业在未来的发展与抉择

目录 前言 计算机专业的发展历史 计算机专业的前景 计算机专业的挑战 如何判断自己是否适合计算机专业 计算机行业的未来发展态势 作为过来人和从业者 前言 随着2024年高考落幕&#xff0c;数百万高三学生又将面临人生中的重要抉择&#xff1a;选择大学专业。在这个关键…

鸿蒙Arkts上传图片并获取接口返回信息

需求&#xff1a; 选择相册图片后&#xff0c;将文件上传到服务器&#xff0c;接口会返回图片地址。 问题&#xff1a; 1、鸿蒙自带的文件上传返回值只会返回上传状态&#xff0c;不会返回接口返回信息。 类似问题 HarmonyOS上传文件以及权限授权_harmonyos中axios上传文件…

古诗词的魅力

目录&#xff1a; 一、换一种说法 二、宋词的男女对白 1、女问男答 2、男问女答 一、换一种说法 “独上高楼&#xff0c;望尽天涯路”的满心期盼。 “春风得意马蹄疾&#xff0c;一日看尽长安花"的志得意满。 “山重水复疑无路&#xff0c;柳暗花明又一村”的苦尽甘…

【Gradio】Building With Blocks 控制布局

默认情况下&#xff0c;块中的组件垂直排列。让我们看看如何重新排列组件。在底层&#xff0c;这种布局结构使用了网页开发的 flexbox 模型。 行 在 with gr.Row 子句中的元素将全部水平显示。例如&#xff0c;要并排显示两个按钮&#xff1a; with gr.Blocks() as demo:with g…

JAVA云HIS医院管理系统源码 云HIS运维平台源码 SaaS模式支撑电子病历4级,HIS与电子病历系统均拥有自主知识产权

JAVA云HIS医院管理系统源码 云HIS运维平台源码 SaaS模式支撑电子病历4级&#xff0c;HIS与电子病历系统均拥有自主知识产权 系统简介&#xff1a; SaaS模式Java版云HIS系统&#xff0c;在公立二甲医院应用三年&#xff0c;经过多年持续优化和打磨&#xff0c;系统运行稳定、功…

Unity C#中校对两个列表内数据是否正确

Unity C#中校对两个列表内数据是否正确 using System.Collections.Generic; using UnityEngine;public class ListComparer : MonoBehaviour {// 示例列表public List<string> list1 new List<string> { "apple", "banana", "cherry&qu…

SSH密钥认证:实现远程服务器免密登录的两种方法|Linux scp命令详解:高效实现文件与目录的远程传输

简介&#xff1a; 服务器之间经常需要有一些跨服务器的操作&#xff0c;此时就需要我们在一台服务器上登录到另外一台服务器&#xff0c;若是人为操作时我们都可以每次输入密码进行远程登录&#xff0c;但要是程序需要跨服务器时&#xff0c;每次输入密码就不现实了&#xff0c…

最新Sublime Text软件安装包分享(汉化版本)

Sublime Text 是一款广受欢迎的跨平台文本编辑器&#xff0c;专为代码、标记和散文编辑而设计。它以其简洁的用户界面、强大的功能和高性能而著称&#xff0c;深受开发者和写作者的喜爱。 一、下载地址 链接&#xff1a;https://pan.baidu.com/s/1kErSkvc7WnML7fljQZlcOg?pwdk…

docker 拉取镜像拉取超时的解决方法

错误提示&#xff1a; error pulling image configuration: download failed after attempts6: dial tcp 67.228.102.32:443: connect: connection refused latest: Pulling from freeradius/freeradius-server a8b1c5f80c2d: Retrying in 1 second 37ffe8884f09: Retryin…

Makefile并发执行

引言 最近在编译项目代码的时候&#xff0c;发现全量编译一次代码需要十分钟&#xff0c;加了多核编译参数之后&#xff0c;还会出现各种错误&#xff0c;导致编译失败。于是我就想改造下makefile文件&#xff0c;使其能够多核编译&#xff0c;经过改造之后&#xff0c;效果显…

解决:安装MySQL 5.7 的时候报错:unknown variable ‘mysqlx_port=0.0‘

目录 1. 背景2. 解决步骤 1. 背景 吐槽1&#xff0c;没被收购之前可以随便下载&#xff0c;现在下载要注册登录吐槽2&#xff0c;5.7安装到初始化数据库的时候就会报错&#xff0c;而8.x的可以一镜到底&#xff0c;一开始以为是国区的特色问题&#xff0c;google了一圈&#x…

[Algorithm][贪心][最长递增子序列][递增的三元子序列][最长连续递增序列][买卖股票的最佳时机][买卖股票的最佳时机Ⅱ]详细讲解

目录 1.最长递增子序列1.题目链接2.算法原理详解3.代码实现 2.递增的三元子序列1.题目链接2.算法原理详解3.题目链接 3.最长连续递增序列1.题目链接2.算法原理详解3.代码实现 4.买卖股票的最佳时机1.题目链接2.算法原理详解3.代码实现 5.买卖股票的最佳时机 II1.题目链接2.算法…