elementplus日期选择器中增加至今选项

点赞侠012024-03-19 16:43

日期组件的shortcuts快捷选项结合改变placeholder文字与样式实现

ini 复制代码

//         html


        <el-date-picker
          style="width: 240px"
          v-model="formUsed.nowDate"
          value-format="YYYY-MM-DD"
          :shortcuts="shortcuts"
          :class="formUsed.soFar ? 'time-now-picker' : ''"
          @change="changeDate"
          type="date"
          :placeholder="formUsed.soFar && item.showNow ? '至今' : '请选择日期'"
        />
        
        
 //        js
 
 
        let formUsed = ref({
            nowDate: new Date(),
            soFar: false // 是否选择至今选项
        })
        const shortcuts = [
          {
             text: '至今',
             value: () => {
             const date = new Date()
             // 改变formUsed.value.endDate会同时触发changeDate,所以这里等changeDate执行完在执行
             setTimeout(() => {
               formUsed.value.soFar = true
               formUsed.value.endDate = ''
             }, 0)
             return date
           }
         }
       ]
       
      let changeDate = () => {
        if (formUsed.value.soFar) {
          formUsed.value.soFar = false
        }
      }

//      css
    .time-now-picker {
      .el-input__icon {
        content: '至今';
      }
      .el-input__inner::placeholder {
        color: rgb(96, 98, 102);
      }
    }