Question

我需要在今天之前禁用日期（使用disableDate函数设置了日期）。而且我需要禁用日历上的特定日期，例如：

今天：2018-07-30

日期需要禁用：[2018-08-10、2018-08-12、2018-08-20]

因此，在这种情况下，当我打开范围选择器日历时，无法选择今天之前的日期以及此日期数组。我需要为此做什么？

谢谢！

Answer 1

t及其在您所看到的日历中的所有日期。

current今天。

this.today的功能是计算两个日期之间有多少天。

differenceInCalendarDays()是我要阻止的所有日期的数组。

this.dateArrayDisabled

以html

public disabledDate = (current: Date): boolean => {
  if (differenceInCalendarDays(current, this.today) < 0) {
    return true;
  }
  for (const dateItem of this.dateArrayDisabled) {
    let days = differenceInCalendarDays(dateItem, this.today);
    if (differenceInCalendarDays(current, this.today) === days) {
      return true;
    }
  }
};

Answer 2

假设您有类似的东西

function disabledDate(current) {
  return current && current < moment().endOf('day');
}

这是文档建议的功能，可让您禁用当天（包括当天）之前的所有日期。

现在，考虑到您有一个包含要禁用的所有日期的数组，可以尝试如下操作：

const dates = ['2018-08-10', '2018-08-12', '2018-08-20'];

function disabledDate(current) { 


  return current && current < moment().endOf('day') 
  && !!dates.find(d=>current === moment(d));
}

Answer 3

当我尝试使用道具RangePicker在disabledDate中仅启用一系列值时，我遇到了同样的问题。

的确，return current && current < moment().endOf('day');可以很好地工作，但不能与&&运算符一起使用（出于某种原因）。因此，例如，要启用特定的时间间隔（例如从2018年1月1日到2019年1月1日），您可以为要禁用的每个特定日期返回一个布尔值：

    function disabledDate(current){
    // or (if it's a class method)
    //disabledDate = (current) => { 
        let start = '2018-01-01';
        let end = '2019-01-01';
        if (current < moment(start)){
            return true;
        }
        else if (current > moment(end)){
            return true;
        }
        else {
            return false; 
        }
    }

因此，对于特定日期，我认为您可以采用相同的原则来实现所需的目标：

        function disabledDate(current){
    // or (if it's a class method)
    //disabledDate = (current) => { 
        let date1 = '2018-08-10';
        let date2 = '2018-08-12';
        let date3 = '2018-08-20';

        if (current===moment(date1)){
            return true;
        }
        else if (current===moment(date2)){
            return true;
        }
        else if (current===moment(date3)){
            return true;
        }
        else {
            return false; 
        }
    }

最后，将函数放入RangePicker的道具中：

<RangePicker disabledDate={disabledDate} />

我认为RangePicker每次更改天，月或年时都会调用函数disabledDate，因此，当返回带有&&的简单条件时，它将忽略第二个条件。但是，当我们每天具体验证当前日期时，它显然可以正常工作。（特定日期的第二个代码尚未经过测试，但第一个代码已经过测试，并且可以正常工作！）

Answer 4

禁用日期功能比较了查询中呈现的每个日期，如果返回$(window).scroll(function() { $('.parts').each(function(i, ele) { console.log(isElemIntoView(ele)); console.log(); if (isElemIntoView(ele)) { $(ele.className + " *").css("opacity", "1"); } }); }); function isElemIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }，它将禁用该日期。

根据这种逻辑，如果您要具有一组启用日期，则需要执行以下操作：

true

本质上：如果我的日期不在此数组中，则将其禁用。

Answer 5

这有效：

function disabledDate(current: any) {
for (let i = 0; i < dates.length; i++) {
  if(current.date() === moment(dates[i]).date() && current.month() === moment(dates[i]).month()){
    return false;
  }     
}
return true;  }

其中日期是日期时间数组。例如：

['2020-05-21T22:00:00.000Z', '2020-05-22T22:00:00.000Z', '2020-05-23T22:00:00.000Z']

Ant Design范围选择器禁用日期数组

5 个答案: