el-date-picker 通常都是时间选择器获取焦点的时候获取当前时间,现在的需求是表单进入时间框默认当前年月日分秒,并且可以再次获取选中时间。

下面是我的解决办法,希望可以帮到你们!

1.首先要v-model绑定时间选择器值

                <el-date-picker
                    v-model="logForm.date"
                    type="datetime"
                    style="width:200px"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    defaule-value="dafaultValue"
                  >
                  </el-date-picker>

2.在Date方法中首先要使用new Date获取当前时间 其次是时分秒 最后进行拼接需要的格式 (比如yyyy-MM-dd 或者是yyyy-MM-dd HH:mm:ss 我这边是拼接的获取的是当前年月日时分秒) 

3.最后一步使用 this.$set(target, key, value)

target:要更改的数据源(可以是数据对象或者数组)
key:要更改的具体数据
value :重新赋的值

this.$set定义:(实际上向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性)

Date(){
          const nowDate = new Date();
          const date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
            hours: nowDate.getHours(),
            minutes: nowDate.getMinutes(),
            seconds: nowDate.getSeconds()
          };

          const newmonth = date.month > 10 ? date.month : "0" + date.month;
          const newday = date.date > 10 ? date.date : "0" + date.date;
          const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
          const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
          const value =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;

          this.$set(this.logForm, "date", value);

}

运用以上代码 就可以实现获取到当前时间并进行再次改变时间数据

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐