一、默认时间选择器

实现思路：

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() + 1if (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 + '-' + monthreturn time
};

1.3效果展示