码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-30 13:10:27      阅读:17      评论:0      收藏:0      [点我收藏+]

标签:line   ble   转换   超过   element   ret   tst   使用   color   

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>

 

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

标签:line   ble   转换   超过   element   ret   tst   使用   color   

原文地址:https://www.cnblogs.com/liuyongfa/p/13212746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!