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

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

18 thoughts on “Ant Design range picker – how can i disable arrow of future (next) months?”

Leave a Comment