Add support for disabling months and years according to isValidDate

Rémi

2016-11-15 c306f2fcc9b08aef38a246f94949826965ff66c1

Add support for disabling months and years according to isValidDate

* disable months according to isValidDate function

* deactivate click on disabled month

* pass unit tests (month view)

* disable years according to isValidDate props function

* add example valid date with a view month

* add unit tests

 example/example.js

@@ -3,6 +3,12 @@
var ReactDOM = require('react-dom');

ReactDOM.render(
  React.createElement(DateTime, { timeFormat: true }),
  React.createElement(DateTime, {
    viewMode: 'months',
    dateFormat: 'MMMM',
    isValidDate: function(current){
      return current.isBefore(DateTime.moment().startOf('month'));
    }
  }),
  document.getElementById('datetime')
);

 src/MonthsView.js

@@ -23,20 +23,29 @@
            i = 0,
            months = [],
            renderer = this.props.renderMonth || this.renderMonth,
            isValid = this.props.isValidDate || this.isValidDate,
            classes, props
        ;

        while (i < 12) {
            classes = 'rdtMonth';
            var currentMonth = this.props.viewDate.clone().set({ year: year, month: i, date: 1 });
            var disabled = !isValid(currentMonth);

            if ( disabled )
                classes += ' rdtDisabled';

            if ( date && i === month && year === date.year() )
                classes += ' rdtActive';

            props = {
                key: i,
                'data-value': i,
                className: classes,
                onClick: this.props.updateOn === 'months'? this.updateSelectedMonth : this.props.setDate('month')
                className: classes
            };

            if ( !disabled )
                props.onClick = this.props.updateOn === 'months'? this.updateSelectedMonth : this.props.setDate('month');

            months.push( renderer( props, i, year, date && date.clone() ));

@@ -61,6 +70,9 @@
            ? capitalize( monthsShort.standalone[ month ] )
            : monthsShort[ month ]
        );
    },
    isValidDate: function(){
        return 1;
    }
});


 src/YearsView.js

@@ -23,23 +23,32 @@
            rows = [],
            renderer = this.props.renderYear || this.renderYear,
            selectedDate = this.props.selectedDate,
            isValid = this.props.isValidDate || this.isValidDate,
            classes, props
        ;

        year--;
        while (i < 11) {
            classes = 'rdtYear';
            var currentYear = this.props.viewDate.clone().set({ year: year, month: 1, date: 1 });
            if ( i === -1 | i === 10 )
                classes += ' rdtOld';

            var disabled = !isValid(currentYear);
            if ( disabled )
                classes += ' rdtDisabled';

            if ( selectedDate && selectedDate.year() === year )
                classes += ' rdtActive';

            props = {
                key: year,
                'data-value': year,
                className: classes,
                onClick: this.props.updateOn === 'years' ? this.updateSelectedYear : this.props.setDate('year')
                className: classes
            };

            if ( !disabled )
                props.onClick = this.props.updateOn === 'years' ? this.updateSelectedYear : this.props.setDate('year');

            years.push( renderer( props, year, selectedDate && selectedDate.clone() ));

@@ -61,6 +70,10 @@

    renderYear: function( props, year ){
        return DOM.td( props, year );
    },

    isValidDate: function(){
        return 1;
    }
});


 tests/datetime-spec.js

@@ -692,4 +692,22 @@
        dt.input().value = invalidStrDate;
        ev.change( dt.input() );
    });

    it( 'disable months', function(){
        createDatetime({ viewMode: 'months', isValidDate: function( current ){
                return current.isBefore(moment('2016-06-01', 'YYYY-MM-DD'));
        }});
        assert.equal( dt.month(0).className, 'rdtMonth' );
        assert.equal( dt.month(4).className, 'rdtMonth' );
        assert.equal( dt.month(5).className, 'rdtMonth rdtDisabled' );
        assert.equal( dt.month(11).className, 'rdtMonth rdtDisabled' );
    });

    it( 'disable years', function(){
        createDatetime({ viewMode: 'years', isValidDate: function( current ){
                return current.isBefore(moment('2016-01-01', 'YYYY-MM-DD'));
        }});
        assert.equal( dt.year(6).className, 'rdtYear' );
        assert.equal( dt.year(7).className, 'rdtYear rdtDisabled' );
    });
});