Element UI 日期时间选择器默认获取当前日期以及时间
实现页面
要求在点击新增时,获取到当天的日期以及时间,并且在用户填完信息后,提交时的时间是最新的时间,这就要求时间要实时更新,国庆七天假期一个代码都没写的我,瞬间感觉头疼。。。
表单提交
使用Element ui的form表单来实现提交功能
<el-form-item label="时间:" :label-width="formLabelWidth" prop="time" > <el-date-picker v-model="queryParamset.time" type="datetime" placeholder="选择日期时间" > </el-date-picker> </el-form-item> 复制代码
添加表单验证功能
<el-form :model="queryParamset" :rules="rules" ref="queryParamset" label-width="100px" > 复制代码
//新增必填 rules: { time: [ { required: true, message: "请选择日期", trigger: "change", }, ], 复制代码
在表单中定义字段(直接后端给的字段)
//新增参数 queryParamset: { order: 1, time: undefined,//日期以及时间 title: undefined, content: undefined, emotion: undefined, emergency: undefined, risk: undefined, warning_value: undefined, warning: undefined, rs: undefined, area: undefined, field: undefined, zdtfsj: false, gfsj: false, qtxsj: false, warning_sync: false, ds: undefined, }, 复制代码
获取当前日期以及时间
//获取当前时间以及日期 getNowTime() { var now = new Date(); var year = now.getFullYear(); //获取年 var month = now.getMonth();//获取月 var date = now.getDate();//获取日 var hours = now.getHours();//获取小时 var minutes = now.getMinutes();//获取分钟 var seconds = now.getSeconds();//获取秒 month = month + 1; month = month.toString().padStart(2, "0"); date = date.toString().padStart(2, "0"); var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`; this.$set(this.queryParamset, "time", defaultDate);//赋值给表单里面定义的时间 }, 复制代码
时间实时刷新
在created
中定义一个时间戳,然后调用获取时间的方法,实现时间实时刷新
created() { setInterval(() => { this.getNowTime(); }, 500); },
作者:月__
链接:https://juejin.cn/post/7016609489411375112