element el-date-picker 插件设置显示默认开始时间和结束时间
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
在开发过程中可能根据需要设置一个默认的时间段,在网上看了很多相关的信息,大多数都显得很笼统并且麻烦,研究了一下el-date-picker 插件的属性,发现了一个比较简单的方法,来跟大家分享一下。
1.需求分析
当用户打开某一个需要查询数据的页面时,插件默认显示上一个月的时间,如当前三月则需要显示二月份:
考虑到每一个月的天数不一定,但是每一个月都是从一号开始,所以只要终止日期小于下一个月1号就可以满足需求,所以最后效果可以为这样:
前提是先声明后端查询时需要返回包括开始时间,但不包括结束时间
2.分析el-date-picker插件的v-model
假设当前我的插件为如下代码:
<el-date-picker
v-model="date"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small">
</el-date-picker>
注:这里date的定义为getdate:[]
,定义为getdate:''
,无法实现
当选择好一个时间后,在日志里打印这个date(console.log(this.date))可以在控制台看到如下数据:
可以看到插件绑定的对象date是一个数组,所以我们直接指定他的元素值就可以改变他显示的时间了,需要注意的是,0号元素和1号元素必须同时设置,不然会导致控件不显示时间
this.date[0]=this.startdate;
this.date[1]=this.enddate;
之前在网上看到很多文档,大多数都要重写一个方法,比较麻烦,懒人直接用这个方法就好了,两行代码简单粗暴。
3.设置默认时间为上一个月
直接贴代码:
created: function () {
var now = new Date();
var year = now.getFullYear(); //得到当前年份
var month = now.getMonth(); //默认得到月份是上一个月,如果当前是3月,这个值为2月
if(month ==12) //如果当前是1月,则获取到的数据为12月,年份减一
year=year -1;
var nextMonth=month+1;//其实就是当前月份
month = month.toString().padStart(2, "0"); //当小于10时,显示为01.02.03
nextMonth = nextMonth.toString().padStart(2, "0");
this.startdate = `${year}-${month}-01`;//拼接日期
this.enddate = `${year}-${nextMonth}-01`;
console.log(this.startdate+" "+this.enddate );
this.date[0]=this.startdate;
this.date[1]=this.enddate;
this.queryData();//调用方法查询指定时间段内的数据
}
注释里都已说清代码具体含义,方法比较简单粗暴,如果有更好的方法欢迎一起讨论




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45
10 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 10 个月前
更多推荐
所有评论(0)