阅读 126

Element UI 日期时间选择器默认获取当前日期以及时间

实现页面

image.png 要求在点击新增时,获取到当天的日期以及时间,并且在用户填完信息后,提交时的时间是最新的时间,这就要求时间要实时更新,国庆七天假期一个代码都没写的我,瞬间感觉头疼。。。

表单提交

使用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

文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐