Element日期选择组件搭配 Day.js 使用

常规Element日期选择组件

     <el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
        :shortcuts="shortcuts"
        :size="size"
      />

2：如果禁用时间是今天之后的日期无法选择,使用Day.js中的isBefore

             <el-form-item label="补卡日期" prop="time">
                <el-date-picker
                  v-model="form.time" type="date" placeholder="请选择"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledStartTime"
                />
              </el-form-item>
         
   <script setup lang="ts" name="Test">

        /* 日期无法选择今天以后的 */

        function disabledStartTime(date: Date) {
          const now = dayjs()
          return now.isBefore(date, 'date')
        }

    </script>

3：如果禁用时间是今天之前的日期无法选择,使用Day.js中的isAfter

function disabledStartTime(date: Date) {
  const now = dayjs()
  return now.isAfter(date, 'date')
}

4:如果有个选择日期的组件，旁边有按钮，按钮可以快速定位到当前时间，在当前时间的基础上进行增加时间，使用Day.js的add方法

实现步骤：

        1：首先定义一个日期选择组件，affectEnd是绑定的值

        

      <el-form-item label="选择时间" prop="affectEnd">
            <el-date-picker
              v-model="form.affectEnd"
              class="ele-fluid"
              placeholder="请选择时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="disabledStartTime"
              @change="handleDateChange"
            />
          </el-form-item>

        2：定义这四个按钮

        <template> 
        
          <el-form-item>
            <el-radio-group v-model="form.type" @change="handleChange">
              <el-radio
                v-for="item in dataTime"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        
        </template>

    <script lang="ts" setup>

          const dataTime = [
            {
              value: '1',
              label: '一个月'
            },
            {
              value: '2',
              label: '三个月'
            },
            {
              value: '3',
              label: '六个月'
            },
            {
              value: '4',
              label: '永久'
            }
          ];

    </script>
    

3:再写这个按钮上面的切换事件

        

 /** 定义时间 */ 
 const currentTime = ref(dayjs().format('YYYY-MM-DD')); 
 
    /** 按钮切换方法 */ 
   function handleChange(value) {
    if (value === '4') {
      form.affectEnd = '2099-05-21 23:59:59';
      return;
    }

    const currentDate = dayjs();

    switch (value) {
      case '1': // 一个月
        form.affectEnd = currentDate
          .add(1, 'month')
          .format('YYYY-MM-DD HH:mm:ss');
        break;
      case '2': // 三个月
        form.affectEnd = currentDate
          .add(3, 'month')
          .format('YYYY-MM-DD HH:mm:ss');
        break;
      case '3': // 六个月
        form.affectEnd = currentDate
          .add(6, 'month')
          .format('YYYY-MM-DD HH:mm:ss');
        break;
    }
  }

  /* 这个方法是如果点击了按钮选中时间，但是再次点击日期组件手动选择时间后清空高亮的按钮 */
  const handleDateChange = () => {
    form.type = '';
      };