From 13204e24718d5dabdc7cc2a42d141f935978d27a Mon Sep 17 00:00:00 2001 From: Arek Date: Tue, 7 May 2019 20:35:40 +0200 Subject: [PATCH] use disabledDate as limitatioj for month and year panel --- assets/index/YearPanel.less | 11 +++++++++++ src/Calendar.jsx | 1 + src/MonthCalendar.jsx | 2 +- src/calendar/CalendarHeader.jsx | 6 +++--- src/year/YearPanel.jsx | 9 ++++++++- 5 files changed, 24 insertions(+), 5 deletions(-) diff --git a/assets/index/YearPanel.less b/assets/index/YearPanel.less index 6b31dc8e..ea8d752d 100644 --- a/assets/index/YearPanel.less +++ b/assets/index/YearPanel.less @@ -95,6 +95,17 @@ .@{prefixClass}-year-panel-cell { text-align: center; + + &-disabled { + .@{prefixClass}-year-panel-year { + color: #bfbfbf; + + &:hover { + background: white; + cursor: not-allowed; + } + } + } } .@{prefixClass}-year-panel-year { diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 48585fd6..884cef04 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -327,6 +327,7 @@ class Calendar extends React.Component { renderFooter={renderFooter} showTimePicker={showTimePicker} prefixCls={prefixCls} + disabledDate={disabledDate} /> {timePicker && showTimePicker ? (
diff --git a/src/MonthCalendar.jsx b/src/MonthCalendar.jsx index 7f4c7eeb..1ef4c4fa 100644 --- a/src/MonthCalendar.jsx +++ b/src/MonthCalendar.jsx @@ -100,7 +100,7 @@ class MonthCalendar extends React.Component { mode={mode} value={value} locale={props.locale} - disabledMonth={props.disabledDate} + disabledDate={props.disabledDate} monthCellRender={props.monthCellRender} monthCellContentRender={props.monthCellContentRender} onMonthSelect={this.onSelect} diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx index 77862f17..62bf53f9 100644 --- a/src/calendar/CalendarHeader.jsx +++ b/src/calendar/CalendarHeader.jsx @@ -31,7 +31,7 @@ export default class CalendarHeader extends React.Component { locale: PropTypes.object, enablePrev: PropTypes.any, enableNext: PropTypes.any, - disabledMonth: PropTypes.func, + disabledDate: PropTypes.func, renderFooter: PropTypes.func, onMonthSelect: PropTypes.func, } @@ -144,7 +144,7 @@ export default class CalendarHeader extends React.Component { showTimePicker, enableNext, enablePrev, - disabledMonth, + disabledDate, renderFooter, } = props; @@ -157,7 +157,7 @@ export default class CalendarHeader extends React.Component { rootPrefixCls={prefixCls} onSelect={this.onMonthSelect} onYearPanelShow={() => this.showYearPanel('month')} - disabledDate={disabledMonth} + disabledDate={disabledDate} cellRender={props.monthCellRender} contentRender={props.monthCellContentRender} renderFooter={renderFooter} diff --git a/src/year/YearPanel.jsx b/src/year/YearPanel.jsx index b4dfc6e1..3895289b 100644 --- a/src/year/YearPanel.jsx +++ b/src/year/YearPanel.jsx @@ -64,8 +64,15 @@ export default class YearPanel extends React.Component { const yeasEls = years.map((row, index) => { const tds = row.map(yearData => { + let disabled = false; + if (props.disabledDate) { + const testValue = value.clone(); + testValue.year(yearData.year); + disabled = props.disabledDate(testValue); + } const classNameMap = { [`${prefixCls}-cell`]: 1, + [`${prefixCls}-cell-disabled`]: disabled, [`${prefixCls}-selected-cell`]: yearData.year === currentYear, [`${prefixCls}-last-decade-cell`]: yearData.year < startYear, [`${prefixCls}-next-decade-cell`]: yearData.year > endYear, @@ -83,7 +90,7 @@ export default class YearPanel extends React.Component { role="gridcell" title={yearData.title} key={yearData.content} - onClick={clickHandler} + onClick={disabled ? null : clickHandler} className={classnames(classNameMap)} >