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

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

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

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

                <el-date-pickerv-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);}

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

Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择相关推荐

php 年月日中文,php Date()函数输出中文年月日时分秒_PHP教程
今天我以一个简单的利用date()函数输出中文年月日时分秒引出关于大多数据用户在使用php date()函数的一些问题与date()函数一些参数详解. 当然了,PHP的DATE函数是不可能直接输出中文 ...
php日期格式化年月日时分秒,php Date()函数输出中文年月日时分秒
php Date()函数输出中文年月日时分秒今天我以一个简单的利用date()函数输出中文年月日时分秒引出关于大多数据用户在使用php date()函数的一些问题与date()函数一些参数详解. 当然 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

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

Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择相关推荐

最新文章

热门文章