Element 中时间选择器限定选择时间在某一个月内

代码语言：javascript复制

<template>
    <div>
        <el-date-picker
            type="date"
            class="filter-item"
            placeholder="投放日期"
            value-format="yyyy-MM-dd"
            v-model="queryParam.drop_day"
            :picker-options="pickerOptionsForDrop"
        />
        <el-date-picker
            type="date"
            class="filter-item"
            placeholder="支付日期"
            value-format="yyyy-MM-dd"
            v-model="queryParam.pay_day"
            :picker-options="pickerOptionsForPay"
        />   
    </div>

</template>

<script>

export default {
    name: "Index",
    data() {
        return {
            // 投放时间配置选项
            pickerOptionsForDrop: {},
            // 支付时间配置选项
            pickerOptionsForPay: {},
            // 动态绑定的值 
            queryParam:{
                // 投放日期
                drop_day:"",
                // 充值日期
                pay_day:""
            }
        };
    },

    created(){

        // 获取路由传参，即要查询的当前月份，形如:2019-09
        let currentDate= this.$route.params.month;
        let year = currentDate.split('-')[0];
        let month = currentDate.split('-')[1];
        let splitMonth = month.split('');

        // 投放时间范围 (查询月份的第一天 至 查询月份的最后一天)
        this.pickerOptionsForDrop.disabledDate = function(obj){
            // 起始时间
            let monthBegin;
            if(month == '10'){
                monthBegin = '09'
            }else{
                monthBegin = splitMonth[0] '' (splitMonth[1]-1);
            };
            let dateBegin = new Date(year,monthBegin,'01');
            let timeBegin = dateBegin.getTime();

            // 当前时间
            let currentTime = obj.getTime();

            // 结束时间
            let dateEnd = new Date(year,month,'01');
            let timeEnd = dateEnd.getTime()-3600 * 1000 * 24;

            // 时间选择范围
            return currentTime > timeEnd || currentTime<timeBegin;

        };

        // 充值时间范围(查询月份的第一天 至 昨天)
        this.pickerOptionsForPay.disabledDate = function(obj){
            // 起始时间
            let monthBegin;
            if(month == '10'){
                monthBegin = '09'
            }else{
                monthBegin = splitMonth[0] '' (splitMonth[1]-1);
            };
            let dateBegin = new Date(year,monthBegin,'01');
            let timeBegin = dateBegin.getTime();

            // 当前时间
            let currentTime = obj.getTime();
            
            // 结束时间
            let timeEnd = Date.now() -3600 * 1000 * 24;
            
            // 时间选择范围
            return currentTime > timeEnd || currentTime<timeBegin;

        }

    }
}

element

0 人点赞