Ant 設計范圍選擇器 - 如何禁用未來（接下來）月份的箭頭？

Question

我需要禁用第二個日歷的未來（下一個）箭頭。 我該如何實施？

日歷截圖

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 class？ 如果月份大於當前日期的月份=>禁用未來月份的下一個箭頭...

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

測試.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(" ")} />;
};

測試.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 中可以使用的可見性，但可能不適用於所有瀏覽器。

希望它能幫助您了解它是如何可能的。

Answer 2

我需要禁用第二個日歷的未來（下一個）箭頭。 我該如何實施？

日歷截圖

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 class？ 如果月份大於當前日期的月份=>禁用未來月份的下一個箭頭...

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>
    );
  }