The el-picker date selection component dynamically restricts the selected date range according to conditions. Recently, there is a project requirement to dynamically limit the date selection range. Let’s see the effect and code directly without further ado! Another place to pay attention to: when selecting a date range, you need to limit it to the day before the minimum time, otherwise you can’t choose the day with the minimum time. At the beginning, I set it to January 1st of the year. If you write this way, it will be displayed on the page January is not disabled but the selection will not take effect. My requirement here is to control the selection of a single month and the range of monthly intervals based on the selected year.
<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>