文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vueDatePicker日期选择器时差8小时问题

2023-05-20 05:34

关注

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小时的时差再去减后端传回来的时间戳。这样计算出来的时间才是正确的。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯