这篇文章主要介绍了日期组件的范围控制和使用，使用两个日期选择框。

HTML文件

1
2
3
4
5
6
7
8
9
<Row>
    <Col span="11">
        <DatePicker :options="sTim" v-model="startTime"></DatePicker>
    </Col>
    <Col span="2" style="text-align:center">-</Col>
    <Col span="11">
    	<DatePicker :options="eTim" v-model="endTime"></DatePicker>
    </Col>
</Row>

监听日期参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// sTim和eTim要在data中定义为空对象
watch: {
    "startTime": function (val) {
        if(!val) return this.eTim = {} // 如果没有值就清空限制
        this.eTim = {
            disabledDate: date => {
                let start = val? new Date(val).valueOf(): ''
                return date && (date.valueOf() < start)
            }
        }
    },
    "endTime": function (val) {
        if(!val) return this.sTim = {} // 如果没有值就清空限制
        this.sTim = {
            disabledDate: date => {
                let end = val? new Date(val).valueOf(): ''
                return date && (date.valueOf() > end)
            }
        }
    }
},

或者简化为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
watch: {
    "startTime": function (val) {
        this.dateRange('eTim', val)
    },
    "endTime": function (val) {
        this.dateRange('sTim', val, 1)
    }
},
methods: {
    dateRange: function (option, val, type) {
        if (!val) return this[option] = {} // 如果没有值就清空限制
        this[option] = {
            disabledDate: date => {
                let end = val ? new Date(val).valueOf() : ''
                return date && type ? (date.valueOf() > end) : (date.valueOf() < end)
            }
        }
    },
}