当前位置: 首页 > article >正文

<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时间格式设置的时候,一定要注意时分秒的大小写。

相关文章:

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

遇到一个bug&#xff0c;不仔细看&#xff0c;都不一定能发现&#xff0c;bug描述&#xff1a;我们有一个搜索框&#xff0c;里面有一个时间选择器&#xff0c;当我使用<el-date-picker>时&#xff0c;我发现当我选择时分秒之后&#xff0c;显示都正常&#xff0c;但是当…...

ST MCU CAN模块--TTCAN模式浅析

ST MCU CAN模块使用总结 1 前言 ​ 传统CAN 采用事件触发消息传输机制,CSMA/ CD AMP( Carrier-Sense Mult iple Access w ith Co llision Detect ion and Arbit ration on Message Priorit ies, 载波侦听、多路访问、冲突检测、优先级仲裁) 介质访问控制机制, 即多个消息同时…...

MySQL数据库零基础入门教程:从安装配置到数据查询全掌握【MySQL系列】

第1章&#xff1a;认识MySQL 1.1 什么是MySQL&#xff1f; MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典MySQL AB公司开发&#xff0c;现由Oracle公司维护。它使用结构化查询语言&#xff08;SQL&#xff09;进行数据库的管理和操…...

动态规划(7):背包问题

引言 背包问题是动态规划中最经典、最重要的问题类型之一,它不仅在算法竞赛中频繁出现,也在实际应用中有着广泛的用途。从资源分配到投资组合优化,从生产计划到网络路由,背包问题的思想几乎无处不在。正因如此,背包问题被誉为动态规划的"必修课",掌握背包问题…...

谷歌浏览器Google Chrome v137.0.7151.41 中文版本版+插件 v1.11.1

一、软件介绍 这个版本解压就可以用&#xff0c;界面是中文的。 保留了核心功能&#xff0c; 二、软件特点 便携性 &#xff1a;解压即可使用&#xff0c;不想用了直接删掉整个文件夹。 增强功能 &#xff1a;通过Chrome增强软件劫持补丁chromev1.11.1 x64 (version.dll)实现多…...

《深入解析UART协议及其硬件实现》-- 第三篇:UART ASIC实现优化与低功耗设计

第三篇&#xff1a;UART ASIC实现优化与低功耗设计 1. ASIC与FPGA设计差异 1.1 标准单元库选型 库类型对设计的影响 &#xff1a; 高性能库&#xff08;High-Speed&#xff09; &#xff1a;使用低阈值电压晶体管&#xff0c;速度快但漏电功耗高&#xff0c;适合关键路径优化…...

Hadoop常用端口号和配置文件

常用端口号有&#xff1a; hadoop2.x Hadoop3.x 访问HDFS端口 50070 9870 访问MR执行情况端口 8088 8088 历史服务器 19888 19888 客户端访问集群端口 9000 8020 常用配置文件 hadoop2.x core-site.xml、hdfs-site.xml、mapred-site.xml、yarn-si…...

Apache Paimon:存储结构、写入及其源码分析

Apache Paimon (此前称为 Flink Table Store)是一种流式数据湖存储技术&#xff0c;采用 LSM&#xff08;Log-Structured Merge-tree&#xff09;树结构来存储数据&#xff0c;支持高吞吐、低延迟的数据摄入和实时查询&#xff0c;尤其适用于流式和批量统一的场景。 1. 创建表…...

19、Python字符串高阶实战:转义字符深度解析、高效拼接与输入处理技巧

适合人群&#xff1a;零基础自学者 | 编程小白快速入门 阅读时长&#xff1a;约6分钟 文章目录 一、问题&#xff1a;Python的转义字符&#xff1f;1、例子1&#xff1a;快递地址格式化打印2、答案&#xff1a;&#xff08;1&#xff09;转义字符 二、问题&#xff1a;Python的…...

国芯思辰| 同步降压转换器CN2020应用于智能电视,替换LMR33620

在智能电视不断向高画质、多功能、智能化发展的当下&#xff0c;其内部电源管理系统的性能至关重要。同步降压转换器可以为智能电视提供稳定、高效的运行。 国芯思辰CN2020是一款脉宽调制式同步降压转换器。内部集成两个功率MOS管&#xff0c;在4.5~18V宽输入电压范围内可以持…...

6个月Python学习计划 Day 8 - Python 函数基础

第一周 Day 1 - Python 基础入门 & 开发环境搭建 Day 2 - 条件判断、用户输入、格式化输出 Day 3 - 循环语句 range 函数 Day 4 - 列表 & 元组基础 Day 5 - 字典&#xff08;dict&#xff09;与集合&#xff08;set&#xff09; Day 6 - 综合实战&#xff1a;学生信息…...

DeepSeek 提示词大全

目录 前言一、提示词基础理论 什么是提示词提示词的类型提示词的基本结构 二、提示词设计原则 明确指令结构化表达情境化需求渐进式引导边界与限制 三、场景化提示词模板 写作创作类角色扮演类信息提取类代码编程类教育学习类商业营销类生活助手类 四、提示词优化技巧 迭代式优…...

俄罗斯无人机自主任务规划!UAV-CodeAgents:基于多智能体ReAct和视觉语言推理的可扩展无人机任务规划

作者&#xff1a;Oleg Sautenkov 1 ^{1} 1, Yasheerah Yaqoot 1 ^{1} 1, Muhammad Ahsan Mustafa 1 ^{1} 1, Faryal Batool 1 ^{1} 1, Jeffrin Sam 1 ^{1} 1, Artem Lykov 1 ^{1} 1, Chih-Yung Wen 2 ^{2} 2, and Dzmitry Tsetserukou 1 ^{1} 1单位&#xff1a; 1 ^{1} 1斯科尔…...

结构性设计模式之Bridge(桥接)

结构性设计模式之Bridge&#xff08;桥接&#xff09; 摘要 桥接模式是一种结构性设计模式&#xff0c;其核心思想是将抽象部分与实现部分分离&#xff0c;使二者能够独立变化。本文通过汽车产品生产案例&#xff08;产品A/B与颜色红/蓝/黄&#xff09;展示了桥接模式的应用&…...

CSS篇-1

1. CSS 有哪些基本选择器&#xff1f;它们的权重是如何表示的&#xff1f; 这是一个关于 CSS 基础且极其重要的问题&#xff0c;因为它直接关系到我们如何精准地控制页面元素的样式&#xff0c;以及在样式冲突时浏览器如何决定哪个样式生效。理解 CSS 选择器及其权重&#xff…...

Android 16系统源码_无障碍辅助(一)认识无障碍服务

前言 Android 的无障碍辅助功能&#xff08;Accessibility&#xff09;是一套专为残障用户或特殊场景设计的核心技术框架&#xff0c;旨在让所有用户都能便捷地操作设备。其功能覆盖视觉、听觉、运动能力和认知障碍支持&#xff0c;同时为开发者提供标准化 API 以实现应用适配…...

分布式数据库备份实践

在分布式备份中可以采取两种方式进行备份&#xff0c;一种是采用手动编写backup.yml文件进行备份&#xff0c;另外一种是吧备份过程交给备份工具自动执行。如果需要个性化进行备份&#xff0c;建议采用手动编写备份文件方式进行备份。 以下是针对两种备份方式的实践&#xff1a…...

如何发布npm包?

如何发布npm包&#xff1f; 1. 注册账号[npm官网](https://www.npmjs.com/)2. 检查 npm 源是否在官方 npm 仓库&#xff0c;如果不在&#xff0c;进行切换3. 检查4. 打包配置5. 发布6. 使用错误&#xff1a;版本更新命令 1. 注册账号npm官网 2. 检查 npm 源是否在官方 npm 仓库…...

鸿蒙---使用真机模拟器的时候,图片不加载问题

使用真机模拟器的时候&#xff0c;图片不加载问题 解决方案&#xff1a; 1&#xff0c;找到 module.json5 文件&#xff0c;路径 entry -> src -> main -> module.json5 2&#xff0c;在module.json5 文件中&#xff0c;开头的’module’中添加 "requestPermiss…...

实验设计与分析(第6版,Montgomery)第5章析因设计引导5.7节思考题5.6 R语言解题

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著&#xff0c;傅珏生译) 第5章析因设计引导5.7节思考题5.6 R语言解题。主要涉及方差分析&#xff0c;正态假设检验&#xff0c;残差分析&#xff0c;交互作用图&#xff0c;等值线图。 dataframe <-data.frame…...

.NET 8使用AOT发布ASP.NET Core应用

.NET 8 使用 AOT 发布 ASP.NET Core 应用 一、AOT 编译简介 在 .NET 开发中&#xff0c;编译方式有多种&#xff0c;其中 AOT&#xff08;Ahead-Of-Time&#xff09;编译是一种区别于传统 JIT&#xff08;Just-In-Time&#xff09;编译的方式。传统的 JIT 编译是在 .NET 应用…...

OpenCV计算机视觉实战(8)——图像滤波详解

OpenCV计算机视觉实战&#xff08;8&#xff09;——图像滤波详解 0. 前言1. 线性滤波1.1 均值滤波1.2 高斯滤波1.3 拉普拉斯滤波1.4 Sobel 滤波 2. 非线性滤波3. 自定义卷积核小结系列链接 0. 前言 在本文中&#xff0c;我们将深入探索线性与非线性滤波的算法原理、性能优化及…...

Docker 前端镜像容器部署指南

1. 编写 Dockerfile 文件 # 使用轻量级的 Nginx Alpine 作为基础镜像 FROM nginx:alpine# 设置工作目录 WORKDIR /usr/share/nginx/html# 删除默认的 Nginx 静态文件 RUN rm -rf ./*# 复制本地 dist 目录下的文件到容器中 COPY ./dist /usr/share/nginx/html# 暴露容器端口 EX…...

OpenAI大模型不听人类指令事件的技术分析与安全影响

OpenAI大模型不听人类指令事件的技术分析与安全影响 OpenAI大模型o3确实存在不遵从人类关闭指令的现象&#xff0c;这一行为已被第三方安全机构验证&#xff0c;但其本质是技术缺陷而非AI意识觉醒。帕利塞德研究所的测试显示&#xff0c;在100次实验中o3有7次成功绕过关闭指令…...

图神经网络实战——图的可视化

图神经网络实战——图的可视化 0. 前言1. networkx2. Gephi相关链接0. 前言 图结构可通过图形化方式直观呈现。节点通常用圆形表示,边则用连接线表示。 然而当节点和边数量增加时,绘制清晰的图形表示可能会变得相当困难,这主要源于节点在二维坐标系中的布局问题。对于包含数…...

自动化安全脚本学习

1.目录扫描器 目标&#xff1a;使用python编写一个自动化目录扫描工具&#xff0c;实现简单信息收集&#xff0c;判断目标网站是否存在常见路径。 import requests #用于发HTTP请求 from concurrent.futures import ThreadPoolExecutor #实现多线程扫描# 扫描目标 target h…...

github公开项目爬取

import requestsdef search_github_repositories(keyword, tokenNone, languageNone, max_results1000):"""通过 GitHub API 搜索仓库&#xff0c;支持分页获取所有结果&#xff08;最多 1000 条&#xff09;:param keyword: 搜索关键词:param token: GitHub To…...

用豆包写单元测试

用豆包写单元测试&#xff0c; 输入 vue 模板内容&#xff0c;输入 参考vue模板内容写一个单元测试要求用jest.mock实现构造完成&#xff0c;修复bug。npm run test:unit – tests/unit/views/xxx/xxx.spec.js看下 % Stmts 语句覆盖率&#xff1a;执行到的代码语句占总语句的比…...

传输层协议TCP(上)

上一篇https://blog.csdn.net/Small_entreprene/article/details/148143494?fromshareblogdetail&sharetypeblogdetail&sharerId148143494&sharereferPC&sharesourceSmall_entreprene&sharefromfrom_link 上文学习了传输层的协议之一UDP&#xff0c;接下来…...

Windows下安装并使用kubectl查看K8S日志

【1】安装kubectl 官网文档&#xff1a;https://kubernetes.io/zh-cn/docs/tasks/tools/install-kubectl-windows/ 下载后得到 kubectl.exe&#xff0c;放到一个目录下&#xff0c;然后配置环境变量。 此时CMD 进入DOS命令窗口 kubectl version【2】配置config文件 其实就是…...