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

<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.xdnf.cn/news/704251.html

相关文章:

  • allWebPlugin中间件VLC专用版之录像功能介绍
  • 测试Bug篇
  • Flutter GridView网格组件
  • 测试概念 和 bug
  • 003 flutter初始文件讲解(2)
  • 使用 Flutter 开发 App 时,想要根据 Figma 设计稿开发出响应式 UI 界面
  • 基于python脚本进行Maxwell自动化仿真
  • 代码随想录算法训练营第五十三天
  • Oracle/openGauss中,DATE/TIMESTAMP与数字日期/字符日期比较
  • 计算机网络之差错控制中的 CRC(循环冗余校验码)
  • 软件工程 3.0:智能驱动的软件新时代
  • LVS+Keepalived高可用集群
  • Nat Commun项目文章 ▏小麦CUTTag助力解析转录因子TaTCP6调控小麦氮磷高效利用机制
  • LVS + Keepalived 高可用群集
  • Redis Stack常见拓展
  • K6 是什么
  • ubuntu24 安装MongoDB-6.0.24 数据库操作步骤和配置参数说明
  • QuickBASIC QB64 支持 64 位系统和跨平台Linux/MAC OS
  • 使用Redisson实现分布式锁发现的【订阅超时】Subscribe timeout: (7500ms)
  • AI绘画:Stable Diffusion从入门到精通(系列教程)
  • ONLYOFFICE文档API:编辑器的品牌定制化
  • 算法训练第二天
  • 【AI智能体】Coze 插件从使用到实战详解
  • 从法律层面剖析危化品证书:两证一证背后的安全逻辑
  • Perforce P4产品简介:无限扩展+全球协作+安全管控+工具集成(附下载)
  • Android 异步编程中协程的完整实战示例
  • OpenFeign vs MQ:微服务通信如何选型?详解同步与异步的适用场景
  • C++23 std::fstreams基础回顾
  • 【25软考网工】第九章(2)网络管理命令
  • Vue-Router 基础使用