目前公司使用的是Ant Design 3.0， DatePicker mode="year" 时不支持 disabledDate 属性。
找到一篇模拟YearPicker的文章，但是不完全满足我的需求，在那篇文章的基础上进行了改造。
效果图
代码如下：
YearPicker.js
/**
* 使用方法
* 引入：
* import YearPicker from "@/common/widget/YearPicker";//路径按照自己的来
{
if (this.props.callback) {
this.props.callback(null);
}
}}
/>
)}
{isShow ? (
this.getContainer('year-picker-id')}>
) : (
''
)}
);
}
}
const List = (props) => {
const {
data, value, prev, next, cback, disabledDate, inputChange,
listInputVal, EnterKey, inputBlur,
} = props;
const start = data && data[1];
const end = data && data[data.length - 2];
return (
<>
{data.map((item, index) => {
const isDisabled = disabledDate && disabledDate(moment(String(item)));
const isFirst = index == 0;
const isLast = index == data.length - 1;
return (
-
);
},
)}
);
};
export default YearPicker;
YearPicker.less
@focuscolor: #108ee9;
@bordercolor: #d9d9d9;/*这部分根据你自己的容器样式，我这个地方是因为公用组件的原因需要设置*/
#wrapper .toolbar {
overflow: inherit !important;
}
#wrapper .toolbar > div:after {
content: "";
display: block;
visibility: hidden;
width: 0;
clear: both;
}
/*---以下为必备样式----*/
:global {
.calendarX-wrap {
position: relative;
.calendarX-input {
width: 100%;
position: relative;
cursor: pointer;
.calendarX-icon {
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
color: rgba(0, 0, 0, 0.25);
}
&:hover {
.close-circle-icon {
display: inline-block;
transition: all 0.3s;
}
}
.close-circle-icon {
display: none;
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
color: rgba(0, 0, 0, 0.25);
transition: all 0.3s;
background-color: #fff;
}
input {
width: 100%;
height: 32px;
border: 1px solid @bordercolor;
border-radius: 4px;
font-size: 14px;
outline: none;
display: block;
padding: 4px 11px;
transition: all 0.3s;
&:hover:not(:disabled),
&:active:not(:disabled) {
border-color: #40a9ff;
}
&:disabled {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
cursor: not-allowed;
opacity: 1;
}
}
}
}
.calendarX-container {
position: relative;
width: 280px;
font-size: 14px;
line-height: 1.5;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #fff;
border-radius: 4px;
outline: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 999;
}
.calendarX-head-year {
height: 40px;
line-height: 40px;
text-align: center;
width: 100%;
position: relative;
border-bottom: 1px solid #e8e8e8;
.calendarX-year-range {
padding: 0 2px;
display: inline-block;
color: rgba(0, 0, 0, 0.85);
line-height: 34px;
}
.calendarX-btn {
position: absolute;
top: 0;
color: #aaa;
padding: 0 5px;
font-size: 12px;
display: inline-block;
line-height: 34px;
cursor: pointer;
&:hover {
color: @focuscolor;
}
}
.prev-btn {
left: 7px;
}
.next-btn {
right: 7px;
}
}
.calendarX-body-year {
width: 100%;
height: 218px;
.calendarX-year-ul {
list-style: none;
.calendarX-year-li {
float: left;
text-align: center;
width: 92px;
> button {
cursor: pointer;
outline: none;
border: 0;
display: inline-block;
margin: 0 auto;
color: rgba(0, 0, 0, 0.65);
background: transparent;
text-align: center;
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
transition: background 0.3s ease;
margin: 14px 0;
&:hover {
color: @focuscolor;
}
}
&::before {
}
&.calendarX-year-li-disabled {
position: relative;
cursor: not-allowed;
&::before {
background: rgba(0, 0, 0, 0.04);
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 1;
height: 24px;
transform: translateY(-50%);
transition: all 0.3s;
content: '';
}
> button {
color: rgba(0, 0, 0, 0.25);
}
}
}
.calendarX-year-selected {
> button {
background: #108ee9;
color: #fff !important;
&:hover {
color: #fff;
}
}
}
.calendarX-year-last-decade-li, .calendarX-year-next-decade-li {
> button {
color: rgba(0, 0, 0, 0.25);
}
}
}
}
.calendarX-input-wrap {
height: 34px;
padding: 6px 10px;
border-bottom: 1px solid #e8e8e8;
.calendarX-input {
width: 100%;
height: 22px;
color: rgba(0, 0, 0, 0.65);
background: #fff;
border: 0;
outline: 0;
cursor: auto;
}
}
.calendarX-modal-input {
width: 100%;
height: 22px;
color: rgba(0, 0, 0, 0.65);
background: #fff;
border: 0;
outline: 0;
cursor: auto;
}
}
Portal.js
import React from 'react';
import ReactDOM from 'react-dom';
/**
* @function getContainer 渲染组件的父组件
* @param children 需要渲染的组件
* @export
* @class Portal
* @extends {React.Component}
*/
export default class Portal extends React.Component {
componentDidMount() {
this.createContainer();
}
componentDidUpdate() {
// React版本较低，不使用ReactDOM.createPortal
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
this.props.children,
this._container,
);
}
componentWillUnmount() {
this.removeContainer();
}
createContainer() {
this._container = this.props.getContainer();
this.forceUpdate();
}
removeContainer() {
if (this._container) {
this._container.parentNode.removeChild(this._container);
}
}
render() {
return null;
}
}
disableDate 计算方式（也可用于禁用日期）
disabledDateBeforeToday = (current, format) => { // 禁止今年以前的年份（不包含今年）
return current && current < moment(moment().startOf('day').format(format));
}
disabledDateAfterToday = (current) => { // 禁止今年之后的年份（不包含今年）
return current && current >= moment().endOf('day');
}
问题1：本来关闭弹窗用的是document绑定事件，但是当在一个页面里存在多个YearPicker，打开其中一个选择弹窗，再点击其他YearPicker，会同时打开多个弹窗，所以使用 ReactDOM.createPortal 将整个选择的组件与input框隔离成独立的部分，采用透明全屏遮罩层的方式，检测input在窗口中的位置来设置展示组件的位置，这样就可以点击任意位置关闭组件，且只出现一个弹窗。
问题2：由于React版本问题，ReactDOM.createPortal 不支持。使用ReactDOM.unstable_renderSubtreeIntoContainer 将 YearPicker 加在 body 下。
借鉴文章：
时间选择控件YearPicker（基于React，antd）
React如何将组件渲染到指定节点—ReactDOM.createPortal