关于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小时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue响应式原理详解

    Vue响应式原理详解

    本篇文章主要介绍了Vue响应式原理详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • element表格去掉表头的实现方法

    element表格去掉表头的实现方法

    本文主要介绍了element表格去掉表头的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue3实现无缝滚动列表效果(大屏数据轮播场景)

    vue3实现无缝滚动列表效果(大屏数据轮播场景)

    vue3-scroll-seamless 是一个用于 Vue 3 的插件,用于实现无缝滚动的组件,它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景,本文就给大家介绍了vue3实现无缝滚动列表效果,需要的朋友可以参考下
    2024-07-07
  • vuejs选中当前样式active的实例

    vuejs选中当前样式active的实例

    今天小编就为大家分享一篇vuejs选中当前样式active的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vuex中actions优雅处理接口请求的方法

    Vuex中actions优雅处理接口请求的方法

    在项目开发中,如果使用到了 vuex,通常我会将所有的接口请求单独用一个文件管理,这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中,本文给大家分享完整流程需要的朋友可以参考下
    2022-11-11
  • Vue 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

    这篇文章主要介绍了Vue 计算属性之姓名案例的三种实现方法,计算属性实现、methods实现和插值语法实现,下面文章具体介绍,需要的小伙伴可以参考一下
    2022-05-05
  • 在移动端使用vue-router和keep-alive的方法示例

    在移动端使用vue-router和keep-alive的方法示例

    这篇文章主要介绍了在移动端使用vue-router和keep-alive的方法示例,vue-router与keep-alive提供的路由体验与移动端是有一定差别的,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue3.0结合bootstrap创建多页面应用

    Vue3.0结合bootstrap创建多页面应用

    这篇文章主要介绍了Vue3.0结合bootstrap创建多页面应用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 怎样查看vue-cli的安装位置

    怎样查看vue-cli的安装位置

    这篇文章主要介绍了怎样查看vue-cli的安装位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue实现指令式动态追加小球动画组件的步骤

    Vue实现指令式动态追加小球动画组件的步骤

    这篇文章主要介绍了Vue实现指令式动态追加小球动画组件的步骤,帮助大家更好的理解和实用vue,感兴趣的朋友可以了解下
    2020-12-12

最新评论