Fixed time not decreasing added buttons for controls

Author: arqex

README.md

@@ -51,7 +51,7 @@ require('moment/locale/fr');
 
 If there are multiple locales loaded, you can use the prop `locale` to define what language should be used by the instance:
 ```js
-<Datetime locale="fr" />
+<Datetime locale="fr-ca" />
 <Datetime locale="de" />
 ```
 [Here you can see the i18n example working](http://codepen.io/arqex/pen/PqJMQV).

css/react-datetime.css

@@ -95,7 +95,7 @@
   border-bottom: none;
 }
 .rdtPicker th.switch {
-  width: 145px;
+  width: 100px;
 }
 .rdtPicker th.next,
 .rdtPicker th.prev {
@@ -119,6 +119,20 @@
 	border-top: 1px solid #f9f9f9;
 }
 
+.rdtPicker button {
+	border: none;
+	background: none;
+	cursor: pointer;
+}
+.rdtPicker button:hover {
+	background-color: #eee;
+}
+
+.rdtPicker thead button {
+	width: 100%;
+	height: 100%;
+}
+
 td.month,
 td.year {
 	height: 50px;

dist/react-datetime.js

@@ -1,6 +1,6 @@
 {
   "name": "react-datetime",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A lightweight but complete datetime picker React.js component.",
   "homepage": "https://github.com/arqex/react-datetime",
   "repository": {

dist/react-datetime.min.js

@@ -15,9 +15,9 @@ var DateTimePickerDays = React.createClass({
 		tableChildren = [
 			DOM.thead({ key: 'th'}, [
 				DOM.tr({ key: 'h'},[
-					DOM.th({ key: 'p', className: 'prev', onClick: this.props.subtractTime(1, 'months') }, '‹'),
+					DOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months')}, '‹')),
 					DOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5 }, locale.months( date ) + ' ' + date.year() ),
-					DOM.th({ key: 'n', className: 'next', onClick: this.props.addTime(1, 'months')}, '›' )
+					DOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months')}, '›'))
 				]),
 				DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day ); }) )
 			]),

package.json

@@ -36,9 +36,9 @@ var DateTimePickerMonths = React.createClass({
 	render: function() {
 		return DOM.div({ className: 'rdtMonths' },[
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev', onClick: this.props.subtractTime(1, 'years') }, '‹'),
-				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 5 }, this.props.viewDate.year() ),
-				DOM.th({ key: 'next', className: 'next', onClick: this.props.addTime(1, 'years')}, '›' )
+				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years')}, '‹')),
+				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, this.props.viewDate.year() ),
+				DOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years')}, '›'))
 			]))),
 			DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
 		]);

src/DaysView.js

@@ -30,9 +30,9 @@ var DateTimePickerTime = React.createClass({
 	},
 	renderCounter: function( type ){
 		return DOM.div({ key: type, className: 'rdtCounter'}, [
-			DOM.div({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
+			DOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
 			DOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),
-			DOM.div({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▼' )
+			DOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
 		]);
 	},
 	render: function() {

src/MonthsView.js

@@ -36,9 +36,9 @@ var DateTimePickerYears = React.createClass({
 
 		return DOM.div({ className: 'rdtYears' },[
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev', onClick: this.props.subtractTime(10, 'years') }, '‹'),
-				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 5 }, year + '-' + (year + 9) ),
-				DOM.th({ key: 'next', className: 'next', onClick: this.props.addTime(10, 'years')}, '›' )
+				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years')}, '‹')),
+				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),
+				DOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years')}, '›'))
 				]))),
 			DOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))
 		]);