Ant Design range picker - how can i disable arrow of future (next) months?

Question

I need to disable future (next) arrows of second calendar. How can i implement it?

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

It is component rendering Range Picker. We have no props to add arrow disable functionality. Can we disable it without including props? For example, using css class? If month bigger than month with current date => disable next arrow of future month...

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

I was able to choose which arrows to remove with the dropdownClassName property of RangePicker and have 4 different classes for the different arrows. 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;
}

In Test.js you would be able to put the logic to decide which arrows should be disabled and let dropdownClassName have those classes. If you only want to disable the buttons I believe you can use pointer-events: none; instead of visibility which will work in chrome but maybe not all browsers.

Hope it helps you get the idea of how it is possible.

Answer 2

I need to disable future (next) arrows of second calendar. How can i implement it?

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

It is component rendering Range Picker. We have no props to add arrow disable functionality. Can we disable it without including props? For example, using css class? If month bigger than month with current date => disable next arrow of future month...

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