Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

}

运用以上代码就可以实现获取到当前时间并进行再次改变时间数据文章来源地址https://www.toymoban.com/news/detail-513706.html

到了这里，关于Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！