Ant Design Range Picker Disable Array of Dates

how to disable all the Sundays and array of specific days in ant design date picker

To start we have a look at antd's Datepicker example in the depending docs.

Disable all Sundays

We use the moment.js lib to check the days and disable all sundays (here it is the first == zero).

E.g.:

function disabledDate(current) {
  // Can not select sundays and predfined days
  return moment(current).day() === 0 
}

Disable specific days

First we define an array of our dates and then check if a converted day is in our disabled array.

const disabledDates = ["2020-07-21", "2020-07-23"];

function disabledDate(current) {
  // Can not select Sundays and predefined days
  return disabledDates.find(date => date === moment(current).format("YYYY-MM-DD"));
}

Putting all together

Now we can combine both solutions. A working example can be found in this CodeSandbox.

E.g.:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker } from "antd";

const disabledDates = ["2020-07-21", "2020-07-23"];

function disabledDate(current) {
  // Can not select Sundays and predefined days
  return (
    moment(current).day() === 0 ||
    disabledDates.find(date => date === moment(current).format("YYYY-MM-DD"))
  );
}

ReactDOM.render(
  <>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
    />
  </>,
  document.getElementById("container")
);

AntD React: Disable time ranges for specific dates in DateRangePicker

You have to use the disabledDate props to do this

const format = "DD.MM.YYYY HH:mm";
const disabledDates = [
  {
    start: "23.02.2020 13:00",
    end: "25.02.2020 15:00"
  },
  {
    start: "15.03.2020 08:00",
    end: "20.03.2020 17:00"
  }
];

<RangePicker
  onChange={onChange}
  defaultValue={[moment(), moment()]}
  showTime
  disabledDate={current => {
    console.log(current);
    return disabledDates.some(date =>
      current.isBetween(
        moment(date["start"], format),
        moment(date["end"], format)
      )
    );
  }}
/>

Exemple: https://codesandbox.io/s/great-wiles-zedz6

Exemple with hours: https://codesandbox.io/s/frosty-booth-nchl2

You can read more about moment.isBetween here: https://momentjs.com/docs/#/query/is-between/

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

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.

disable dates before current date and after 1 month of current date in antd date picker

For the dates to be disabled, you need it to run through both these conditions.

When the condition is:

moment().add(-1, 'days')  >= current && moment().add(1, 'month')  <= current;

The condition returns false, when the first moment().add(-1, 'days') >= current is false, which is why you see that the days before current date are correctly disabled.

For condition to be correct, you need:

<DatePicker
  defaultValue={moment()}
  format={dateFormat}
  className="datePicker"
  onChange={dateHandler}
  ref={(dateSelect) => { this.dateSelect = dateSelect }}
  disabledDate={(current) => {
     return moment().add(-1, 'days')  >= current ||
          moment().add(1, 'month')  <= current;
     }}
  onFocus={this.rideDateGA}
/>

Disable Antd Datepicker tooltip

Antd provides a way to style how one renders each date through the dateRender option. Adding a custom render function did the trick for me.

<DatePicker
          defaultPickerValue="{moment('2015-11-01')}"
          format="Do"
          dateRender="{(current) => this.renderCustomDate(current)}"
          dropdownClassName="c-datepicker-dropdown"
          disabledDate="{(current) => this.disabledDates(current,this.props.frequency_data.MONTHLY)}"
          showToday={false}                                            
          style="{{ width: 132 }}"
          />

Here's my custom function. (Title is empty, hence the tooltip is not visible)

 renderCustomDate(current) {
    return (
      <div className="ant-calendar-date" title="">
        {current.date()}
      </div>
    );
  }

react.js ant design range filter with start and end dates error

Change the way on how you pass the values to setSelectedKeys function, the setSelectedKeys function accepts an array as the value.

So in order for this to work. Change your code into this.

onChange={e => setSelectedKeys([e.format("DD.MM.YYYY")])}

Also you must handle the on clear event of the datepicker to avoid passing null value to setSelectedKeys function.

onChange={e => setSelectedKeys(e !== null ? [e.format("DD.MM.YYYY")] : [])}