后端获取日期数据,如何动态设置日期选择框的选择范围早于这个日期。静态设置我会。
在disabledDate方法中放一个响应变量就好了
该回答引用ChatGPT
在Vue.js中,可以通过绑定disabled属性来动态禁用日期选择器。如果你使用的是Element Plus组件库提供的日期选择器,你可以在组件中通过绑定disabled属性来实现禁用日期选择。
例如,如果你有一个名为datePicker的日期选择器组件,你可以通过一个变量来控制它的禁用状态,例如:
<template>
<el-date-picker v-model="date" :disabled="isDisabled"></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: '',
isDisabled: false
}
}
}
</script>
在上面的代码中,isDisabled是一个变量,控制日期选择器是否被禁用。当isDisabled为true时,日期选择器将被禁用。
如果要动态设置日期选择器的可选日期范围,你可以通过绑定disabled-date属性来实现。在disabled-date属性中,你可以返回一个函数,该函数将被用来判断哪些日期应该被禁用。
例如,如果你想禁用所有早于今天的日期,你可以使用以下代码:
<template>
<el-date-picker v-model="date" :disabled-date="disabledDate"></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: ''
}
},
methods: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}
}
}
</script>
在上面的代码中,disabledDate是一个函数,用于判断哪些日期应该被禁用。在该函数中,我们使用time.getTime()方法获取日期的时间戳,然后将其与今天的时间戳相比较。如果日期的时间戳早于今天的时间戳,则返回true,该日期将被禁用。如果日期的时间戳晚于或等于今天的时间戳,则返回false,该日期将可用。
静态的会,那动态 就是 先获取到数据 里的日期 。然后 转换成 date-picker 可以识别的一般就是moment 处理一下,然后 就可以 设置禁用了 。
disabled-date 属性可以实现 写个函数 处理 做个比较 小于 获取到的日期 则 return true .一般可以 转换毫秒数 来 比较。
https://element-plus.gitee.io/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7