eclipse 网站开发过程,做网站官网,永州商城网站建设,高端网站设计电话概览#xff1a;vue使用element组件#xff0c;需要给时间选择器设置默认值#xff0c;场景一#xff1a;默认时间选择器#xff0c;场景二#xff1a;时间范围选择器#xff0c;开始时间和结束时间。
一、默认时间选择器
实现思路#xff1a; element组件的v-model绑…概览vue使用element组件需要给时间选择器设置默认值场景一默认时间选择器场景二时间范围选择器开始时间和结束时间。
一、默认时间选择器
实现思路 element组件的v-model绑定的数据变化则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。 实现代码
1.1布局
div classsearch_rightdiv classechart1_titleBox时间/divdiv classsearchInnerBoxel-date-picker v-modeldata.crewOverViewTime typedate value-formatYYYY-MM-DDplaceholder请选择 clearable :default-valuenew Date()changehandleChangeTime //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 classsearchTimerBoxdiv classsearchTimerBox_titleBox时间/divdiv classsearchInnerBoxel-date-picker v-modeldata.valueTwoTimer typemonthrange value-formatYYYY-MMrange-separator到 start-placeholder开始时间 end-placeholder结束时间:unlink-panelstrue changehandleChangeTime //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效果展示
