date-range 代码
<template>
<div class="range-wrapper">
<!-- <label>{{label}}</label>-->
<el-date-picker v-model="startDateTmp" :type="type" :editable=false :value-format="valueFormat" :picker-options="pickerOptionscreate" placeholder="选择日期" @change="change1" :size="size">
</el-date-picker>
<span class="sub">至</span>
<el-date-picker v-model="endDateTmp" :type="type" :editable=false :value-format="valueFormat" :picker-options="pickerOptionsend" placeholder="选择日期" @change="change2" :size="size">
</el-date-picker>
</div>
</template>
<script>
/**
* com-date-range
* @desc 时间范围选择器
*/
export default {
props: {
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
size: {
type: String,
default: 'small'
},
type: {
type: String,
default: 'date'
}
},
watch: {
startDate: {
handler: function(val, oldVal) {
this.startDateTmp = val
},
immediate: true
},
endDate: {
handler: function(val, oldVal) {
this.endDateTmp = val
},
immediate: true
}
},
computed: {
valueFormat: function () {
let format = 'yyyy-MM-dd'
if (this.type === 'month') {
format = 'yyyy-MM'
}
return format
},
},
data() {
let that = this;
return {
pickerOptionscreate: {
disabledDate(time) {
// 开始时间的禁用
return that.endDateTmp ? time.getTime() > new Date(that.endDateTmp).getTime() : false;
}
},
// 结束时间
pickerOptionsend: {
disabledDate(time) { // 结束时间的禁用
return time.getTime() < new Date(that.startDateTmp).getTime() - 8.64e7;
}
},
startDateTmp: '',
endDateTmp: ''
}
},
methods: {
change1: function(val) {
this.$emit('update:startDate', val)
},
change2: function(val) {
this.$emit('update:endDate', val)
},
}
}
</script>
<style scoped lang="scss">
.range-wrapper {
display: inline-block;
width: 100%;
line-height: 35px;
label {
color: #606060;
}
.sub {
margin: 0 10px;
}
::v-deep .el-date-editor.el-input {
width: calc(50% - 17px);
}
::v-deep .el-input__inner {
line-height: 32px!important;
}
}
</style>
使用
<date-range :startDate.sync="queryForm.startDateStr" :endDate.sync="queryForm.endDateStr"></date-range>