【Element】vue3-element-plus中日期时间选择器(范围)限制选择天数(30天为例)
【Element】vue3-element-plus中日期时间选择器(范围)限制选择天数(30天为例)
·
element-plus的el-data-picker中没有了pick-options,但是新增了事件calendar-change(等同onPick),disable-date也有,同样可以实现
Element-plus文档
代码实现
组件
<el-form-item v-if="conditionForm.filterType == 0" label="时间范围:" prop="rangeDate">
<el-date-picker
v-model="validateForm.rangeDate"
type="datetimerange"
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD H:m:s"
:default-time="defaultTime2"
:disabled-date="disabledDate"
@focus="handleFocus"
@calendar-change="handleChange"
/>
</el-form-item>
方法
...
...
//变量
const chooseDay = ref(null)
const handleChange = (val: Date[]) => {
const [pointDay] = val
chooseDay.value = pointDay
}
//取值方法
const handleFocus = () => {
chooseDay.value = null
}
const disabledDate = (time: number) => {
if (!chooseDay.value) {
return false
}
let timeRange = 30
const con1 = new Date(chooseDay.value).getTime() - timeRange * 24 * 60 * 60 * 1000
const con2 = new Date(chooseDay.value).getTime() + timeRange * 24 * 60 * 60 * 1000
return time < con1 || time > con2
}
return {
handleChange,
handleFocus,
disabledDate
}
...
...
效果实现
更多推荐
已为社区贡献1条内容
所有评论(0)