vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

Posted zytcomeon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用相关的知识,希望对你有一定的参考价值。

需求场景如下:

  1. 指定起止日期,后选的将会受到先选的限制
  2. 不同的日期选择器,不过也存在关联关系

实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可。

 


标签中 <el-form-item label="统计起期" prop="contract_start_date" > <el-date-picker v-model="formInline.contract_start_date" placeholder="选择时间" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :default-value="startDate" :picker-options="pickerOptionsStart" style="width: 100%;" ></el-date-picker> </el-form-item>
picker-options="pickerOptionsStart"的设置
<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早于起始日期,选择了起始日期后,结束日期大于起始日期的不可选,置灰,
同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
//设定时间
console.log("----------now-----"+now)
var startDate=new Date(Date.UTC(now.getFullYear(),Mmonth,Dday));
console.log("----------startDate-----"+startDate
---------------------------------------------------

pickerOptionsStart: {
                    disabledDate: time => {
                        let endDateVal = this.formInline.contract_end_date;
                        if (endDateVal) {
                            return time.getTime() > new Date(endDateVal).getTime(); //选则的时间
                        }
                    }
                },
//结束时间
var endDate=new Date(Date.UTC(now.getFullYear(),"11","31"));
console.log("----------endDate-----"+endDate)
this.formInline.contract_end_date = endDate ;
------------------------------------------

pickerOptionsEnd: {
                    disabledDate: time => {
                        let beginDateVal = this.formInline.contract_start_date;
                        if (beginDateVal) {
                            return (
                                time.getTime() <
                                new Date(beginDateVal).getTime() //return 小于今天的时间,昨天,前天
                            );
                        }
                    }
                },

参考:https://www.cnblogs.com/zyz-s/p/11972599.html

 

 

atzhang

以上是关于vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用的主要内容,如果未能解决你的问题,请参考以下文章

$Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

vue +element 封装一个选人弹窗

vue-cli3和element做一个简单的登陆页面

Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统

Vue Element+Node.js开发企业通用管理后台系统

vue vue-element-ui组件 layout布局