概览:vue使用element组件,需要给时间选择器设置默认值,场景一:默认时间选择器,场景二:时间范围选择器,开始时间和结束时间。
一、默认时间选择器
实现思路:
element组件的v-model绑定的数据变化,则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。
实现代码:
1.1布局:
<div class="search_right">
<div class="echart1_titleBox">时间:</div>
<div class="searchInnerBox">
<el-date-picker
v-model="data.crewOverViewTime"
type="date" value-format="YYYY-MM-DD"
placeholder="请选择"
clearable
:default-value="new Date()"
@change="handleChangeTime"
/>
</div>
</div>
1.2逻辑:
/**
* 默认选中当前时间
*/
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {
// 获取当前月份
let nowMonth = date.getMonth() + 1;
// 获取当前是几号
let strDate = date.getDate();
// 添加分隔符“-”
let seperator = "-";
// 对月份进行处理,1-9月在前面添加一个“0”
if (nowMonth >= 1 && nowMonth <= 9) {
nowMonth = "0" + nowMonth;
}
// 对月份进行处理,1-9号在前面添加一个“0”
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期
let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
return nowDate;
};
1.3效果展示
二、时间范围选择器
实现思路:
element组件的v-model绑定数据,在组件挂载的生命周期onMounted()进行赋值。注意:时间范围选择器的v-modle绑定的动态数据data是一个数组,数组索引=0是开始时间,数组索引=1是结束时间。
实现代码:
1.1页面:
<div class="searchTimerBox">
<div class="searchTimerBox_titleBox">时间:</div>
<div class="searchInnerBox">
<el-date-picker
v-model="data.valueTwoTimer"
type="monthrange"
value-format="YYYY-MM"
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
:unlink-panels="true"
@change="handleChangeTime"
/>
</div>
</div>
1.2逻辑:
/**
* 默认选中此月往前推的12个月
*/
const getTimerPiker = () => {
let newData = new Date()
let seperator = "-";
let nowMonth = newData.getMonth() + 1
if (nowMonth >= 1 && nowMonth <= 9) {
nowMonth = "0" + nowMonth;
}
nowMonth = newData.getFullYear() + seperator + nowMonth;
const beforeMonth = minDate(newData, 11)
data.valueTwoTimer.push(beforeMonth)
data.valueTwoTimer.push(nowMonth)
}
//获取当前日期的 前n个月
const minDate = (_nowDate,_latestMonth) => {
_nowDate.setMonth(_nowDate.getMonth() - _latestMonth)
let year = _nowDate.getFullYear();
let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');
let time = year + '-' + month
return time
};
1.3效果展示文章来源:https://www.toymoban.com/news/detail-623568.html
文章来源地址https://www.toymoban.com/news/detail-623568.html
到了这里,关于element时间选择器的默认值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!