vue+elementUi日期控件控制开始时间和结束时间以及范围在12个月之内
作为一个后端人员,写前端真的是太难受了,这个日期控件也是研究了好久才实现这么个简单功能,在此记录一下我的控件只有到月份效果开始日期不可超过结束日期开始日期不超过结束日期的前12个月结束日期在开始日期之后上代码啦<el-form-item label="开始日期"><el-date-pickerv-model="dateRange[0]"size="mini"format="yyy
·
作为一个后端人员,写前端真的是太难受了,这个日期控件也是研究了好久才实现这么个简单功能,在此记录一下
我的控件只有到月份
效果
开始日期不可超过结束日期
开始日期不超过结束日期的前12个月
结束日期在开始日期之后
上代码啦
<el-form-item label="开始日期">
<el-date-picker
v-model="dateRange[0]"
size="mini"
format="yyyy-MM"
:picker-options="beginDate"
type="month"
placeholder="请选择"
range-separator="-"
@change='changeBeginTime'
></el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="dateRange[1]"
size="mini"
format="yyyy-MM"
:picker-options="endDate"
type="month"
placeholder="请选择"
range-separator="-"
@change='changeEndTime'
></el-date-picker>
</el-form-item>
重点是:picker-options="endDate"这一行
定义一下
此处写在create里,我这个是只能选择近12个月之内的月份,各位可以根据自己的需求来定这个范围
this.beginDate = {
disabledDate: (time) => {
if (this.dateRange[1] != '') {
return (
time.getTime() > this.dateRange[1] ||
time.getTime() < new Date(new Date().getFullYear()-1,new Date().getMonth())
)
}
}
};
this.endDate = {
disabledDate: (time) => {
return(
time.getTime() > new Date()||
time.getTime() < this.dateRange[0]
)
}
};
搞定!!!
更多推荐
所有评论(0)