标签：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
