Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择
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);
}
运用以上代码 就可以实现获取到当前时间并进行再次改变时间数据
更多推荐
已为社区贡献4条内容
所有评论(0)