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

相关文章:

  • 用户界面禁忌——基础原则
  • 如何在Qt中绘制一个带有动画的弧形进度条?
  • Vue3 + Element Plus 实现树形结构的“单选 + 只选叶子节点 + 默认选中第一个子节点”
  • [低代码表单生成器设计基础]ElementUI中Layout布局属性Form表单属性详解
  • el-table-column如何获取行数据的值
  • 【QT】理解QT的“元对象系统”
  • 企业文件乱、传输慢?用群晖 NAS 构建安全高效的共享系统
  • 【机器学习基础】机器学习入门核心算法:集成学习(Ensemble Learning)
  • Hive自定义函数案例(UDF、UDAF、UDTF)
  • 系统提示词:Google Stitch
  • 【Python零基础入门系列】第6篇:Python 的数据结构世界(列表、字典、集合、元组)
  • 基于ubuntu安装hadoop
  • C++17常量
  • 据传苹果将在WWDC上发布iOS 26 而不是iOS 19
  • 【C++高级主题】命令空间(三):未命名的命名空间
  • TI dsp FSI (快速串行接口)
  • WPF【11_10】WPF实战-重构与美化(配置Material UI框架)
  • Unity3D仿星露谷物语开发55之保存游戏到文件
  • 【数据结构】图论核心算法解析:深度优先搜索(DFS)的纵深遍历与生成树实战指南​
  • 深入理解C#中的LINQ:数据查询的终极利器
  • 软件下载网站建设/优化设计七年级上册数学答案
  • 什么网站专门学做湖北菜/电子商务网站建设的步骤
  • 怎么做一个自己网站/市场调研方法有哪些
  • 长沙企业官方网站建设/上优化seo
  • 网站建设工作领导小组/自己创建网站
  • 扁平式网站seo 内链/seo成创网络