Nikolai Brendler
2015-10-13 0eb226822a66101c8e779a798351357883c78110
Add a 'strictParsing' prop which uses Moment's strict parsing.
3 files modified
31 ■■■■■ changed files
DateTime.js 8 ●●●●● patch | view | raw | blame | history
README.md 1 ●●●● patch | view | raw | blame | history
tests/datetime-spec.js 22 ●●●●● patch | view | raw | blame | history
DateTime.js
@@ -33,7 +33,8 @@
        viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
        isValidDate: TYPES.func,
        minDate: TYPES.object,
        maxDate: TYPES.object
        maxDate: TYPES.object,
        strictParsing: TYPES.bool
    },
    getDefaultProps: function() {
@@ -47,7 +48,8 @@
            onBlur: nof,
            onChange: nof,
            timeFormat: true,
            dateFormat: true
            dateFormat: true,
            strictParsing: false
        };
    },
@@ -258,7 +260,7 @@
    },
    localMoment: function( date, format ){
        var m = moment( date, format );
        var m = moment( date, format, this.props.strictParsing );
        if( this.props.locale )
            m.locale( this.props.locale );
        return m;
README.md
@@ -51,6 +51,7 @@
| **renderDay** | function | DOM.td( day ) | Customize the way that the days are shown in the day picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [appearance customization](#appearance-customization) |
| **renderMonth** | function | DOM.td( month ) | Customize the way that the months are shown in the month picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) |
| **renderYear** | function | DOM.td( year ) | Customize the way that the years are shown in the year picker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `year` to be shown, and must return a React component. See [appearance customization](#appearance-customization) |
| **strictParsing** | boolean | false | Whether to use moment's [strict parsing](http://momentjs.com/docs/#/parsing/string-format/) when parsing input.
## i18n
Different language and date formats are supported by react-datetime. React uses [moment.js](http://momentjs.com/) to format the dates, and the easiest way of changing the language of the calendar is [changing the moment.js locale](http://momentjs.com/docs/#/i18n/changing-locale/).
tests/datetime-spec.js
@@ -558,5 +558,27 @@
        dt.input().value = '';
        Utils.Simulate.change( dt.input() );
    });
    it( 'strictParsing=true', function( done ){
        var invalidStrDate = strDate + 'x';
        createDatetime({ defaultValue: '', strictParsing: true, onChange: function( updated ){
            assert.equal( updated, invalidStrDate);
            done();
        }});
        dt.input().value = invalidStrDate;
        Utils.Simulate.change( dt.input() );
    });
    it( 'strictParsing=false', function( done ){
        var invalidStrDate = strDate + 'x';
        createDatetime({ defaultValue: '', strictParsing: false, onChange: function( updated ){
            assert.equal( mDate.format('L LT'), updated.format('L LT') );
            done();
        }});
        dt.input().value = invalidStrDate;
        Utils.Simulate.change( dt.input() );
    });
});