ivew 日期禁止选择options用法

2019-05-13  本文已影响0人  blank的小粉er

案列

需求: 结束日期不能小于开始日期

<template>
    <div class="con">
        <div class="main">
            <Row>
                <Col span="12">
                    <date-picker
                        type="datetime"
                        v-model="startTime"
                        placeholder="请选择开始时间"
                        :options="startTimeOption"
                        @on-change="onStartTimeChange"
                    ></date-picker>
                </Col>
                <Col span="12">
                    <date-picker
                        type="datetime"
                        v-model="endTime"
                        placeholder="请选择结束时间"
                        :options="endTimeOption"
                        @on-change="onEndTimeChange"
                    ></date-picker>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            startTime: "",
            endTime: "",
            startTimeOption:{ disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
            endTimeOption:{}
            
        };
    },
    methods: {

        onStartTimeChange(startTime, type) {
            this.endTimeOption = {
                disabledDate(endTime) {
                    return (
                        endTime < new Date(startTime) 
                    );
                }
            };
        },

        onEndTimeChange(endTime, type) {
            this.startTimeOption = {
                disabledDate(startTime) {
                    return (
                        startTime > new Date(endTime) || startTime > Date.now()
                    );
                }
            };
        }
    }, 
};
</script>
上一篇 下一篇

猜你喜欢

热点阅读