美文网首页
ivew 日期禁止选择options用法

ivew 日期禁止选择options用法

作者: blank的小粉er | 来源:发表于2019-05-13 16:57 被阅读0次

案列

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

<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>

相关文章

网友评论

      本文标题:ivew 日期禁止选择options用法

      本文链接:https://www.haomeiwen.com/subject/hojraqtx.html