1 组件使用
<a-date-picker
v-model="formModal.sendTime"
:disabled-date="disabledDate"
:disabled-time="disabledDateTime"
show-time
:show-now-btn="false"
/>
2 ts部分
<script lang="ts" setup>
// 禁止选择当前时间之前的日期
const disabledDate = (current: any) => {
return current && current < dayjs().startOf('day');
};
const range = (start: number, end: number) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
// 禁止选择当时之前的时刻
const disabledDateTime = (dates: Date) => {
const hours = dayjs().hour();
const minutes = dayjs().minute();
// const seconds = dayjs().second();
// 当日只能选择当前时间之后的时间点
if (dates && dayjs(dates).date() === dayjs().date()) {
if (dayjs(dates).hour() === dayjs().hour()) {
return {
disabledHours: () => range(0, hours),
disabledMinutes: () => range(0, minutes + 5),
disabledSeconds: () => [],
};
}
return {
disabledHours: () => range(0, hours + 1),
disabledMinutes: () => [],
disabledSeconds: () => [],
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
};
</script>
3 效果