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); - disabled = props.disabledDate(testValue); + + 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)} >