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>