目录Vue DatePicker日期选择器时差8小时vue中moment时间戳问题(时区问题)总结vue DatePicker日期选择器时差8小时 vue中使用element-ui中
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模块，导致出现了一些问题。
北京时间 = UTC/GMT+8小时（东八区） ，世界标准时间加上8小时就是北京时间，今天踩到一个大坑，后端传回来的时间戳是世界时间转成的，当我用当前时间的时间戳减后端传回的时间戳去计算时长的时候发现不对劲，明明时长只有40分钟左右，计算出来的时长却是8小时40分钟，后面才知道，后端传回来的时间戳是世界时间转成的。
所以我前端要把当前时间戳减去8小时的时差再去减后端传回来的时间戳。这样计算出来的时间才是正确的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vueDatePicker日期选择器时差8小时问题
本文链接: https://lsjlt.com/news/213999.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0