el-picker日期选择组件根据条件动态限制选择日期范围，最近刚好有项目需求要做动态限制日期选择范围，话不多说直接看效果和代码吧！又一个地方需要注意一下：选择日期区间时需要限制到最小时间的前一天去才行，不然最小时间那一天选择不了，最开始这里我设置的是当年的一月一号，这样写的话页面上一月没有被禁用但是选择不会生效。我这里的需求是根据选择年去控制选择单月和月区间的范围。
<template>
<div class="content">
<div>
<el-form
ref="scaechDom"
:rules="rules"
:model="scaechDom"
label-suffix=":"
label-width="110px"
class="bgd query-form_content"
>
<el-row>
<el-col :span="12">
<el-form-item prop="querytype" label="选择类型">
<el-select v-model="scaechDom.querytype" clearable placeholder="请选择类型..." @change="queryTypeChange">
<el-option
v-for="item in queryTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item prop="yearData" label="选择年">
<el-date-picker
v-model="scaechDom.yearData"
format="yyyy"
value-format="yyyy"
type="year"
placeholder="选择年..."
:picker-options="startYear"
@change="yearChange"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item prop="monthsData" label="选择月区间">
<el-date-picker
v-model="scaechDom.monthsData"
format="yyyy-MM"
value-format="yyyy-MM"
type="monthrange"
range-separator="至"
start-placeholde="开始月份"
end-placeholde="结束月份"
:picker-options="pickerMonth"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item prop="monthData" label="选择单月">
<el-date-picker
v-model="scaechDom.monthData"
format="yyyy-MM"
value-format="yyyy-MM"
type="month"
placeholder="选择月..."
:picker-options="startmonth"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
queryTypeList:[
{
label:'科目余额',value:'subjectRemain'},
{
label:'债权债务',value:'claimOwing'}
],
rules:{
querytype:[
{
required:true,message:'请选择类型',trigger:'blur'}
],
yearData:[
{
required:true,message:'请选择年时间',trigger:'blur'}
],
monthData:[
{
required:true,message:'请选择单月时间',trigger:'blur'}
]
},
scaechDom:{
querytype:'',
monthData:'',
monthsData:'',
yearData:''
},
startmonth:{
disabledDate:time=>{
let year=new Date().getFullYear()
let nowDate=''
let myDate=new Date()
let myYear=myDate.getFullYear()
let myMonth= new Date().getMonth()+1
let myToday=myDate.getDate()
myMonth=myMonth>9?myMonth:'0'+myMonth
myToday=myToday>9?myToday:'0'+myToday
nowDate=myYear+'-'+myMonth+'-'+myToday
let start=year+'-'+'01'+'-'+'01'
let end=nowDate
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
},
pickerMonth:{
disabledDate:time=>{
let year=new Date().getFullYear()-1
let nowDate=''
let myDate=new Date()
let myYear=myDate.getFullYear()
let myMonth= new Date().getMonth()+1
let myToday=myDate.getDate()
myMonth=myMonth>9?myMonth:'0'+myMonth
myToday=myToday>9?myToday:'0'+myToday
nowDate=myYear+'-'+myMonth+'-'+myToday
let start=year+'-'+'12'+'-'+'31'
let end=nowDate
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
},
startYear:{
disabledDate:time=>{
let year=new Date().getFullYear()
return(
time.getTime()>new Date(parseInt(year)-parseInt(0)+'-12-31').getTime()
)
}
},
exportExcelList:[],
excelName:'',
querytypeDisabled:false,
querytypeLoading:false
}
},
methods:{
yearChange(val){
let year=new Date().getFullYear()
let nowDate=''
let myDate=new Date()
let myYear=myDate.getFullYear()
let myMonth= new Date().getMonth()+1
let myToday=myDate.getDate()
myMonth=myMonth>9?myMonth:'0'+myMonth
myToday=myToday>9?myToday:'0'+myToday
nowDate=myYear+'-'+myMonth+'-'+myToday
if(val<year){
this.startmonth={
disabledDate(time){
let start=val+'-'+'01'+'-'+'01'
let end=val+'-'+'12'+'-'+'31'
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
}
this.pickerMonth={
disabledDate(time){
let yearVal=val-1
let start=yearVal+'-'+'12'+'-'+'31' // 选择日期区间时需要限制到最小时间的前一天去才行，不然最小时间那一天选择不了，最开始这里我设置的是当年的一月一号，这样写的话页面上一月没有被禁用但是选择不会生效
let end=val+'-'+'12'+'-'+'31'
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
}
}else{
this.startmonth={
disabledDate(time){
let start=val+'-'+'01'+'-'+'01'
let end=nowDate
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
}
this.pickerMonth={
disabledDate(time){
let yearVal=val-1
let start=yearVal+'-'+'12'+'-'+'31'
let end=nowDate
return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
}
}
this.$set(this.scaechDom,'monthData','')
this.$set(this.scaechDom,'monthsData','')
}
},
}
}
</script>
<style>
.content{
height: 80vh;
margin-left:30%;
margin-top:5% ;
}
</style>