Add AM/PM Arrows to toggle between states (#124)

David Furlong

2016-08-30 3bf154e1b0ae57b5d443757f7be17e64fc648d68

Add AM/PM Arrows to toggle between states (#124)

Add option to switch between AM and PM

 css/react-datetime.css

@@ -210,8 +210,4 @@
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}

.rdtDayPart {
  margin-top: 43px;
}
}

 src/TimeView.js

@@ -57,6 +57,13 @@
        }
        return '';
    },
    renderDayPart: function() {
        return DOM.div({ className: 'rdtCounter'}, [
            DOM.span({ key:'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
            DOM.div({ key: this.state.daypart, className: 'rdtCount'}, this.state.daypart ),
            DOM.span({ key:'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )
        ]);
    },
    render: function() {
        var me = this,
            counters = []
@@ -69,7 +76,7 @@
        });

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

        if ( this.state.counters.length === 3 && this.props.timeFormat.indexOf('S') !== -1 ){
@@ -168,6 +175,12 @@
        seconds: 2,
        milliseconds: 3
    },
    toggleDayPart: function( type ){ // type is always 'hours'
        var value = parseInt(this.state[ type ], 10) + 12;
        if ( value > this.timeConstraints[ type ].max )
            value = this.timeConstraints[ type ].min + (value - (this.timeConstraints[ type ].max + 1));
        return this.pad( type, value );
    },
    increase: function( type ){
        var value = parseInt(this.state[ type ], 10) + this.timeConstraints[ type ].step;
        if ( value > this.timeConstraints[ type ].max )