iview日期选择器更改显示日期书_iview - 设置不可选择的日期

type="date"

v-model="startTime"

placeholder="请选择开始时间"

:options="startTimeOption"

@on-change="onStartTimeChange"

>

type="date"

v-model="endTime"

placeholder="请选择结束时间"

:options="endTimeOption"

@on-change="onEndTimeChange"

>

export default {

props: {

searchInfo: {

type: Object

}

},

watch: {

searchInfo: {

immediate: true,

deep: true,

handler(val) {

console.log(val)

this.startTime = val.startTimeStamp

this.endTime = val.endTimeStamp

}

}

},

mounted() {

console.log(this.searchInfo)

},

data() {

return {

startTime: "",

endTime: "",

startTimeOption:{ disabledDate (date) {

return date && date.valueOf() > Date.now();

}

},

endTimeOption:{}

};

},

methods: {

// 发送给父组件的方法

send(data){

let params = {

type: data

}

if(data == 'start') {

params.timeVal = this.startTime

this.$emit("child", params)

} else if(data == 'end') {

params.timeVal = this.endTime

this.$emit("child", params)

}

},

onStartTimeChange(startTime, type) {

// console.log(startTime)

this.endTimeOption = {

disabledDate(endTime) {

return (

endTime < new Date(startTime)

);

}

};

this.send('start');

},

onEndTimeChange(endTime, type) {

// console.log(endTime)

this.startTimeOption = {

disabledDate(startTime) {

return (

startTime > new Date(endTime) || startTime > Date.now()

);

}

};

this.send('end');

}

},

};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值