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

http://www.lryc.cn/news/2392007.html

相关文章:

  • ST MCU CAN模块--TTCAN模式浅析
  • MySQL数据库零基础入门教程:从安装配置到数据查询全掌握【MySQL系列】
  • 动态规划(7):背包问题
  • 谷歌浏览器Google Chrome v137.0.7151.41 中文版本版+插件 v1.11.1
  • 《深入解析UART协议及其硬件实现》-- 第三篇:UART ASIC实现优化与低功耗设计
  • Hadoop常用端口号和配置文件
  • Apache Paimon:存储结构、写入及其源码分析
  • 19、Python字符串高阶实战:转义字符深度解析、高效拼接与输入处理技巧
  • 国芯思辰| 同步降压转换器CN2020应用于智能电视,替换LMR33620
  • 6个月Python学习计划 Day 8 - Python 函数基础
  • DeepSeek 提示词大全
  • 俄罗斯无人机自主任务规划!UAV-CodeAgents:基于多智能体ReAct和视觉语言推理的可扩展无人机任务规划
  • 结构性设计模式之Bridge(桥接)
  • CSS篇-1
  • Android 16系统源码_无障碍辅助(一)认识无障碍服务
  • 分布式数据库备份实践
  • 如何发布npm包?
  • 鸿蒙---使用真机模拟器的时候,图片不加载问题
  • 实验设计与分析(第6版,Montgomery)第5章析因设计引导5.7节思考题5.6 R语言解题
  • .NET 8使用AOT发布ASP.NET Core应用
  • OpenCV计算机视觉实战(8)——图像滤波详解
  • Docker 前端镜像容器部署指南
  • OpenAI大模型不听人类指令事件的技术分析与安全影响
  • 图神经网络实战——图的可视化
  • 自动化安全脚本学习
  • github公开项目爬取
  • 用豆包写单元测试
  • 传输层协议TCP(上)
  • Windows下安装并使用kubectl查看K8S日志
  • Hive 分区详解:从基础概念到实战应用