一、有时候我们开发遇见这样的需求:用户选择的日期有日期范围要求,比如要求在2015-10-1~2018-11-11之间选择。2015年10月1号之前的不可选择,2018年11月11之后的不可选择。
二、iview文档上有 DatePicker 日期选择器
<template>
<Row>
<Col span="24">
<DatePicker type="date" :options="optionsDate" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
optionsDate: {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000;
}
}
}
}
}
</script>
遇到的问题
<template>
<Row>
<Col span="24">
<DatePicker type="date" :options="optionsDate" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
optionsDate: {
disabledDate (date) {
return date && date.valueOf() > this.startTime - 86400000 || date && date.valueOf() < this.endTime - 86400000;
}
},
startTime: new Date('2015-10-1'),
endTime: new Date('2018-11-11')
}
}
}
// 在 disabledDate 函数内访问不到 this(值为 undefined)
</script>
设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。disabledDate 是函数,参数为当前的日期,需要返回 Boolean 是否禁用这天。
解决办法:
用 bind
绑定this,代码见下:
<template>
<Row>
<Col span="24">
<DatePicker type="date" :options="optionsDate" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
optionsDate: {
disabledDate (funtion(date) {
return date && date.valueOf() > this.startTime - 86400000 || date && date.valueOf() < this.endTime - 86400000;
}).blind(this)
},
startTime: new Date('2015-10-1'),
endTime: new Date('2018-11-11')
}
}
}
// 在disabledDate函数内就能访问到this
</script>