前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element 中时间选择器限定选择时间在某一个月内

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

作者头像
越陌度阡
发布2021-03-05 11:21:32
1.5K0
发布2021-03-05 11:21:32
举报
代码语言: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;

        }

    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/03/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档