前端-a-date-picker如何设置禁选时间段

大嘴史努比

已于 2024-06-06 11:03:28 修改

阅读量388

点赞数 7

文章标签：前端 java javascript

于 2024-06-06 11:01:21 首次发布

本文链接：https://blog.csdn.net/qq_42371932/article/details/139494604

版权

想要做到如图所示的效果，代码如下：

第一个是只能选择某一天，第二个是只能选择某一个时间段

<a-date-picker
                  v-model:value="record.onTimeStr"
                  :show-time="{ format: 'HH:mm' }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :disabled="record.onTimeStatus === 'delivered'"
                  :disabled-date="disableDate"
                />

    disableDate(current) {
      // console.log('time', this.where.workDateStr, current);
      const res = dayjs(this.where.workDateStr).toISOString();
      const date = dayjs();
      const day = date.date();
      const year = date.year();
      const month = date.month();
      return current.isBefore(res, 'day') || current.isAfter(res, 'day');
      // return current.date() !== day || current.year() !== year || current.month() !== month;
    },

<template #time2="{ record }">
              <a-space
                ><a-date-picker
                  v-model:value="record.offTimeStr"
                  :show-time="{ format: 'HH:mm' }"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  :disabled="record.offTimeStatus === 'delivered'"
                  :disabled-date="current => disableDate2(current, record)"
                />
              </a-space>
            </template>

disableDate2(current) {
      // const today = dayjs();
      // const tomorrow = today.add(1, 'day');
      // return current.isBefore(today, 'day') || current.isAfter(tomorrow, 'day');
      const res = dayjs(this.where.workDateStr);
      const tomorrow = res.add(1, 'day');
      return current.isBefore(res, 'day') || current.isAfter(tomorrow, 'day');
    },