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

ddarikpa  于 2023-11-18  发布在  React
关注(0)|答案(3)|浏览(189)

**Ant design**disable Date picker Year,有人知道如何禁用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")
);

字符串

s71maibg

s71maibg1#

在你的index.js中包括这个,因为我相信你想禁用11-25之后的日期。你的当前条件将为11-25之前的所有日期返回true,这将设置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;
}


下面是应用此代码后的屏幕截图
x1c 0d1x的数据

ctehm74n

ctehm74n2#

看看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')
);

字符串

muk1a3rh

muk1a3rh3#

Susmita Sil的answer是正确的,但缺点是每个DatePicker都将被更改。
最好将您自己的css类添加到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;
}

相关问题