marquex
2015-07-22 cbe64429fc37405dd519a006f20dde710fe226de
Updated docs for date&time formats
2 files modified
52 ■■■■■ changed files
DateTime.js 48 ●●●●● patch | view | raw | blame | history
README.md 4 ●●●● patch | view | raw | blame | history
DateTime.js
@@ -28,8 +28,8 @@
        onChange: TYPES.func,
        locale: TYPES.string,
        input: TYPES.bool,
        dateFormat: TYPES.string,
        timeFormat: TYPES.string,
        // dateFormat: TYPES.string | TYPES.bool,
        // timeFormat: TYPES.string | TYPES.bool,
        inputProps: TYPES.object,
        viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
        isValidDate: TYPES.func,
@@ -45,15 +45,22 @@
            inputProps: {},
            input: true,
            onBlur: nof,
            onChange: nof
            onChange: nof,
            timeFormat: true,
            dateFormat: true
        };
    },
    getInitialState: function() {
        var formats = this.getFormats( this.props ),
            date = this.props.date
            date = this.props.date,
            currentView = this.props.viewMode
        ;
        if( !formats.date )
            currentView = 'time';
        return {
            currentView: this.props.viewMode,
            currentView: currentView,
            open: !this.props.input,
            inputFormat: formats.datetime,
            viewDate: this.localMoment(date).startOf("month"),
@@ -64,37 +71,20 @@
    getFormats: function( props ){
        var formats = {
                date: '',
                time: '',
                datetime: ''
                date: props.dateFormat || '',
                time: props.timeFormat || ''
            },
            locale = this.localMoment( props.date ).localeData()
        ;
        if( props.dateFormat ){
            formats.date = props.dateFormat;
        if( formats.date === true ){
            formats.date = locale.longDateFormat('L');
        }
        if( props.timeFormat ){
            formats.time = props.timeFormat;
        if( formats.time === true ){
            formats.time = locale.longDateFormat('LT');
        }
        if( !formats.date && !formats.time ){
            formats.date = locale.longDateFormat('L');
            formats.time = locale.longDateFormat('LT');
            formats.datetime = formats.date + ' ' + formats.time;
        }
        else {
            if( props.dateFormat ){
                formats.date = props.dateFormat;
                formats.datetime = formats.date;
            }
            if( props.timeFormat ){
                if( formats.date )
                    formats.datetime += ' ';
                formats.time = props.timeFormat;
                formats.datetime += formats.time;
            }
        }
        formats.datetime = formats.date + ' ' + formats.time;
        return formats;
    },
README.md
@@ -32,8 +32,8 @@
| Name         | Type    | Default | Description |
| ------------ | ------- | ------- | ----------- |
| **date** | Date  | new Date() | Represents the inital dateTime, this prop is parsed by moment.js, so it is possible to use a date string. |
| **dateFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the date. The default is only set if there is not `timeFormat` defined. |
| **timeFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the time. The default is only set if there is not `dateFormat` defined. |
| **dateFormat**   | `bool` or `string`  | `true` | Defines the format for the date. It accepts any [moment.js date format](http://momentjs.com/docs/#/displaying/format/). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker. |
| **timeFormat**   | `bool` or `string`  | `true` | Defines the format for the time. It accepts any [moment.js time format](http://momentjs.com/docs/#/displaying/format/). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker. |
| **input** | boolean | true | Wether to show an input field to edit the date manually. |
| **locale** | string | null | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n).
| **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter. |