From 1d9d49f2933ef504ce6255d17cc3ef8c28fe8751 Mon Sep 17 00:00:00 2001 From: Mateusz Witkowski Date: Tue, 30 Jul 2019 20:39:21 +0200 Subject: [PATCH 1/3] years and months are disabled based on disabledDate --- assets/index/YearPanel.less | 10 ++++++++++ examples/start-end-range.js | 13 +++++++++++++ src/Calendar.jsx | 1 + src/MonthCalendar.jsx | 2 +- src/calendar/CalendarHeader.jsx | 6 +++++- src/date/DateTBody.jsx | 22 +++++++++++++++++----- src/month/MonthPanel.jsx | 2 ++ src/month/MonthTable.js | 11 ++++++++++- src/range-calendar/CalendarPart.js | 7 +++++-- src/year/YearPanel.jsx | 11 ++++++++++- 10 files changed, 74 insertions(+), 11 deletions(-) diff --git a/assets/index/YearPanel.less b/assets/index/YearPanel.less index 6b31dc8ec..4e1f0259c 100644 --- a/assets/index/YearPanel.less +++ b/assets/index/YearPanel.less @@ -95,6 +95,16 @@ .@{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/examples/start-end-range.js b/examples/start-end-range.js index 013dfd1de..e53444b1b 100644 --- a/examples/start-end-range.js +++ b/examples/start-end-range.js @@ -119,6 +119,18 @@ class Demo extends React.Component { return endValue.diff(startValue, 'days') < 0; } + disabledDate = (current) => { + if (!current) { + // allow empty select + return false; + } + const date = moment(); + date.hour(0); + date.minute(0); + date.second(0); + return current.valueOf() < date.valueOf(); // can not select days before today + } + render() { const state = this.state; return ( @@ -132,6 +144,7 @@ class Demo extends React.Component { open={this.state.startOpen} value={[state.startValue, state.endValue]} onChange={this.onStartChange} + disabledDate={ this.disabledDate} />

diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 2e8d89898..bf09d2ff3 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -341,6 +341,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 857f2f617..79d9b4de1 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 a7eccfc17..1bd8e34d3 100644 --- a/src/calendar/CalendarHeader.jsx +++ b/src/calendar/CalendarHeader.jsx @@ -31,6 +31,7 @@ export default class CalendarHeader extends React.Component { locale: PropTypes.object, enablePrev: PropTypes.any, enableNext: PropTypes.any, + disabledDate: PropTypes.func, disabledMonth: PropTypes.func, renderFooter: PropTypes.func, onMonthSelect: PropTypes.func, @@ -152,6 +153,7 @@ export default class CalendarHeader extends React.Component { showTimePicker, enableNext, enablePrev, + disabledDate, disabledMonth, renderFooter, } = props; @@ -165,7 +167,8 @@ export default class CalendarHeader extends React.Component { rootPrefixCls={prefixCls} onSelect={this.onMonthSelect} onYearPanelShow={() => this.showYearPanel('month')} - disabledDate={disabledMonth} + disabledDate={disabledDate} + disabledMonth={disabledMonth} cellRender={props.monthCellRender} contentRender={props.monthCellContentRender} renderFooter={renderFooter} @@ -182,6 +185,7 @@ export default class CalendarHeader extends React.Component { onSelect={this.onYearSelect} onDecadePanelShow={this.showDecadePanel} renderFooter={renderFooter} + disabledDate={disabledDate} /> ); } diff --git a/src/date/DateTBody.jsx b/src/date/DateTBody.jsx index 21ebc70e0..92a70d41c 100644 --- a/src/date/DateTBody.jsx +++ b/src/date/DateTBody.jsx @@ -33,6 +33,7 @@ export default class DateTBody extends React.Component { contentRender: PropTypes.func, dateRender: PropTypes.func, disabledDate: PropTypes.func, + disabledMonth: PropTypes.func, prefixCls: PropTypes.string, selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), value: PropTypes.object, @@ -48,7 +49,7 @@ export default class DateTBody extends React.Component { const props = this.props; const { contentRender, prefixCls, selectedValue, value, - showWeekNumber, dateRender, disabledDate, + showWeekNumber, dateRender, disabledDate, disabledMonth, hoverValue, } = props; let iIndex; @@ -183,15 +184,26 @@ export default class DateTBody extends React.Component { cls += ` ${lastDayOfMonthClass}`; } - if (disabledDate) { - if (disabledDate(current, value)) { + if (disabledDate || disabledMonth) { + if ( + (disabledDate && disabledDate(current, value)) + || (disabledMonth && disabledMonth(value)) + ) { disabled = true; - if (!last || !disabledDate(last, value)) { + if ( + !last + || (disabledDate && !disabledDate(last, value)) + || (disabledMonth && disabledMonth(last)) + ) { cls += ` ${firstDisableClass}`; } - if (!next || !disabledDate(next, value)) { + if ( + !next + || (disabledDate && !disabledDate(next, value)) + || (disabledMonth && disabledMonth(next)) + ) { cls += ` ${lastDisableClass}`; } } diff --git a/src/month/MonthPanel.jsx b/src/month/MonthPanel.jsx index 5913ef59c..0083618e0 100644 --- a/src/month/MonthPanel.jsx +++ b/src/month/MonthPanel.jsx @@ -15,6 +15,7 @@ class MonthPanel extends React.Component { static propTypes = { onChange: PropTypes.func, disabledDate: PropTypes.func, + disabledMonth: PropTypes.func, onSelect: PropTypes.func, renderFooter: PropTypes.func, rootPrefixCls: PropTypes.string, @@ -105,6 +106,7 @@ class MonthPanel extends React.Component {
{ const tds = month.map(monthData => { let disabled = false; - if (props.disabledDate) { + + if (props.disabledDate || props.disabledMonth) { const testValue = value.clone(); testValue.month(monthData.value); + + if (props.disabledDate) { disabled = props.disabledDate(testValue); } + + if (props.disabledMonth) { + disabled = props.disabledMonth(testValue); + } + } + const classNameMap = { [`${prefixCls}-cell`]: 1, [`${prefixCls}-cell-disabled`]: disabled, diff --git a/src/range-calendar/CalendarPart.js b/src/range-calendar/CalendarPart.js index 714b01b19..79555fc9c 100644 --- a/src/range-calendar/CalendarPart.js +++ b/src/range-calendar/CalendarPart.js @@ -18,6 +18,7 @@ export default class CalendarPart extends React.Component { format: PropTypes.any, placeholder: PropTypes.any, disabledDate: PropTypes.any, + disabledMonth: PropTypes.any, timePicker: PropTypes.any, disabledTime: PropTypes.any, onInputChange: PropTypes.func, @@ -40,7 +41,7 @@ export default class CalendarPart extends React.Component { mode, direction, locale, format, placeholder, - disabledDate, timePicker, disabledTime, + disabledDate, timePicker, disabledTime, disabledMonth, timePickerDisabledTime, showTimePicker, onInputChange, onInputSelect, enablePrev, enableNext, clearIcon, @@ -102,7 +103,8 @@ export default class CalendarPart extends React.Component { enablePrev={enablePrev} onValueChange={props.onValueChange} onPanelChange={props.onPanelChange} - disabledMonth={props.disabledMonth} + disabledMonth={disabledMonth} + disabledDate={disabledDate} /> {showTimePicker ?
@@ -118,6 +120,7 @@ export default class CalendarPart extends React.Component { onSelect={props.onSelect} onDayHover={props.onDayHover} disabledDate={disabledDate} + disabledMonth={disabledMonth} showWeekNumber={props.showWeekNumber} />
diff --git a/src/year/YearPanel.jsx b/src/year/YearPanel.jsx index f679a52bd..51e96900c 100644 --- a/src/year/YearPanel.jsx +++ b/src/year/YearPanel.jsx @@ -67,8 +67,17 @@ 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, @@ -86,7 +95,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)} > Date: Tue, 30 Jul 2019 20:54:11 +0200 Subject: [PATCH 2/3] fixed indentation --- src/month/MonthTable.js | 4 ++-- tests/__snapshots__/RangeCalendar.spec.jsx.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/month/MonthTable.js b/src/month/MonthTable.js index 92c65ef27..37a8b8afc 100644 --- a/src/month/MonthTable.js +++ b/src/month/MonthTable.js @@ -77,8 +77,8 @@ class MonthTable extends Component { testValue.month(monthData.value); if (props.disabledDate) { - disabled = props.disabledDate(testValue); - } + disabled = props.disabledDate(testValue); + } if (props.disabledMonth) { disabled = props.disabledMonth(testValue); diff --git a/tests/__snapshots__/RangeCalendar.spec.jsx.snap b/tests/__snapshots__/RangeCalendar.spec.jsx.snap index 8735dae14..1bdb4e393 100644 --- a/tests/__snapshots__/RangeCalendar.spec.jsx.snap +++ b/tests/__snapshots__/RangeCalendar.spec.jsx.snap @@ -6780,7 +6780,7 @@ exports[`RangeCalendar key control 1`] = ` Back to today From 86d711a871bb427581785c2accf7b5462a4d6e83 Mon Sep 17 00:00:00 2001 From: Mateusz Witkowski Date: Wed, 31 Jul 2019 20:19:44 +0200 Subject: [PATCH 3/3] fixed snapshot for RangeCalendar --- tests/__snapshots__/RangeCalendar.spec.jsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/__snapshots__/RangeCalendar.spec.jsx.snap b/tests/__snapshots__/RangeCalendar.spec.jsx.snap index 1bdb4e393..8735dae14 100644 --- a/tests/__snapshots__/RangeCalendar.spec.jsx.snap +++ b/tests/__snapshots__/RangeCalendar.spec.jsx.snap @@ -6780,7 +6780,7 @@ exports[`RangeCalendar key control 1`] = ` Back to today