<el-date-picker>组件传参时,选中时间和传参偏差8小时

        遇到一个bug,不仔细看,都不一定能发现,bug描述:我们有一个搜索框,里面有一个时间选择器,当我使用<el-date-picker>时,我发现当我选择时分秒之后,显示都正常,但是当我传给后端之后发现,时间居然少了8小时,居然这么巧,不多不少,正好8小时,那肯定是时区的问题了!!!

一、问题复现

        我们在开发的时候,后端由于框架问题,需要一个格林威治格式的时间,而<el-date-picker>组件默认会返回一个格林威治格式的时间,所以刚开始我直接返回了组件默认的时间。

        很明显,组件默认的时间格式传参跟我选择的时间偏差8小时,根本原因是:中国国家标准时间是东经120°(东八区)的地方时间,同格林威治时间(世界时)整整相差8小时

二、解决思路

        官网并没有给出这种情况的解决方案,但是其实不必执着于组件本身:在<el-date-picker>有两个属性:format 和 value-format他们的用法是这样描述的:

format属性:用于控制日期选择器中显示的日期的格式,即用户看到的日期格式

        它不会影响日期选择器的值,只是用于用户界面的显示。当用户选择日期时,选择器会根据 format 属性来格式化显示的日期,但实际的日期值不会受到影响。

value-format属性:用于控制实际选择器的值的格式,即在v-model中返回的日期值的格式

        它定义了日期选择器返回的日期值的格式。当用户选择日期时,选择器将会将日期值格式化为value-format中指定的格式,并将其传递给v-model绑定的变量。

        如果清楚了这两个属性的原理,这个问题也就迎刃而解了:默认的格林威志时间会偏差8小时,但是通过value-format转换后的时间是正常的,我们通过这两个属性直接自己设置当前v-model的值(即自己伪装一个格林威治时间),最后我也是通过这种方法直接解决了问题。

三、解决代码

<el-date-pickerv-model="form.startDate"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DDTHH:mm:ss.000Z"type="datetime"placeholder="请选择时间"
/>

        注意:format和value-format时间格式设置的时候,一定要注意时分秒的大小写。

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

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

相关文章

uni-app开发特殊社交APP

uni-app开发特殊社交APP 目录 1.展示APP功能 2.展示项目结构 3.关于我的GitHub 引言 博主最近自己在GitHub上面上传了一个关于社交软件的项目&#xff08;该项目早已开发完毕&#xff09;, 这个社交软件比较特殊, 被称之为blind-date&#xff0c; blind-date 是基于 uni-…

深入研究Azure 容器网络接口 (CNI) overlay

启用cni overlay 在通过portal创建aks的时候,在networking配置上,选中下面的选项即可启用。 通过CLI创建AKS 要创建具有 CNI 覆盖网络的 AKS 群集,需要在创建群集时指定 --network-plugin azure 和 --network-plugin-mode 覆盖选项。 还需要指定 --pod-cidr 选项来定义群…

Docker 部署项目

使用 Docker 部署项目是一个很好的选择&#xff0c;可以避免服务器环境不兼容的问题&#xff0c;并且能够实现一致性和可移植性。我会给你一个详细的步骤&#xff0c;帮你从零开始理解 Docker&#xff0c;最终在服务器上部署 Roop 项目。 1. 安装 Docker 首先&#xff0c;你需…

excel表格记账 : 操作单元格进行加减乘除 | Excel中Evaluate函数

文章目录 引用I 基础求和∑II Excel中Evaluate函数基于字符串表达式进行计算用法案例 :基于Evaluate实现汇率计算利润知识扩展在单元格内的换行选择整列单元格引用 需求: 基于汇率计算利润,调整金额以及进汇率和出汇率自动算出利润,已经统计总利润。 基于Evaluate实现汇率计…

vue+ts+TinyEditor 是基于 Quill 2.0 开发的富文本编辑器,提供丰富的扩展功能,适用于现代 Web 开发的完整安装使用教程

简介 TinyEditor 是基于 Quill 2.0 开发的富文本编辑器&#xff0c;提供丰富的扩展功能&#xff0c;适用于现代 Web 开发。具备模块化设计、轻量级架构和高度可定制化特性&#xff0c;支持多种插件扩展&#xff0c;满足不同场景需求。 核心特性 基于 Quill 2.0 的现代化架构模…

matlab实现激光腔长计算满足热透镜效应

激光腔长计算与热透镜效应补偿 在全固态激光器中&#xff0c;热透镜效应是一个重要的问题&#xff0c;因为它会影响激光的光束质量和输出功率。以下是如何计算激光腔长并考虑热透镜效应的方法&#xff0c;以及一些补偿技术。 1. 激光腔长计算 激光腔长的计算需要考虑激光晶体…

Science Robotics 具身智能驱动的空中物理交互新范式:结合形态和传感,与非结构化环境进行稳健交互

随着科技的飞速发展&#xff0c;无人机技术已从单纯的远程感知扩展到与环境的物理交互领域&#xff0c;为可持续发展目标的实现提供了新的可能性。传统的空中物理交互方法依赖于复杂的控制策略和精确的环境建模&#xff0c;尽管能够实现高精度操作&#xff0c;但其在非结构化自…

图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析

现代信息检索系统和搜索引擎普遍采用两阶段检索架构&#xff0c;在人工智能应用中也被称为检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;。在初始检索阶段&#xff0c;系统采用高效的检索方法&#xff0c;包括词汇检索算法&#xff08;如BM25&…

List 源码翻译

List 源码翻译-jdk1.8 翻译来自 AI 大模型。 全部源码翻译下载 /** 版权所有 (c) 1997, 2014, Oracle 和/或其附属公司。保留所有权利。* ORACLE 专有/机密。使用受许可条款约束。*********************/package java.util;import java.util.function.UnaryOperator;/*** 有序…

Vscode 解决 #include <> 找不到的问题

本人遇到的情况, 使用 ROS 的过程中, 发现 #include <pcl/point_types.h> 不被 VScode 识别, 在 AI 的帮助下解决了该问题, 现总结如下: 1. 查看是否有相应的文件 Linux 下, point_types.h 的存储路径一般为: /usr/include/pcl-1.x (我的路径是 /usr/include/pcl-1.12)…

霹雳吧啦Wz_深度学习-图像分类篇章_1.1 卷积神经网络基础_笔记

深度学习-图像分类篇章 参考笔记 卷积神经网络 英文&#xff1a;Convolutional Neural Network&#xff0c;CNN雏形&#xff1a;1998年LeCun的LeNet5&#xff0c;第一个卷积神经网络包含&#xff1a; 卷积层&#xff1a;Convolutions下采样层&#xff1a;Subsampling全连阶层…

基于多模态脑电、音频与视觉信号的情感识别算法【Nature核心期刊,EAV:EEG-音频-视频数据集】

简述 理解情感状态对于开发下一代人机交互界面至关重要。社交互动中的人类行为会引发受感知输入影响的心理生理过程。因此&#xff0c;探索大脑功能与人类行为的努力或将推动具有类人特质人工智能模型的发展。这里原作者推出一个多模态情感数据集&#xff0c;包含42名参与者的3…

理解并解决高丢包率问题,构建清晰流畅的实时音视频通话

丢包作为数字通信中的重要干扰因素&#xff0c;常常潜伏在表面之下&#xff0c;却严重影响性能&#xff0c;将清晰的对话变的模糊不清&#xff0c;将连贯的演示变的断断续续。因此&#xff0c;对音视频通话相关应用的开发者来说&#xff0c;理解丢包率非常重要。 什么是丢包&am…

RDS PostgreSQL手动删除副本集群副本的步骤

由于PostgreSQL不支持直接删除副本集群&#xff0c;而是需要先将副本集群升级到主实例(区域集群)&#xff0c;然后在逐一将写入器实例删除&#xff0c;然后才可以删除副本集群 查看现有的主从实例集群 将副本集群提升到区域集群 选择副本集群–>操作–>提升 提升只读副本…

ElementUI表单验证指南

ElementUI 是一套基于 Vue.js 的组件库&#xff0c;提供了丰富的表单组件和验证功能。其表单验证通过 el-form 组件结合 rules 规则实现&#xff0c;支持同步和异步验证。 基本表单验证实现 在 ElementUI 中&#xff0c;表单验证需要配置 el-form 的 rules 属性&#xff0c;并…

通过ansible playbook创建azure 资源

安装 Ansible 在 macOS 上 Ansible 可以通过多种方式在 macOS 上安装,推荐使用 pip 或 Homebrew。 使用 Homebrew 安装 Ansible 运行以下命令: brew install ansible使用 pip 安装 Ansible 确保 Python 已安装(macOS 通常自带 Python),然后运行: pip install ansible…

Spring框架学习day4--Spring集成Mybatis(IOC)

Spring集成Mybatis1.添加jar包&#xff08;pom.xml&#xff09;2.配置sqlSessionFactiory&#xff08;spring.xml)3.再service类中注入Dao代理接口4.测试类5文件结构 Spring集成Mybatis Spring集成Mybatis其核心是将SqlSessionFactory交由Spring管理&#xff0c;并由 Spring管理…

可靠数据传输原理

目录 构造可靠数据传输协议 一、rdt1.0&#xff1a;理想信道下的可靠传输 核心假设与功能 二、rdt 2.0&#xff1a;带差错检测的停等协议 核心假设与功能 三、rdt 2.1&#xff1a;修复 ACK/NAK 不可靠性 核心改进 四、rdt 2.2&#xff1a;纯 ACK 实现的可靠传输 核心改…

Python Day33

Task&#xff1a; MLP神经网络的训练 1.PyTorch和cuda的安装 2.查看显卡信息的命令行命令&#xff08;cmd中使用&#xff09; 3.cuda的检查 4.简单神经网络的流程 a.数据预处理&#xff08;归一化、转换成张量&#xff09; b.模型的定义 i.继承nn.Module类 ii.定义每一个层 iii…