1、两个时间段选择,后面的日期要大于前面的日期,使用的是iview组件
日期组件是提前写好的,所以在界面里面引用就好。下面是写好的日期组件
-
export default {
name: 'self-date-picker',
data() {
return {
selfStartDate: this.startDate,
selfEndDate: this.endDate,
selfType: this.type || 'date',
selfFormat: this.format || 'YYYY-MM-DD',
startTimeOption: {},
endTimeOption: {}
}
},
props: {
startDate: String,
endDate: String,
format: String, //type 为datetime时一定要传入format 格式为'YYYY-MM-DD','YYYY-MM-DD HH:mm:ss'
type: String
},
methods: {
//比较日期
onStartTimeChange(startTime) {
this.endTimeOption = {
disabledDate(endTime) {
return endTime < new Date(startTime)
}
}
if (moment(this.selfEndDate).isBefore(this.selfStartDate)) {
this.selfEndDate = this.selfStartDate
}
},
onEndTimeChange(endTime) {
this.startTimeOption = {
disabledDate(startTime) {
return startTime > new Date(endTime)
}
}
if (moment(this.selfEndDate).isBefore(this.selfStartDate)) {
this.selfEndDate = this.selfStartDate
}
}
},
watch: {
selfStartDate: function(newValue, oldValue) {
//每当selfStartDate的值改变则发送事件update:startDate , 并且把值传过去
if (newValue) {
this.$emit('update:startDate', moment(newValue).format(this.selfFormat))
} else {
this.$emit('update:startDate', newValue)
this.startTimeOption = {}
}
},
selfEndDate: function(newValue, oldValue) {
if (newValue) {
this.$emit('update:endDate', moment(newValue).format(this.selfFormat))
} else {
this.$emit('update:endDate', newValue)
this.endTimeOption = {}
}
},
startDate: {
handler(newValue, oldValue) {
this.selfStartDate = newValue
},
deep: true
},
endDate: {
handler(newValue, oldValue) {
this.selfEndDate = newValue
},
deep: true
}
}
}
.ivu-input{
height: 35px;
}
.ivu-input-icon-normal+.ivu-input {
padding-right: 14px;
}
2、界面上的日期引用代码如下:
HTML:
js:
//引入日期组件
import selfDatepicker from '@/components/selfDatepicker.vue'
export default {
components: {
'self-date-picker': selfDatepicker,
Pagination
},
data() {
return {
startDate: '',
endDate: '',
}}
}