vue DatePicker日期选择器时差8小时_vue的datepicker八小时问题

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

	fzrq: [
			{
				type: "string",
				required: true,
				message: "发证日期不可为空",
				trigger: "change",
				pattern: /.+/,
			},
		],
		zsyxq: [
			{
				type: "string",
				required: true,
				message: "证书有效期不可为空",
				trigger: "change",
				pattern: /.+/,
			},
		],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18