elementui 开始结束时间可以选择同一天不同时间段

news2024/11/27 2:33:15

先在main.js中导入

import moment from 'moment'
<el-row>
  <el-col :span="12">
    <el-form-item label="考试开始时间" prop="startTime">
      <el-date-picker v-model="shiJuanXinXiForm.startTime" style="width: 100%" type="datetime"
                      start-placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss" @change="changeStartEnd('start', $event)"></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="考试结束时间" prop="endTime">
      <el-date-picker v-model="shiJuanXinXiForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                      style="width: 100%"
                      type="datetime" start-placeholder="结束时间"
                      :picker-options="pickerOptions" @change="changeStartEnd('end', $event)"></el-date-picker>
    </el-form-item>
  </el-col>
</el-row>

  methods: {
      changeStartEnd(type, val) {
          debugger
    if (type === "start") {
        this.shiJuanXinXiForm.endTime = val
    }
},

}

computed: {
  isVisible: {
    get() {
      return this.dialogVisible;
    },
    set() {
      this.close();
      this.reset();
    },
  },
  title() {
    return this.$t("common." + this.type);
  },
    pickerOptions() {
        let str = "";
        if(this.$moment(this.shiJuanXinXiForm.startTime).format("YYYY-MM-DD") === this.$moment(this.shiJuanXinXiForm.endTime).format("YYYY-MM-DD")){
            str = this.shiJuanXinXiForm.startTime.split(" ").at(-1)
        }else{
            str = "00:00:00"
        }
        return {
            disabledDate: (time) => {
                return new Date(this.shiJuanXinXiForm.startTime).getTime() > time.getTime();
            },
            selectableRange: str + " - 23:59:59"
        }
    },
},

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

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

相关文章

7款免费的Midjourney平替平台

AI艺术生成器正在改变设计和内容的制作方式。像Midjourney这样的工具已经将困难的想法转化为令人惊叹的视觉效果&#xff0c;改变了创造力的运作方式。但是&#xff0c;AI艺术涵盖了许多风格和需求。这就是Midjourney替代方案变得重要的原因&#xff08;特别是免费的替代方案&a…

基于springboot+vue的阿博图书馆管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

神经网络回归案例(python

目录 1.代码&#xff1a;2.效果&#xff1a;小结&#xff1a; 1.代码&#xff1a; import numpy as np import tensorflow as tf# 自变量和目标值 X np.array([[1, 2, 3, 4, 5, 6]]) # 自变量需要是二维数组形式 Y np.array([4531.575371])# 转换为TensorFlow张量 X tf.co…

python遍历目录的两种方法

我们有时想直接查看文件夹里的所有文件&#xff0c;但使用正常的方法太麻烦了&#xff0c;于是我开发出了两个python程序&#xff0c;可以遍历目录 第一种 不知大家还是否记得&#xff0c;我之前在我的处理文件程序里写过这个功能 python处理文件程序 这个程序只需要os、time…

【智慧工业】东胜物联定位与跟踪解决方案,为方案商提供蓝牙网关、信标等物联网智能硬件设备

利用东胜物联的蓝牙网关我们的合作伙伴在德国的建筑工地成功实施了基于物联网蓝牙的员工出勤和跟踪管理解决方案&#xff0c;该解决方案简化了员工时间表并增强了工作流程&#xff0c;为经理和主管提供了更多时间来专注于项目洞察&#xff0c;并提高了员工的效率、绩效和生产力…

C++进阶(九)哈希概念哈希函数哈希冲突

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、哈希概念1、哈希介绍2、哈希与哈希表 二、哈希冲突三、哈希函数四、 哈希冲突解决 一、哈…

移动端WEB开发

meta视口标签 <meta name"viewort" content"widthdevice-width&#xff0c;user-scalableno&#xff0c;initial-scale1.0&#xff0c;minimum-scale1.0"> 属性 解释说明 width 宽度…

【lesson3】高并发内存池的三层框架介绍

文章目录 高并发内存池需要考虑的问题高并发内存池的3个核心部分thread cachecentral cachepage cache 高并发内存池需要考虑的问题 现代很多的开发环境都是多核多线程&#xff0c;在申请内存的场景下&#xff0c;必然存在激烈的锁竞争问题。malloc本身其实已经很优秀&#xf…

QSS样式表简单梳理记录

1.带namespace的类&#xff0c;样式表写法&#xff1a; // 命令空间LW&#xff0c;类名Demo LW--Demo {background-color: rgba(0, 0, 0, 0.5); } 2.带状态的类&#xff0c;样式表写法&#xff1a; // 类名Demo&#xff0c;状态current Demo[current"true"] {back…

深度解读NVMe计算存储协议-3

在NVMe计算存储架构中&#xff0c;Copy命令用于在不同类型的命名空间之间进行数据复制&#xff1a; Memory Copy命令&#xff1a;定义于SLM&#xff08;Subsystem Local Memory&#xff09;命令集&#xff0c;主要用于从非易失性存储命名空间&#xff08;NVM namespaces&#x…

回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向量机多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现CPO-LSSVM冠豪猪算法优化最小二乘支持向…

三款精选数字孪生产品大比拼

作为一名数据可视化领域的资深用户&#xff0c;我接触过众多数据可视化产品。本文将介绍三款备受关注的数据可视化工具&#xff0c;并对它们进行详细的比较。 首先&#xff0c;让我们了解一下数据可视化产品的核心价值。在信息爆炸的时代&#xff0c;数据可视化成为快速理解复…

09-信息收集-APP及其他资产等

信息收集-APP及其他资产等 信息收集-APP及其他资产等一、APP提取季抓包及后续配合1、某APK一键提取反编译2、利用bp抓取更多URL 二、某IP无web框架下的第三方测试1、各种端口一顿乱扫 —— 思路2、各种接口一顿乱扫 —— 思路3、接口部分一顿测试 —— 思路 三、**案例演示**1、…

华为1.24秋招笔试题

华为1.24秋招笔试题 1.题目1 题目详情 - 2024.1.24-华为秋招笔试-第一题-计算积分 - CodeFun2000 1.1题解 import java.util.Scanner;class Main{public static void main(String[] args){Scanner scnew Scanner(System.in);String ssc.next();char[] chs.toCharArray();in…

Go 中 struct tag 如何用?基于它实现字段级别的访问控制

嗨&#xff0c;大家好&#xff01;本文是系列文章 Go 小技巧第十篇&#xff0c;系列文章查看&#xff1a;Go 语言小技巧。 在 Go 中&#xff0c;结构体主要是用于定义复杂数据类型。而 struct tag 则是附加在 struct 字段后的字符串&#xff0c;提供了一种方式来存储关于字段的…

linux服务器上安装mysql

今天在华为云上安装mysql&#xff0c;安装命令很简单&#xff0c;就一行命令&#xff1a;sudo apt-get update && sudo apt-get install mysql-server 我安装的是mysql8.0版本&#xff0c;这里主要说一下安装mysql后怎么在外网连接&#xff1a; 1、注释掉 bind-add…

CoroNa Green acetoxymethyl (AM) ester,具有良好的细胞膜穿透能力

CoroNa Green, AM, Cell Permeant&#xff0c;CoroNa Green acetoxymethyl (AM) ester&#xff0c;CoroNa Green, AM&#xff0c;Sodium indicator 钠离子指示剂&#xff08;荧光探针&#xff09;&#xff0c;具有良好的细胞膜穿透能力&#xff0c;能够检测到细胞内钠离子的微小…

Redis(二)(实战篇)

查漏补缺 1.线程池 概述 : 提到池&#xff0c;大家应该能想到的就是水池。水池就是一个容器&#xff0c;在该容器中存储了很多的水。那么什么是线程池呢&#xff1f;线程池也是可以看做成一个池子&#xff0c;在该池子中存储很多个线程。 线程池存在的意义&#xff1a; 系…

go并发编程-介绍与Goroutine使用

1. 并发介绍 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中的多个…

排序之计数排序

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …