关于iview的DatePicker组件禁用时间的问题


#1

两个日期选择框,设置起止时间,时间可选范围是6个小时,譬如我选开始时间选择2019-04-01 00:00:00,结束时间可选只能是2019-04-01 00:00:00至2019-04-01 06:00:00,有一个问题就是当我开始时间选择2019-04-01 22:00:00时,第二个日期选择器可选时间范围是2019-04-01 00:00:00 至 2019-04-01 04:00:00,问题就是我无法选择2019-04-01 22:00:00 至 2019-04-01 23:59:59 中的任意一时间,同理我先选第二个选择框设置截止时间,设置开始时间时也会有同样的问题。

<template>
  <div id="app">
    <Row>
      <Col span="12">
        <DatePicker 
        type="datetime" 
        v-model="pointDTO.startTime" 
        :options="startOptions" 
        placeholder="Select date" 
        style="width: 200px"></DatePicker>
      </Col>
      <Col span="12">
        <DatePicker 
        type="datetime" 
        v-model="pointDTO.endTime" 
        :options="endOptions" 
        placeholder="Select date" 
        style="width: 200px"></DatePicker>
      </Col>
    </Row>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      pointDTO: {
        startTime: '',
        endTime: '',
      }
    }
  },
  components: {

  },
  methods: {
    getMsg(msg) {
      alert(msg);
    }
  },
  computed: {
    startOptions() {
      const THIS = this;
      return {
        disabledDate(date) {
          const dateVal = date.valueOf();
          if (!THIS.pointDTO.endTime) {
            return dateVal > Date.now();
          }

          return dateVal > THIS.pointDTO.endTime.valueOf() || dateVal < THIS.pointDTO.endTime.valueOf() - 21600000;
        },
      };
    },
    endOptions() {
      const THIS = this;
      return {
        disabledDate(date) {
          const dateVal = date.valueOf();

          if (!THIS.pointDTO.startTime) {
            return dateVal > Date.now();
          }

          return dateVal < THIS.pointDTO.startTime.valueOf() || dateVal > THIS.pointDTO.startTime.valueOf() + 21600000;
        },
      };
    },    
  },
}
</script>

#2

我断点时发现 disabledDate(date) 这个date参数是从每天的00:00:00,没有精确到小时,所以无法实现小时的比较?


image