iview 中日期选择器限制选择区间的方法

2 篇文章 0 订阅
1 篇文章 0 订阅

iview 中日期选择器限制选择区间的方法

<template>
	<div>
        <Date-picker v-model="startTime" 
                     :options="startTimeOption" 
                     @on-change="onStartTimeChange"
                     type="date" 
                     placeholder="选择开始日期">
         </Date-picker>
        <Date-picker  v-model="endTime"  
                     :options="endTimeOption"   
                     @on-change="onEndTimeChange" 
                     type="date"
                     placeholder="选择结束日期" >
        </Date-picker>
    </div>
</template>
<script>
    import moment from 'moment'
    mounted(){
        this.startTime = moment().subtract(3, "days").format("YYYY-MM-DD");
        this.endTime = moment().format("YYYY-MM-DD");
        let vm = this;
        this.startTimeOption = {
            disabledDate(startTime) {
                 return (
                     startTime > new Date(vm.endTime) || startTime > Date.now()
                 );
             }
        };
        this.endTimeOption = {
            disabledDate(endTime) {
                return (
                    endTime < new Date(vm.startTime)
                );
            }
        };
    },
    data(){
        return{
            startTime :"",
            endTime:"",
            startTimeOption: {},
            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>	
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值