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

4,749 阅读1分钟

实现页面

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);
  
  },

OK,结束,最后在表单提交时,提交的时间就是用户填完表单,点击提交时的最新时间,最后感谢这位大佬给的文章