element-ui 时间选择加限制

最新推荐文章于 2024-07-01 15:44:31 发布

咕噜咕噜的车轮向前

最新推荐文章于 2024-07-01 15:44:31 发布

阅读量1.2k

点赞数 1

分类专栏：开发过程总结文章标签： element-ui vue 时间限制

本文链接：https://blog.csdn.net/zhongmei121/article/details/83506529

版权

开发过程总结专栏收录该内容

66 篇文章 1 订阅

订阅专栏

组件里的代码（HTML代码）添加限制:picker-options="pickerOptions0"：

<div>
            <span class="demonstration">起止时间：</span>
            <el-date-picker
                v-model="startTime"
                type="month"
                size="small"
                value-format="yyyyMM"
                format="yyyy-MM"
                placeholder="开始时间"
                :picker-options="pickerOptions0">
            </el-date-picker>
            至
            <el-date-picker
                v-model="endTime"
                type="month"
                size="small"
                value-format="yyyyMM"
                format="yyyy-MM"                
                placeholder="结束时间"
                :picker-options="pickerOptions1">
            </el-date-picker>
            <el-button size="small" type="primary" @click="queryForTime">查询</el-button>
          </div>

script（vue实例）里面的代码，记的var oper = new Vue（{}），因为里面用到oper，

这个是限制：开始时间不能大于结束时间，结束时间不能小于开始时间

<script>
   var oper =  new Vue({
    el: '#operateDiv',
    data: {               
        startTime:'',//开始时间
        endTime:'',//结束时间
        pickerOptions0:{
            disabledDate(time) {
                if(typeof(oper.endTime)===undefined||oper.endTime===''){
                    return time.getTime() > Date.now();                    
                }else{
                    var sta = oper.endTime.substring(0,4)+'/'+oper.endTime.substring(4,6)+'/01'
                    return time.getTime() > new Date(sta).getTime() || time.getTime() > Date.now();
                }                
          }},
          pickerOptions1:{
            disabledDate(time) {
                if(typeof(oper.startTime)===undefined||oper.startTime===''){
                    return time.getTime() > Date.now();                    
                }else{
                    var sta = oper.startTime.substring(0,4)+'/'+oper.startTime.substring(4,6)+'/01'
                    return time.getTime() < new Date(sta).getTime() || time.getTime() > Date.now();
                }                
          }},
    },
})

运行结果：