vue DatePicker日期选择器时差8小时问题

更新时间：2023年05月12日 14:29:10 作者：小憨憨不敢啊

这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue DatePicker日期选择器时差8小时

vue中使用element-ui中的日期选择器组件时，会造成时区差。

在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配（相差8小时）, 调试发现与后端接口没有问题，是控件本身的原因。

1.牵扯到国际时间和北京时间

2.中国国家标准时间是东经120°（东八区）的地方时间,同格林威治时间（世界时）整整相差8小时

解决方法：

设置value-format 属性, 精确到时间段value-format=“yyyy-MM-dd HH” 即可.

eg：

        <el-table-column label="发证日期" align="center" min-width="150">
									<template slot-scope="scope">
										<el-form-item :prop="'tableData.'+scope.$index+'.fzrq'" :rules="ZZrules.fzrq">
											<el-date-picker style="width:150px" :picker-options="FZTime" v-model="scope.row.fzrq"
												@change="startTimeStatus($event)" type="date" value-format="yyyy/MM/dd" format="yyyy/MM/dd"
												placeholder="选择日期" clearable>
											</el-date-picker>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="证书有效期" align="center" min-width="150">
									<template slot-scope="scope">
										<el-form-item :prop="'tableData.'+scope.$index+'.zsyxq'" :rules="ZZrules.zsyxq">
											<el-date-picker style="width:150px" :picker-options="YXQTime" v-model="scope.row.zsyxq"
												type="date" @change="endStatus($event)" value-format="yyyy/MM/dd" format="yyyy/MM/dd"
												placeholder="选择日期" clearable>
											</el-date-picker>
										</el-form-item>
									</template>
		             </el-table-column>

3.温馨提示：

在对日期做校验时同样存在一个问题，校验格式会提示·····不是日期格式的一串英文，这是因为前端与后台格式不统一造成的，value-format和format格式要保持一致，而且有可能你的时间已经是string类型，并不一定是date类型。要仔细检查，我是被坑到了···

我的校验文件：

fzrq: [
			{
				type: "string",
				required: true,
				message: "发证日期不可为空",
				trigger: "change",
				pattern: /.+/,
			},
		],
		zsyxq: [
			{
				type: "string",
				required: true,
				message: "证书有效期不可为空",
				trigger: "change",
				pattern: /.+/,
			},
		],

vue中moment时间戳问题(时区问题)

接手的vue项目中使用了moment模块，导致出现了一些问题。

北京时间 = UTC/GMT+8小时（东八区），世界标准时间加上8小时就是北京时间，今天踩到一个大坑，后端传回来的时间戳是世界时间转成的，当我用当前时间的时间戳减后端传回的时间戳去计算时长的时候发现不对劲，明明时长只有40分钟左右，计算出来的时长却是8小时40分钟，后面才知道，后端传回来的时间戳是世界时间转成的。

所以我前端要把当前时间戳减去8小时的时差再去减后端传回来的时间戳。这样计算出来的时间才是正确的。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
Vue 使用typescript如何优雅的调用swagger API
这篇文章主要介绍了Vue 使用typescript如何优雅的调用swagger API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
vue axios form-data格式传输数据和文件方式
这篇文章主要介绍了vue axios form-data格式传输数据和文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下
2018-04-04
vue3中addRoute路由变化页面未刷新问题解决
这篇文章主要为大家介绍了vue3中addRoute路由变化但页面未刷新问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
一文学会什么是vue.nextTick()
这篇文章主要介绍了一文学会什么是vue.nextTick()，下面文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
深入详解Vue中的路由懒加载
路由懒加载是一种优化技术，用于延迟加载应用程序中的路由组件，它可以提高初始加载速度并减少资源消耗，特别适用于大型单页应用，下面我们就来看看它的原理与使用吧
2023-08-08
Vue POST请求头'Content-Type':'application/j
这篇文章主要介绍了Vue POST请求头'Content-Type':'application/json;',data上传过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
自定义elementui上传文件以及携带参数问题
这篇文章主要介绍了自定义elementui上传文件以及携带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08
element-ui中导航组件menu的一个属性:default-active说明
这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05