arco design vue中日期时间选择器只能选当前日期时间之后的时间

最新推荐文章于 2024-08-09 15:47:11 发布

凯撒Kaiser

最新推荐文章于 2024-08-09 15:47:11 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js arco design typescript javascript

本文链接：https://blog.csdn.net/Mike_haohao/article/details/131424048

文章展示了如何在Vue组件中使用<a-date-picker>，配合ts函数disabledDate和disabledDateTime，阻止用户选择当前时间之前的日期和时刻。当选择日期为当天时，仅允许选择当前时间之后的小时和分钟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 效果

在这里插入图片描述