Element用两个type="date"的DatePicker实现类似type="daterange"的功能

Posted 2020-12-13

GitHub地址：https://github.com/liuyongfa/DatePickerRange.git

Element当type="daterange"的时候，选择器是第一次点选开始时间，第二次点选结束时间，而不是第一个选择器是开始，第二个选择器是结束。第一次用很容易去在第一个时间选择器里试点一下，然后再去在这第一个里选开始时间，结果就选择了一个时间范围。其实知道了使用方法之后还好。但是很多人用户表示莫名其妙不会用。

然后可以用两个type="date"的DatePicker实现类似type="daterange"的功能。第一个点几次都是开始，第二个点几次都是结束。开始时间里超过结束时间的不能选，结束时间里比开始时间还古老不能选。

使用：

<template>
    <DatePickerRange :values="array" :inputWidth="150"/>
</template>

<script>
import DatePickerRange from ‘@/components/DatePickerRange.vue‘
export default {
    components: {
        DatePickerRange
    },
    data() {
        return {
            array:[]
        }
    }
}
</script>

代码：

<template>
  <div style="display: inline-block">
    <el-date-picker
      :style="{width: inputWidth + ‘px‘}"
      v-model="values[0]"
      align="right"
      type="date"
      placeholder="选择日期1"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions1"
    ></el-date-picker>
    <span style="padding: 0 3px; color: #999999">-</span>
    <el-date-picker
      :style="{width: inputWidth + ‘px‘}"
      v-model="values[1]"
      align="right"
      type="date"
      placeholder="选择日期2"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions2"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  props: {
    values: {
      type: Array,
      default: []
    },
    inputWidth: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      gmtString: " GMT+0800",
      pickerOptions1: {
        disabledDate: date => {
          // 因为value-format= "yyyy-MM-dd"，要和date比较就要转换，转换之后是UTC时间，而date是本地时区的时间
          // 如果没有设置alue-format= "yyyy-MM-dd"，则可以直接比较：return this.values[1] ? date > this.values[1]: false;
          return this.values[1]
            ? date > new Date(this.values[1] + this.gmtString)
            : false;
        }
      },
      pickerOptions2: {
        disabledDate: date => {
          return this.values[0]
            ? date < new Date(this.values[0] + this.gmtString)
            : false;
        }
      }
    };
  },
  created() {
    let gmt = new Date().getTimezoneOffset() / 60;
    this.gmtString = gmt <= 0 ? " GMT+" + -gmt : " GMT-" + gmt;
  },
};
</script>