vue3 日期选择组件，年，月 ，日，时

<script setup> import { reactive } from 'vue'; const data = reactive({ currentSwitch: "day", dateType: "day", valueTwoTimer: [], // 初始化为空数组 }); const myType = [ { label: "年", value: "year" }, { label: "月", value: "month" }, { label: "日", value: "day" }, { label: "时", value: "time" }, ]; const setTimeRange = (time) => { return time.getTime() >= Date.now() - 8.64e6; }; const handleClickBtn = (_index) => { data.currentSwitch = myType[_index].value; // 直接使用 value data.dateType = myType[_index].value; // 这里可能不需要单独设置 dateType，除非有特定用途 data.valueTwoTimer = data.currentSwitch === 'year' ? ['', ''] : []; }; const handleClickLook = () => { console.log("点了查看按钮"); }; </script> <template>

<div class="myTimeRager_home">  
  <div class="switchBox">  
    <div class="typeChange-box">  
      <span> </span>  
    </div>  
    <div class="leftBox">  
      <div  
        class="yearBtn"  
        :class="{ isActive: data.currentSwitch === 'year' }"  
        @click="handleClickBtn(0)"  
      >  
        年  
      </div>  
      <div  
        class="yearBtn"  
        :class="{ isActive: data.currentSwitch === 'month' }"  
        @click="handleClickBtn(1)"  
      >  
        月  
      </div>          
      <div  
        class="yearBtn"  
        :class="{ isActive: data.currentSwitch === 'day' }"  
        @click="handleClickBtn(2)"  
      >  
        日  
      </div>  
      <div  
      class="yearBtn"  
      :class="{ isActive: data.currentSwitch === 'time' }"  
      @click="handleClickBtn(3)"  
    >  
      时  
    </div>
    </div>  
    <div class="search_right">  
      <template v-if="data.currentSwitch === 'year'">  
        <el-date-picker  
          v-model="data.valueTwoTimer[0]"  
          type="year"  
          format="YYYY"  
          value-format="YYYY"  
          placeholder="开始时间"  
          style="width: 100px"  
        ></el-date-picker>  
        <div style="margin: 0px 15px 0px 30px">-</div>  
        <el-date-picker  
          v-model="data.valueTwoTimer[1]"  
          type="year"  
          format="YYYY"  
          value-format="YYYY"  
          placeholder="结束时间"  
          style="width: 100px; margin-right: 20px"  
        ></el-date-picker>  
      </template>  
      <template v-else-if="data.currentSwitch === 'month'">  
        <el-date-picker  
          v-model="data.valueTwoTimer"  
          type="monthrange"  
          start-placeholder="开始时间"  
          end-placeholder="结束时间"  
          value-format="YYYY-MM"  
        ></el-date-picker>  
      </template>  
      <template v-else-if="data.currentSwitch === 'day'">  
        <el-date-picker  
          v-model="data.valueTwoTimer"  
          type="daterange"  
          start-placeholder="开始时间"  
          end-placeholder="结束时间"  
          value-format="YYYY-MM-DD"  
        ></el-date-picker>  
      </template>
         
      <template v-else>  
        <el-date-picker  
          :disabledDate="setTimeRange"  
          start-placeholder="开始时间"  
          end-placeholder="结束时间"  
          v-model="data.valueTwoTimer"  
          type="datetimerange"  
          range-separator="-"  
          value-format="YYYY-MM-DD HH"  
          unlink-panels  
        ></el-date-picker>  
      </template>  
    </div>  
    <div class="rightBox">  
      <el-button class="hdtbutton look" @click="handleClickLook">  
        查询  
      </el-button>  
    </div>  
  </div>  
</div>  

</template> <style scoped> .myTimeRager_home { width: 100%; height: 100%; } .myTimeRager_home .switchBox { width: 60%; height: 4.8%; margin-bottom: 10px; font-size: calc(100vw * 16 / 1920); display: flex; align-items: center; } .myTimeRager_home .switchBox .isActive { font-weight: bold; color: #fff; background: #4279ca; } .myTimeRager_home .switchBox .leftBox { width: 24%; height: 100%; display: flex; } .myTimeRager_home .switchBox .leftBox .yearBtn { width: 36px; height: 100%; padding: 0px 10px; margin-right: 7px; color: #4279ca; background-color: #ebf0f5; border: 1px solid #fff; border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .myTimeRager_home .switchBox .leftBox .yearBtn:hover { background-color: #d6e4f2; /* 可选：添加悬停效果 */ } .myTimeRager_home .switchBox .search_right { width: 53%; height: 100%; display: flex; align-items: center; border-radius: 6px; border: 1px solid rgba(234, 243, 253, 1); background-color: rgba(247, 248, 250, 1); flex: 1; } .myTimeRager_home .switchBox .search_right .el-date-editor { --el-date-editor-datetimerange-width: 290px; .el-input__inner { text-align: center; } } .myTimeRager_home .switchBox .search_right .el-date-editor { width: 400px !important; --el-input-bg-color: rgba(247, 248, 250, 1); --el-input-border-color: rgba(247, 248, 250, 1); --el-input-focus-border-color: rgba(247, 248, 250, 1); --el-input-hover-border-color: rgba(247, 248, 250, 1); } .myTimeRager_home .switchBox .rightBox .hdtbutton { width: 104px; height: 39px; border-radius: 6px; padding: 0; display: inline-block; line-height: 39px; text-align: center; margin-left: 10 } </style>