Element-UI 两个日期选择器联动选择日期

ゞ浴缸里的玫瑰 2022-09-16 14:17 691阅读 0赞

Element-UI 两个 日期选择器 联动选择日期

<template>
      <div>
        <div class="timesel">
          <span>开始时间：</span>
          <el-date-picker
            v-model="formL.startTime"
            type="date"
            placeholder="选择日期"
            :pickerOptions="startPickerOptions"
            class="choiceTime"
            size="small"
          >
          </el-date-picker>
        </div>
        <div class="timesel">
          <span>结束时间：</span>
          <el-date-picker
            v-model="formL.endTime"
            type="date"
            placeholder="选择日期"
            :pickerOptions="endPickerOptions"
            class="choiceTime"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          formL: { 
            startTime: "",
            endTime: "",
          },
        };
      },
      computed: { 
        startPickerOptions() { 
          const that = this;
          return { 
            disabledDate(time) { 
              if (that.formL.endTime) { 
                return (
                  time.getTime() > Date.now() ||
                  time.getTime() > new Date(that.formL.endTime).getTime()
                );
              }
              return time.getTime() > Date.now(); //实现1效果
            },
          };
        },
        endPickerOptions() { 
          const that = this;
          return { 
            disabledDate(time) { 
              if (that.formL.startTime) { 
                return (
                  time.getTime() > Date.now() ||
                  time.getTime() < new Date(that.formL.startTime).getTime() - 8.64e7
                );
              }
              return time.getTime() > Date.now(); //实现1效果
            },
          };
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .timesel { 
      white-space: nowrap;
      display: inline-block;
    
      .el-input { 
        width: 160px;
      }
    }
    .choiceTime { 
      display: inline-block;
    }
    </style>