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>