两个日期选择器的联动

最新推荐文章于 2025-03-17 16:51:49 发布

姜来前端程序媛

最新推荐文章于 2025-03-17 16:51:49 发布

阅读量1k

点赞数 1

分类专栏： Vue el 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_74285634/article/details/131656656

版权

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

3 篇文章

订阅专栏

让两个独立的日期选择器产生联动：（我这里用的是elmentUI的 DatePicker日期选择器）

效果展示：

方案1：

<el-col :span="12">
    <el-form-item label="客服单结单时间">
        <el-date-picker v-model="form.woCompletionTimeStart" placeholder="开始时间" align="right" type="date"
                :picker-options="startPickerOptions" style="float: left; width: 181.5px;">
        </el-date-picker>
        <div class="timeLine"></div>
        <el-date-picker v-model="form.woCompletionTimeEnd" placeholder="结束时间" align="right" type="date"
                :picker-options="endPickerOptions" style=" float: right;width: 181.5px;">
        </el-date-picker>
    </el-form-item>
</el-col>

computed: {
    startPickerOptions() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.woCompletionTimeEnd) {
            return time.getTime() > new Date(self.form.woCompletionTimeEnd).getTime()
            // new Date(self.form.woCompletionTimeEnd).getTime() 结束时间
            // Date.now() - 8.64e7 // 当前时间的前一天
            // time.getTime()  // 任意时间
          }
        }
      }
    },
    endPickerOptions() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.woCompletionTimeStart) { // 如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.form.woCompletionTimeStart).getTime() > time.getTime()
          }
        }
      }
    }
  },

方案2：两个日期选择器的联动-简书

<el-form-item label="开始日期:">
  <el-date-picker
     v-model="form.startDate"
     type="date"
     placeholder="选择日期"
     style="width: 100%"
     value-format="yyyy-MM-dd"
     :picker-options="startPickerOptions"
   />
</el-form-item>
<el-form-item label="结束日期:">
  <el-date-picker
    v-model="form.endDate"
    type="date"
    placeholder="选择日期"
    style="width: 100%"
    value-format="yyyy-MM-dd"
    :picker-options="endPickerOptions"
  />
</el-form-item>

  computed: {
    startPickerOptions() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.endDate) { // 如果结束时间不为空，则小于结束时间
            return new Date(self.form.endDate).getTime() < time.getTime() || time.getTime() < Date.now() - 8.64e7
          } else {
            return time.getTime() < Date.now() - 8.64e7 // 开始时间不选时，结束时间最大值大于等于当天
          }
        }
      }
    },
    endPickerOptions() {
      const self = this
      return {
        disabledDate(time) {
          if (self.form.startDate) { // 如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.form.startDate).getTime() - 8.64e7 > time.getTime()
          } else {
            return time.getTime() < Date.now() - 8.64e7// 开始时间不选时，结束时间最大值大于等于当天
          }
        }
      }
    }
  }