关于ELement UI时间控件el-date-picker误差8小时的问题

 更新时间:2024年08月09日 10:58:10   作者:xuelong-ming  
本文探讨了在使用Vue前端框架配合ElementUI开发时,遇到日期时间选择器DateTimePicker的时间同步问题,通过揭示中国东八区与格林威治时间的时差,作者提供了设置value-format属性的解决方案,以确保后端接收到的正确时间格式

问题

前端使用框架与UI:Vue+ElementUI。
在项目开发中使用到了DateTimePicker组件,在选择时间后点击查询发现查询导的内容与预期内容有所偏差,之后发现前端选中的时间在后端接收时相差了八个小时。

原因

我们国家的标准时间是东经120°时间(东八区),而标准时间是格林威治时间(世界时),两者相差了整整8小时。

解决

需要设置value-format属性,value-format=“yyyy-MM-dd HH:mm:ss”。

  <div class="block">
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>

到此这篇关于ELement UI时间控件el-date-picker误差8小时的文章就介绍到这了,更多相关ELement UI el-date-picker误差8小时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题

    这篇文章主要介绍了ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue打包后生成一个配置文件可以修改IP

    vue打包后生成一个配置文件可以修改IP

    本文主要介绍了修改Vue项目运行的IP和端口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue3下eslint配置方式

    vue3下eslint配置方式

    这篇文章主要介绍了vue3下eslint配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue中从template到jsx语法教程示例

    Vue中从template到jsx语法教程示例

    这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • vue 图片裁剪上传组件的实现

    vue 图片裁剪上传组件的实现

    这篇文章主要介绍了vue 图片裁剪上传组件的实现,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue3中Vant的使用及说明

    vue3中Vant的使用及说明

    这篇文章主要介绍了vue3中Vant的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue实现拖拽滑动分割面板

    vue实现拖拽滑动分割面板

    这篇文章主要为大家详细介绍了vue实现拖拽滑动分割面板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue循环中多个input绑定指定v-model实例

    Vue循环中多个input绑定指定v-model实例

    这篇文章主要介绍了Vue循环中多个input绑定指定v-model实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue如何截取字符串

    vue如何截取字符串

    这篇文章主要介绍了vue如何截取字符串,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue3项目中引入ElementUI并使用的示例详解

    Vue3项目中引入ElementUI并使用的示例详解

    ElementUI是一个强大的PC端UI组件框架,它不依赖于vue,但是却是当前和vue配合做项目开发的一个比较好的ui框架,本文主要介绍了如何在vue3中引入使用ElementUI,需要的可以参考一下
    2023-06-06

最新评论