diff --git a/DateTime.js b/DateTime.js index 40b11bd6b..1ab602748 100644 --- a/DateTime.js +++ b/DateTime.js @@ -396,10 +396,25 @@ var Datetime = createClass({ this.updateSelectedDate(e); }, + alwaysValidDate: function () { + return true; + }, + renderTodayButton: function (key) { + var now = moment(new Date()); + var date = this.state.viewDate.clone() + .month( now.month() ) + .date( now.date() ) + .year( now.year() ); + + var isValidDate = this.props.isValidDate || this.alwaysValidDate; + + var isValid = date.isValid && isValidDate(date); + var classes = isValid ? 'rdtTodayButton' : 'rdtTodayButton rdtDisabled'; + return this.props.showTodayButton ? React.createElement( 'button', - {key: key, className: 'rdtTodayButton', onClick: this.goToToday, 'data-value': '10'}, + {key: key, className: classes, onClick: isValid ? this.goToToday : undefined}, 'Today' ) : undefined; }, diff --git a/css/react-datetime.css b/css/react-datetime.css index cfccca8a7..6e83c1aa0 100644 --- a/css/react-datetime.css +++ b/css/react-datetime.css @@ -225,4 +225,9 @@ td.rdtYear:hover { .rdtTodayButton:focus { outline: none; +} + +.rdtTodayButton.rdtDisabled { + color: #999999; + cursor: not-allowed; } \ No newline at end of file diff --git a/example/example.js b/example/example.js index 780d125c9..d20f14e53 100644 --- a/example/example.js +++ b/example/example.js @@ -6,7 +6,11 @@ ReactDOM.render( React.createElement(DateTime, { viewMode: 'days', dateFormat: 'MM/DD/YY', - showTodayButton: true + showTodayButton: true, + closeOnSelect: true, + isValidDate: function(current) { + return current.isBefore(DateTime.moment().startOf('month')); + } }), document.getElementById('datetime') ); diff --git a/example/react-datetime.css b/example/react-datetime.css index 1b4ad88dc..82d9844e8 100644 --- a/example/react-datetime.css +++ b/example/react-datetime.css @@ -234,4 +234,9 @@ td.rdtYear:hover { .rdtTodayButton:focus { outline: none; +} + +.rdtTodayButton.rdtDisabled { + color: #999999; + cursor: not-allowed; } \ No newline at end of file diff --git a/test/tests.spec.js b/test/tests.spec.js index 94752fd2d..3c3cd113f 100644 --- a/test/tests.spec.js +++ b/test/tests.spec.js @@ -36,6 +36,18 @@ describe('Datetime', () => { expect(onChangeFn).toHaveBeenCalled(); }); + it('disables today button is today is not a valid date', () => { + const component = utils.createDatetime({ showTodayButton: true, + dateFormat: 'MM/DD/YYYY', timeFormat: false, isValidDate: function(current) { + return current.isBefore(moment().startOf('month')); + } }); + const onChangeFn = jest.fn(); + + expect(component.find('.rdtTodayButton').hasClass('rdtDisabled')).toBeTruthy(); + utils.clickOnElement(component.find('.rdtTodayButton')); + expect(onChangeFn).not.toHaveBeenCalled(); + }); + it('viewMode=days: renders days, week days, month, year', () => { const date = new Date(2000, 0, 15, 2, 2, 2, 2), component = utils.createDatetime({ viewMode: 'days', defaultValue: date });