element时间选择器的默认值

概览：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效果展示