
情形:签约月份选择了6月,那么下面的时间区间最大只能是六月一号到六月三十号,如果上面的月份没有选择,区间日期弹框里面的任何时间都被禁用。
代码:
// html 部分
<el-form-item label="合同签约月份" prop="contractSignMonth">
<el-date-picker
class="custom-date-picker"
v-model="form.contractSignMonth"
@change="handleMonthDateChange"
value-format="yyyy年MM月"
type="month">
</el-date-picker>
</el-form-item>
<el-form-item label="合同签约日期区间" prop="contractSign_Dates">
<el-date-picker
class="custom-date-picker"
v-model="form.contractSign_Dates"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions0"
:default-value="defaultRangeDate"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
// js
data () {
return {
form: {},
pickerOptions0: {
disabledDate: this.disabledDate
},
monthDateTime: [],
defaultRangeDate: new Date()
}
}
methods: {
handleMonthDateChange (d) {
if (typeof d === 'string') {
let tDate = new Date(d.replace('年', '-').replace('月', ''))
this.defaultRangeDate = tDate
this.monthDateTime[0] = tDate.getTime() - 24 * 60 * 60 * 1000 - 1
this.monthDateTime[1] = new Date(tDate.getFullYear() + '-' + (tDate.getMonth() + 2)).getTime() - 1
// console.log('handleMonthDateChange:', d, tDate, this.monthDateTime)
}
},
disabledDate (date) {
// console.log('disabledDate:', date.getMonth() + 1, date.getTime(), this.monthDateTime[0])
// 返回 true 表示是disabled的状态
let bool = true
if (this.form.contractSignMonth) {
bool = date.getTime() < this.monthDateTime[0] || date.getTime() > this.monthDateTime[1]
}
return bool
},
}
网友评论