如何隐藏 Ant Design 4 日期选择器年份？

Question

Ant design 禁用日期选择器年份，任何人都知道如何禁用 ant design react date time packer Year

谢谢这是我的代码

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

看看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

将此添加到您的 index.js 中，因为我相信您希望禁用 11-25 日之后的日期。对于 11-25 日之前的所有日期，您当前的条件 return 为真，这将禁用 11-25 日之前的所有日期

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

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

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

并在您的 index.css 中添加此内容以删除年份标签和年份遍历按钮

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

Here's the screenshot after applying this code

Answer 3

Susmita Sil 的是正确的，但缺点是每个 DatePicker 都会被更改。

最好将您自己的 css class 添加到 DatePicker-Component 上的 'dropdownClassName' 属性:

<DatePicker dropdownClassName='myCustomPicker' ...>

然后更改导入的 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;
}

如何隐藏 Ant Design 4 日期选择器年份？

How to hide Ant Design 4 Date picker Year?

reactjs

antd

react-typescript