elementUI时间选择器el-time-picker的坑

news2024/11/25 17:10:09

 

 

            //开始时间
            <el-time-picker
              placeholder="选择时间"
              :format="'HH:mm:ss'" //显示的时间样式
              value-format="HH:mm:ss" //绑定值的样式 
//不给默认为 Date 对象值:"2023-07-31T16:00:00.000Z"
              v-model="FormData.startTime"
              style="width: 100%;"
                //时间限制 如果存在结束时间就0点到结束时间可以选择
              :picker-options="{
                selectableRange: `00:00:00-${
                  this.FormData.endTime ? this.FormData.endTime + '' : '23:59:00'
                }`,
              }">
            </el-time-picker>
           <el-time-picker
              :clearable="false"
              placeholder="选择时间"
              :format="'HH:mm:ss'"
              v-model="FormData.endTime"
              value-format="HH:mm:ss"
              style="width: 100%;"
                //如果存在开始时间,从开始时间到24点进行选择
              :picker-options="{
                selectableRange: `${
                  FormData.startTime ? FormData.startTime + '' : '00:00:00'
                }-23:59:59`,
              }">
            </el-time-picker>

这里有一个转换的坑需要注意

如果后端给的为默认为 Date 对象 值:"2023-07-31T16:00:00.000Z"或者是2023-07-31 16:00:00

这种格式拿到需要进行转换为你设定的HH:mm:ss格式,不然时间选择器会直接报错,无法识别时间类型

需要和后端协商好给什么类型格式

不然需要做一些列的时间转换

我的做法是拿到后端数据深拷贝一份,相关参数格式自己爱怎么转换就怎么转换,在发送请求时候也是使用深拷贝转换后的数据进行发送

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

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

相关文章

【JAVA】我们常常谈到的方法是指什么?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言方法方法的分类方法的定义方法调用方法重载 前言 在之前的文章中我们总是会介绍到类中的各式各样的方法&#xff0c;也许在应用中我们对它已经有了初步的了解&#xff0c;今…

(三) 搞定SOME/IP通信之CommonAPI库

本章主要介绍在SOME/IP通信过程中的另外一个IPC通信利剑,CommonAPI库,文章将从如下几个角度让读者了解什么是CommonAPI, 以及库在实际工作中的作用 SOME/IP通信之CommonAPI CommonAPI库是什么CommonAPI库的编译写个Demo实战一下CommonAPI库是什么 CommonAPI是GENIVI组织开发…

linux系统服务学习(二)linux下yum源配置实战

文章目录 Linux下yum源配置实战一、Linux下软件包的管理1、软件安装方式2、源码安装的配置过程3、详解源码安装的配置过程&#xff08;定制&#xff09;4、详解编译过程5、安装过程6、axel多线程下载软件源码安装7、使用软链接解决command not found8、使用环境变量解决command…

JavaScript进阶 第一天

作用域函数进阶解构赋值 一.作用域 局部作用域全局作用域作用域链JS垃圾回收机制闭包变量提升 1.1 作用域 ① 概念&#xff1a;规定了变量能够被访问的“范围”&#xff0c;离开了这个"范围"&#xff0c;变量不能被访问 ② 分类 局部作用域 &#xff08;1&…

END-TO-END、SCALE HYPERPRIOR、Checkerboard梳理总结

8.9-8.15学习汇报 阅读《END-TO-END OPTIMIZED IMAGE COMPRESSION》、《VARIATIONAL IMAGE COMPRESSION WITH A SCALE HYPERPRIOR》、《Checkerboard Context Model for Efficient Learned Image Compression》 传统的图像或视频压缩方法通常分为多个步骤&#xff0c;包括变换…

android设置竖屏仍然跟随屏幕旋转怎么办

如题所问&#xff0c;我最近遇到一个bug&#xff0c;就是设置了摇感&#xff0c;然后有用户反馈说设置了手机下拉的系统设置-屏幕旋转-关闭。然后屏幕还是会旋转的问题。 首先&#xff0c;我们先从如何设置横竖屏了解下好了 设置横屏和竖屏的方法&#xff1a; 方法一&#x…

IPv6项目开发测试记录

一、环境 1、网口 IPv6地址 fd00:0:0:1::15 子网前缀长度 64 网关地址&#xff08;非必须&#xff09; fd00:0:0:1::1 二、云环境、面板机连云测试 1、面板机设置IPv4地址后可以访问fd00::100这个地址 2、初始化时候服务器地址输入匹配正则式&#xff1a;IPv6地址匹配正则…

基因型比值比(genotypic odds ratio)和等位基因比值比(allelic odds ratio)的计算

基因型比值比&#xff08;genotypic odds ratio&#xff09;和等位基因比值比&#xff08;allelic odds ratio&#xff09;是两个不同的概念。一般而言&#xff0c;通过PLINK、GCTA等工具计算得到的比值比指的是等位基因比值比。 以下是基因型比值比和等位基因比值比的各自计算…

8月12日上课内容 综合配置详解 四层+七层代理

后续内容概述&#xff1a; Ivs集群: keepalive:vip实现代理高可用 NAT VPN DR (DR最常用) 数据库:增制改查 备份 高可用 主从复制 读写分离 DBA 市场量小&#xff0c;从业者不多&#xff0c;工资一般般。 中间件: redis.* 分布式存储: ELK日志分析。kafka消息队列 监控zabb…

知识分享:如何将一张图片转换成短链接?

今天我们要分享的知识是&#xff1a;如何将一张图片转换成链接&#xff1f; 之前我们有介绍过在二维彩虹将图片转换成二维码的方法&#xff0c;那么其实将图片转成链接也非常简单&#xff01;在做电商运营创建商品详情页面、作家为在线小说设置封面图、产品运营、策划活动等等…

IDC报告深度解读:2023年CRM发展趋势分析

近期&#xff0c;国际数据公司&#xff08;IDC&#xff09;发布了2022年下半年《中国客户关系管理(CRM)SaaS市场跟踪研究报告》&#xff0c;根据报告显示&#xff0c;2022年下半年中国CRM SaaS市场规模达到 11.6 亿美金&#xff0c;同比增长25.4%&#xff0c;CRM占中国整体SaaS…

SpringCloud初识

微服务架构4个核心问题&#xff1a; 这四个问题围绕这我们去学的一些东西&#xff0c;是重点!!! 1.服务很多&#xff0c;客户端该如何访问&#xff1f; 2.这么多服务&#xff0c;服务之间该如何通信&#xff1f; 3.这么多服务&#xff0c;该如何治理&#xff1f; 4.服务挂了…

Python 基础语法 | 常量表达式,变量,注释,输入输出

常量和表达式 我们可以把 Python 当成一个计算器&#xff0c;来进行一些算术运算 print(1 2 - 3) # 0 print(1 2 * 3) # 7 print(1 2 / 3) # 1.6666666666666665注意&#xff1a; print 是一个 Python 内置的 函数可以使用 - * / () 等运算符进行算术运算&#xff0c;先…

postman接口测试工具的常规使用

postman接口测试工具简介与安装 Postman简介&#xff1a; Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。 它提供功能强大的Web API&HTTP请求调试。它能够发送任何类型的HTTP请求&#xff08;GET&#xff0c;HEAD&#xff0c;POST&#xff0c;PUT..&a…

04-基础入门-WEB源码拓展

基础入门-WEB源码拓展 1、WEB源码拓展&#xff08;1&#xff09;关于web源码目录结构&#xff08;2&#xff09;关于 WEB 源码脚本类型&#xff08;3&#xff09;关于 WEB 源码应用分类 2、演示案例&#xff08;1&#xff09;asp、php等源码测试&#xff08;2&#xff09;平台识…

我们常说这个pycharm里有陷阱,第三方库导入失败,看这里!

最近有小伙伴遇到了明明安装了 python 第三方库&#xff0c;但是在 pycharm 当中却导入不成功的问题。 ​ 一直以来&#xff0c;也有不少初学 python 的小伙伴&#xff0c;一不小心就跳进了虚拟环境和系统环境的【陷阱】中。 本文就基于此问题&#xff0c;来说说在 pycharm 当…

【leetcode】【图解】617. 合并二叉树

题目 难度&#xff1a;简单 给你两棵二叉树&#xff1a; root1 和 root2 。 想象一下&#xff0c;当你将其中一棵覆盖到另一棵之上时&#xff0c;两棵树上的一些节点将会重叠&#xff08;而另一些不会&#xff09;。你需要将这两棵树合并成一棵新二叉树。合并的规则是&#xf…

基于DBN的伪测量配电网状态估计,DBN的详细原理

目录 背影 DBN神经网络的原理 DBN神经网络的定义 受限玻尔兹曼机(RBM) DBN的伪测量配电网状态估计 基本结构 主要参数 数据 MATALB代码 结果图 展望 背影 DBN是一种深度学习神经网络,拥有提取特征,非监督学习的能力,是一种非常好的分类算法,本文将DBN算法伪测量配电网…

leetcode 1171.从链表中删去总和值为零的连续节点

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;从链表中删去总和值为零的连续节点 思路&#xff1a; 在链表的 head 前新增加一个哨兵卫的头结点&#xff0c;方便计算前缀和。遍历链表&#xff0c;依次把每个节点的 val 相加到 sum 中去&#xff0c;再判断 sum 0 依…

网络编程(8.14)TCP并发服务器模型

作业&#xff1a; 1. 多线程中的newfd&#xff0c;能否修改成全局&#xff0c;不行&#xff0c;为什么&#xff1f; 2. 多线程中分支线程的newfd能否不另存&#xff0c;直接用指针间接访问主线程中的newfd,不行&#xff0c;为什么&#xff1f; 多线程并发服务器模型原代码&…