关于两个时段的日期处理

1、两个时间段选择，后面的日期要大于前面的日期，使用的是iview组件

日期组件是提前写好的，所以在界面里面引用就好。下面是写好的日期组件

<template>

<div class="date-box">

<DatePicker :type="selfType" placeholder="请选择日期" v-model="selfStartDate" :options="startTimeOption" @on-change="onStartTimeChange" style="height:35px !important;width:auto;" :editable="false"></DatePicker>

<span>-</span>

<DatePicker :type="selfType" v-model="selfEndDate" :options="endTimeOption" @on-change="onEndTimeChange" placeholder="请选择日期" style="height:35px !important;width:auto;" :editable="false"></DatePicker>

</div>

</template>

<script>

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

}

}

}

</script>

<style>

.ivu-input{

height: 35px;

}

.ivu-input-icon-normal+.ivu-input {

padding-right: 14px;

}

</style>

2、界面上的日期引用代码如下：

HTML：

<self-date-picker :startDate.sync="startDate" :endDate.sync="endDate" :format="'YYYY-MM-DD hh:mm:ss'"></self-date-picker>

js：

//引入日期组件

import selfDatepicker from '@/components/selfDatepicker.vue'

export default {

components: {

'self-date-picker': selfDatepicker,

Pagination

},

data() {

return {

startDate: '',

endDate: '',

}}

}