Extend time input widget to support AM/PM clock format

Michal Kokocinski

2016-06-15 a17593562bc5d122f3c11fa9d2f2bc207ac4af1c

Extend time input widget to support AM/PM clock format

 src/TimeView.js

@@ -23,20 +23,33 @@
            }
        }

        let daypart = false;
        if( this.props.timeFormat.indexOf(' A') != -1  && this.state != null ){
            daypart = ( this.state.hours > 12 ) ? 'PM' : 'AM';
        }

        return {
            hours: date.format('H'),
            minutes: date.format('mm'),
            seconds: date.format('ss'),
            milliseconds: date.format('SSS'),
            daypart: daypart,
            counters: counters
        };
    },
    renderCounter: function( type ){
        return DOM.div({ key: type, className: 'rdtCounter'}, [
            DOM.span({ key:'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
            DOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),
            DOM.span({ key:'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
        ]);
        if (type !== 'daypart') {
            let value = this.state[ type ];
            if (type === 'hours' && this.props.timeFormat.indexOf(' A') != -1 && value > 12) {
                value = value - 12;
            }
            return DOM.div({ key: type, className: 'rdtCounter'}, [
                DOM.span({ key:'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
                DOM.div({ key:'c', className: 'rdtCount' }, value ),
                DOM.span({ key:'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
            ]);
        }
        return '';
    },
    render: function() {
        var me = this,
@@ -49,6 +62,11 @@
            counters.push( me.renderCounter( c ) );
        });


        if (this.state.daypart !== false) {
            counters.push(DOM.div({ key: this.state.daypart, className: 'rdtDayPart'}, this.state.daypart ));
        }

        if( this.state.counters.length == 3 && this.props.timeFormat.indexOf('S') != -1 ){
            counters.push( DOM.div( {className: 'rdtCounterSeparator', key: 'sep5' }, ':' ));
            counters.push(