How to hide Ant Design 4 Date picker Year?

Question

Ant design disable Date picker Year, anyone know how to disable ant design react date time packer Year

Thanks here the my code

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";

function disabledYear(current) {
  let customYear = "11-25";
  return current && current < moment(customYear, "MM-DD");
}

ReactDOM.render(
  <div>
    <DatePicker format="YYYY-MM-DD" disabledYear={disabledYear} />
  </div>,
  document.getElementById("container")
);

Answer 1

Take a look at stackblitz.

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

function disabledYear(current) {
  // return current.year() === 2021; // disabling 2021
  // return current.year() !== 2021; // disabling everything besides 2021
  // return current.year() !== (new Date).getFullYear(); // disabling everything besides current year
  // return current.year() > 2021; // disabling everything further than 2021
  // return current.year() < 2021; // disabling everything in the past before 2021
  // return [2018, 2019].includes(current.year()); // disabling 2018 and 2019
}

ReactDOM.render(
  <div>
    <DatePicker format="YYYY-MM-DD" disabledDate={disabledYear} />
  </div>,
  document.getElementById('root')
);

Answer 2

Susmita Sil's answer is correct, but has the drawback that EVERY DatePicker will be changed.

Better add your own css class to the 'dropdownClassName' property on the DatePicker-Component:

<DatePicker dropdownClassName='myCustomPicker' ...>

Then change your imported CSS:

.myCustomPicker .ant-picker-header > button.ant-picker-header-super-prev-btn, 
.myCustomPicker .ant-picker-header > button.ant-picker-header-super-next-btn, 
.myCustomPicker .ant-picker-header button.ant-picker-year-btn
{
  display: none !important;
}