Ant Design 范围选择器 - 我如何禁用未来（下）个月的箭头？

Question

我需要禁用第二个日历的未来（下一个）箭头。如何实现？

Calendar screenshot

import React from "react";
import { observer } from "mobx-react";
import { DatePicker } from "antd";
import classNames from "classnames";
import moment, { Moment } from "moment";
import styles from "./DatePicker.less";
import { RangePickerValue } from "antd/lib/date-picker/interface";

interface Props {
  onChange: Function;
  className?: string;
  placeholder?: [string, string];
  format?: string;
  disableFutureDate?: boolean;
  disabled?: boolean;
}

const { RangePicker: AntdDateRangePicker } = DatePicker;

@observer    
export class DateRangePicker extends React.Component<Props> {
  static defaultProps = {
    format: "DD/MM/YYYY"
  };

  handleChange = (dates: RangePickerValue): void => {
    const { onChange } = this.props;
    onChange(dates);
  };

  private disableFutureDate = (current: Moment): boolean =>
    this.props.disableFutureDate && current && current > moment().endOf("day");

  render(): React.ReactChild {
    const { className, ...rest } = this.props;
    return (
      <AntdDateRangePicker
        {...rest}
        disabledDate={this.disableFutureDate}
        className={classNames(className, styles)}
        onChange={this.handleChange}
      />
    );
  }
}

是组件渲染 Range Picker。我们没有添加箭头禁用功能的道具。我们可以在不包含道具的情况下禁用它吗？例如，使用 css 类？如果月份大于当前日期的月份 => 禁用未来月份的下一个箭头...

render(): React.ReactChild {
    if (!this.model) {
      return null;
    }

    const {
      className,
      withAutoComplete,
      onSearchSettingsChange,
      selectValue,
      options,
      name,
      withSearchByUser,
      withDateSearch,
      searchBoardByDate
    } = this.props;
    return (
      <div className={styles.searchWrapper}>
        {withSearchByUser ? (
          <div className={styles.leftColumnWrapper}>
            <Icon name={name} className={styles.selectIcon} />
            <Select
              className={styles.searchOptions}
              options={options}
              onChange={onSearchSettingsChange}
              value={selectValue}
              dropdownMatchSelectWidth={false}
            />
            <div className={classNames(styles.searchBox, className)}>
              {withAutoComplete ? (
                this.renderAutoCompleteSearch()
              ) : (
                <>
                  <TextField
                    noLabel
                    name="value"
                    model={this.model}
                    onChange={this.handleChange}
                    className={styles.searchField}
                  />
                  <span className={styles.iconClear}>
                    {this.model.value ? (
                      <Icon name="times" onClick={this.clearInput} />
                    ) : (
                      <Icon name="search" className={styles.searchIcon} />
                    )}
                  </span>
                </>
              )}
            </div>
            {withDateSearch ? (
              <div className={styles.rightColumnWrapper}>
                <DateRangePicker
                  onChange={searchBoardByDate}
                  disableFutureDate
                />
              </div>
            ) : null}
          </div>
        ) : (
          <div className={classNames(styles.searchBox, className)}>
            {withAutoComplete ? (
              this.renderAutoCompleteSearch()
            ) : (
              <>
                <TextField
                  noLabel
                  name="value"
                  model={this.model}
                  onChange={this.handleChange}
                  className={styles.searchField}
                />
                <span className={styles.iconClear}>
                  {this.model.value ? (
                    <Icon name="times" onClick={this.clearInput} />
                  ) : (
                    <Icon name="search" className={styles.searchIcon} />
                  )}
                </span>
              </>
            )}
          </div>
        )}
      </div>
    );
  }

Answer 1

我可以使用 RangePicker 的 dropdownClassName 属性选择要删除的箭头，并为不同的箭头提供 4 个不同的类。 https://codesandbox.io/s/dazzling-johnson-qdwjy

Test.js

import { DatePicker } from "antd";
import React from "react";
import "./Test.css";
const { RangePicker } = DatePicker;

export default () => {
  const className = ["disable-arrow1", "disable-arrow3", "disable-arrow4"];

  return <RangePicker dropdownClassName={className.join(" ")} />;
};

Test.css

.disable-arrow1 .ant-picker-header-super-prev-btn,
.disable-arrow2 .ant-picker-header-prev-btn,
.disable-arrow3 .ant-picker-header-next-btn,
.disable-arrow4 .ant-picker-header-super-next-btn {
  visibility: hidden;
}

在 Test.js 中，您可以使用逻辑来决定应该禁用哪些箭头，并让 dropdownClassName 拥有这些类。 如果您只想禁用按钮，我相信您可以使用 pointer-events: none; 而不是可见性，这将适用于 chrome 但可能并非所有浏览器。

希望它可以帮助您了解它是如何实现的。