ElementUI时间选择器

遇到的问题：传给后端的时候总比前端相差8个小时

需要注意的问题：

value-format=“yyyy-MM-dd HH:mm:ss” 需要设置value-format的格式
对象属性上添加注解 @JsonFormat(shape = JsonFormat.Shape.STRING, pattern=“yyyy-MM-dd HH:mm:ss”, timezone = “GMT+8”)

效果图：

前端

<template><div><h2>添加员工</h2><el-form ref="form" :model="user" :rules="rules" label-width="80px" class="add-box"><el-form-item label="员工姓名" prop="name"><el-input v-model="user.name"></el-input></el-form-item><el-form-item label="员工性别" prop="sex"><el-radio-group v-model="user.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="员工年龄" prop="age"><el-input v-model.number="user.age"></el-input></el-form-item><el-form-item label="员工生日" prop="birth"><div class="block"><el-date-pickerv-model="user.birth"               绑定员工的生日字段format="yyyy-MM-dd HH:mm:ss"       控件显示的日期格式value-format="yyyy-MM-dd HH:mm:ss" 传给后端数据的格式:editable="false"                  设置不能手动输入日期type="datetime"                    placeholder="选择日期时间"align="right":picker-options="pickerOptions"></el-date-picker></div></el-form-item><el-form-item><el-button type="primary" @click="add">添加</el-button><el-button @click="reset">重置</el-button></el-form-item></el-form></div>
</template><script>
export default {name: "add",data(){return{user:{name:'',sex:'',age:'',birth:''},rules:{name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],sex: [{ required: true, message: '请选择性别', trigger: 'change' }],age: [{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}],birth: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],},pickerOptions: {shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]},}},methods:{add(){this.$refs.form.validate(valid=>{if(!valid) return;this.axios.post("/addUser",this.user).then(res=>{if(res.data=="ok"){this.$notify.success({title: '添加结果', message:'成功'});this.$router.push("/userList");}else {this.$notify.error({title: '添加结果', message:'失败'});}})})},reset(){this.$refs.form.resetFields();}}
}
</script><style scoped>
.add-box{height: 350px;width: 350px;margin-left: 400px;
}
</style>

后端

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {@TableId(type = IdType.AUTO)private int id;private String name;private String sex;private int age;@JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")private Date birth;
}

@RequestMapping("/addUser")
public String addUser(@RequestBody User user){int result = userService.add(user);return result>0?"ok":"no";
}

参考博文：https://blog.csdn.net/weixin_57932451/article/details/124823644

ElementUI时间选择器相关推荐

elementui时间选择器样式修改默认样式---修改宽度---修改日期图标
原先的代码 <el-form-item label="时间选择"><el-date-pickerv-model="time" //绑定的数据, ...
Vue+elementUI时间选择器的应用
DatePicker 日期选择器日期选择器基本用法可参照官网的案例,这里记录一下精确到日的一个需求的相关实现. 需求说明:设置一个日期范围选择功能,默认显示近一个月的用户数据,不能选择当天. 需要注 ...
elementui 时间选择器如何设置禁用时间
页面引用在:picker-options="timeChange" 属性中设置禁用时间 <el-date-picker v-model="value2&quo ...
element-ui时间选择器如何把今日日期改为“至今”
通过类名控制, 今日日期的盒子上面有'today'类名 /deep/.available.today span {color: #fff;&::after {content: "至今 ...
elementUI时间选择器传回后端时报错
设定格式即可:
element-ui时间选择器限制只能点击不让输入（整理）
<el-date-picker v-model="year" type="year" value-format="yyyy" :edi ...
JavaScript 数字转汉字+element时间选择器快速选择
window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零' } window.LEVEL = ...
修改element-ui中时间选择器的样式
一般项目中如果设置了scoped属性,可以通过>>>或者/deep/来修改其他第三方组件的样式. 但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面 ...
ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择
elementUI日期时间选择器范围(精确到,时.分.秒.

ElementUI时间选择器

前端

后端

ElementUI时间选择器相关推荐

最新文章

热门文章