日期选择器：年 月 日 动态切换显示

1. 组件样式部分（elementUI）实现

      <el-row>
        <el-col :span="10">
          <el-button-group>
            <el-button :class="{ 'is-active': selectedButton === 'year' }" @click="changeToYearPicker">年</el-button>
            <el-button :class="{ 'is-active': selectedButton === 'month' }" @click="changeToMonthPicker">月</el-button>
            <el-button :class="{ 'is-active': selectedButton === 'day' }" @click="changeToDayPicker">日</el-button>
          </el-button-group>
          <el-date-picker v-model="startDate" :picker-options="startPickerOptions" :type="startPickerType"  @change="handleStartDateChange"
            placeholder="开始日期" :editable="false" style="margin-left: 20px;">
          </el-date-picker>
          <el-date-picker v-model="endDate" :picker-options="endPickerOptions" :type="endPickerType"   @change="handleEndDateChange"
           placeholder="结束日期" :editable="false">
          </el-date-picker>
        </el-col>
        <el-col :span="14">
          <!-- 首页 搜索 -->
          <el-form :inline="true" :model="queryForm" ref="queryForm0" class="query-form">
            <el-form-item label="科室">
              <el-select v-model="queryForm.department" placeholder="请选择" clearable>
                <el-option v-for="item in departmentinfoList" :label="item.label" :value="item.value" :key="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitQuery">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

2. 方法的实现

2.1 点击年月日按钮的切换日期选择器显示状态

    //年
   changeToYearPicker() {
      this.startPickerType = 'year';
      this.endPickerType = 'year';
      this.selectedButton = 'year'; // 更新选中按钮状态
      // 对应处理逻辑，比如点击按钮切换为年选择器
    },
     //月
    changeToMonthPicker() {
      this.startPickerType = 'month';
      this.endPickerType = 'month';
      this.selectedButton = 'month'; // 更新选中按钮状态

    },
    //日
    changeToDayPicker() {
      this.startPickerType = 'date';
      this.endPickerType = 'date';
      this.selectedButton = 'date'; // 更新选中按钮状态

    },

2.2 点击日期的时候处理日期格式化

处理之前：（Wed May 01 2024 00:00:00 GMT+0800 (中国标准时间)）

处理结果：年： 2024， 月; 2024-02, 日; 2024-10-23

//开始日期
handleStartDateChange(value) {
  if (this.startPickerType === 'year') {
    this.startDate = value.getFullYear().toString(); 
    // 如果 startPickerType 是 'year'，则获取选择的年份
    this.dateTypeList = '1'
  } else if (this.startPickerType === 'month') {
    this.startDate = `${value.getFullYear()}-${(value.getMonth() + 1).toString().padStart(2, '0')}`;
    // 如果 startPickerType 是 'month'，则获取年月的格式：YYYY-MM
    this.dateTypeList = '4'
  } else {
    this.startDate = value.toISOString().substring(0, 10);
    // 其他情况，直接获取完整的年月日数据：YYYY-MM-DD
    this.dateTypeList ='365'
  }
},
    //结束日期
handleEndDateChange(value) {
  if (this.endPickerType === 'year') {
    this.endDate = value.getFullYear().toString(); 
    this.dateTypeList = '1'
  } else if (this.endPickerType === 'month') {
    this.endDate = `${value.getFullYear()}-${(value.getMonth() + 1).toString().padStart(2, '0')}`;
    this.dateTypeList = '4'
  } else {
    this.endDate = value.toISOString().substring(0, 10);
    this.dateTypeList ='365'
  }
},

2.3 重置按钮

    resetForm() {
      this.$refs.queryForm0.resetFields();
      this.queryForm = {
        department: '',
      },
      this.startDate = ''
      this.endDate = ''
      this.dateTypeList = ''
      this.dateType = ''
    },