Fix for months not being able to be rendered

Simon Egersand

2016-11-17 98310dc9cb8c9545d66612d129c6c1f2c6d43620

Fix for months not being able to be rendered

When setting the locale prop the renderMonth method sometimes threw an
exception for not being able to get the months. This commit changes how
we get months, we are now getting them more correct. We're not relying
on some private method anymore.

 src/MonthsView.js

@@ -70,11 +70,13 @@
    },

    renderMonth: function( props, month ) {
        var monthsShort = this.props.viewDate.localeData()._monthsShort;
        return DOM.td( props, monthsShort.standalone
            ? capitalize( monthsShort.standalone[ month ] )
            : monthsShort[ month ]
        );
        var localMoment = this.props.viewDate;
        var monthStr = localMoment.localeData().monthsShort(localMoment.month(month));
        var strLength = 3;
        // Because some months are up to 5 characters long, we want to
        // use a fixed string length for consistency
        var monthStrFixedLength = monthStr.substring(0, strLength);
        return DOM.td( props, capitalize( monthStrFixedLength ) );
    },

    isValidDate: function(){

 tests/datetime-spec.js

@@ -129,7 +129,7 @@
        assert.equal( input.value, strDate );
    });

    it( 'UTC Value from local moment.', function(){
    it( 'UTC Value from local moment', function(){
        var component = createDatetime({
            value: mDate,
            utc: true
@@ -138,7 +138,7 @@
        assert.equal( input.value, strDateUTC );
    });

    it( 'UTC Value from UTC moment.', function(){
    it( 'UTC Value from UTC moment', function(){
        var component = createDatetime({
            value: mDateUTC,
            utc: true
@@ -147,7 +147,7 @@
        assert.equal( input.value, strDateUTC );
    });

    it( 'UTC Value from utc string.', function(){
    it( 'UTC Value from utc string', function(){
        var component = createDatetime({
            value: strDateUTC,
            utc: true
@@ -195,6 +195,7 @@
        // There must not be a date toggle
        assert.equal( view.querySelectorAll('thead').length, 0);
    });

    it( 'timeFormat', function(){
        var format = 'HH:mm:ss:SSS',
            component = createDatetime({ value: date, timeFormat: format }),
@@ -285,7 +286,6 @@
        assert.equal( view.querySelector('.rdtDay').innerHTML, 'day' );
    });


    it( 'renderMonth', function(){
        var props, month, year, selectedDate,
            component = createDatetime({ value: mDate, viewMode: 'months', renderMonth: function( p, m, y, selected ){
@@ -367,7 +367,7 @@
        assert.equal( dt.view().className, 'rdtDays' );
        ev.click( dt.timeSwitcher() );
        assert.equal( dt.view().className, 'rdtTime' );
    })
    });

    it( 'selectYear', function(){
        createDatetime({ viewMode: 'years', defaultValue: date });
@@ -389,7 +389,6 @@
        ev.click( dt.next() );
        assert.equal( dt.switcher().innerHTML, '2020-2029' );
    });


    it( 'decrease decade', function(){
        createDatetime({ viewMode: 'years', defaultValue: date });
@@ -420,7 +419,6 @@
        ev.click( dt.next() );
        assert.equal( dt.switcher().getAttribute('data-value'), '2002' );
    });


    it( 'decrease year', function(){
        createDatetime({ viewMode: 'months', defaultValue: date });
@@ -581,7 +579,6 @@
    });

    it( 'long increase time', function( done ){
        var i = 0;
        createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date});

        trigger( 'mousedown', dt.timeUp( 0 ) );
@@ -594,7 +591,6 @@
    });

    it( 'long decrease time', function( done ){
        var i = 0;
        createDatetime({ timeFormat: "HH:mm:ss:SSS", viewMode: 'time', defaultValue: date});

        trigger( 'mousedown', dt.timeDown( 0 ) );
@@ -710,4 +706,28 @@
        assert.equal( dt.year(6).className, 'rdtYear' );
        assert.equal( dt.year(7).className, 'rdtYear rdtDisabled' );
    });

    it( 'locale', function(){
        createDatetime({ locale: 'nl' });
        view = dt.view();
        var weekDays = [];
        var weekDaysHtmlQuery = view.querySelectorAll('.rdtDays .dow');
        Array.prototype.forEach.call(weekDaysHtmlQuery, function(el) {
            weekDays.push(el.innerHTML);
        });
        weekDays = weekDays.splice(0, 7);
        var weekDayNames = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'];
        weekDays.map(function(weekDayHtml, index) {
            assert.equal( weekDayHtml, weekDayNames[index] );
        });
    });

    it( 'locale in viewMode=months', function(){
        createDatetime({ viewMode: 'months', locale: 'nl' });
        view = dt.view();
        var thirdMonth = view.querySelectorAll('.rdtMonth')[2].innerHTML;
        var fifthMonth = view.querySelectorAll('.rdtMonth')[4].innerHTML;
        assert.equal( thirdMonth, 'Mrt' );
        assert.equal( fifthMonth, 'Mei' );
    });
});