element 日期选择器el-date-picker 月份范围控制
<template>
<el-date-picker
type="month"
v-model="yearMonth"
format="yyyy-MM"
value-format="yyyy-MM"
:picker-options="pickerOptions"
>
</template>
<script>
export default {
data () {
return {
pickerOptions: {
selectableRange: ['12:00:00 - 23:59:59'],
disabledDate:(time)=>{
const date = new Date()
const year = date.getFullYear()
let month = date.getMonth() + 1
if (month >= 1 && month <= 9) {
month = '0' + month
}
const currentDate = year.toString() + month.toString()
const timeYear = time.getFullYear()
let timeMonth = time.getMonth() + 1
if (timeMonth >= 1 && timeMonth <= 9) {
timeMonth = '0' + timeMonth
}
const timeDate = timeYear.toString() + timeMonth.toString()
return currentDate < timeDate || currentDate > timeDate
}
},
}
}
}
</script>
限制日期
<template>
<table>
<tr>
<td class="lable">
<span class="tdred">*</span>项目开始日期:
</td>
<td class="value">
<el-date-picker
v-model="dataForm.budgetbegindate"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart">
</el-date-picker>
</td>
<td class="lable">
<span class="tdred">*</span>项目结束日期:
</td>
<td class="value">
<el-date-picker
v-model="dataForm.budgetenddate"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd">
</el-date-picker>
</td>
</tr>
</table>
</template>
<script>
export default {
data () {
return {
pickerOptionsStart: {
disabledDate: time => {
if (this.dataForm.budgetenddate) {
return time.getTime() > new Date(this.dataForm.budgetenddate.substring(0,10)).getTime() - 86400000
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.dataForm.budgetbegindate) {
return time.getTime() < new Date(this.dataForm.budgetbegindate.substring(0,10)).getTime() - 86400000
}
}
},
}
}
}
</script>