Version 2.11.0

Author: simeg

CHANGELOG.md

@@ -1,5 +1,13 @@
 Changelog
 =========
+## 2.11.0
+* onFocus now receives the browser event
+* Do not open browser menu on right click of arrows in time view
+* Open calendar when onClick is triggered, before it would just react to onFocus
+* Update TypeScript definitions for value and defaultValue to comply with code
+* Fix bug where AM/PM would not sync between component value and input field value
+* Add renderInput prop which let's the consumer of the component render their own HTML input element
+
 ## 2.10.3
 * Update react-onclickoutside dependancy
 * Remove isValidDate check before rendering as implementation was causing crashes in some ednge cases.

dist/react-datetime.js

@@ -1,5 +1,5 @@
 /*
-react-datetime v2.10.3
+react-datetime v2.11.0
 https://github.com/YouCanBookMe/react-datetime
 MIT: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE
 */
@@ -412,10 +412,10 @@ return /******/ (function(modules) { // webpackBootstrap
 			this.props.onChange( date );
 		},
 
-		openCalendar: function() {
-			if (!this.state.open) {
+		openCalendar: function( e ) {
+			if ( !this.state.open ) {
 				this.setState({ open: true }, function() {
-					this.props.onFocus();
+					this.props.onFocus( e );
 				});
 			}
 		},
@@ -477,26 +477,31 @@ return /******/ (function(modules) { // webpackBootstrap
 				children = [];
 
 			if ( this.props.input ) {
-				children = [ React.createElement('input', assign({
-					key: 'i',
+				var finalInputProps = assign({
 					type: 'text',
 					className: 'form-control',
+					onClick: this.openCalendar,
 					onFocus: this.openCalendar,
 					onChange: this.onInputChange,
 					onKeyDown: this.onInputKey,
-					value: this.state.inputValue
-				}, this.props.inputProps ))];
+					value: this.state.inputValue,
+				}, this.props.inputProps);
+				if ( this.props.renderInput ) {
+					children = [ React.createElement('div', { key: 'i' }, this.props.renderInput( finalInputProps, this.openCalendar )) ];
+				} else {
+					children = [ React.createElement('input', assign({ key: 'i' }, finalInputProps ))];
+				}
 			} else {
 				className += ' rdtStatic';
 			}
 
 			if ( this.state.open )
 				className += ' rdtOpen';
 
-			return React.createElement('div', {className: className}, children.concat(
-				React.createElement('div',
+			return React.createElement( 'div', { className: className }, children.concat(
+				React.createElement( 'div',
 					{ key: 'dt', className: 'rdtPicker' },
-					React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
+					React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
 				)
 			));
 		}
@@ -3455,17 +3460,19 @@ return /******/ (function(modules) { // webpackBootstrap
 				}
 			}
 
+			var hours = date.format( 'H' );
+			
 			var daypart = false;
 			if ( this.state !== null && this.props.timeFormat.toLowerCase().indexOf( ' a' ) !== -1 ) {
 				if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
-					daypart = ( this.state.hours >= 12 ) ? 'PM' : 'AM';
+					daypart = ( hours >= 12 ) ? 'PM' : 'AM';
 				} else {
-					daypart = ( this.state.hours >= 12 ) ? 'pm' : 'am';
+					daypart = ( hours >= 12 ) ? 'pm' : 'am';
 				}
 			}
 
 			return {
-				hours: date.format( 'H' ),
+				hours: hours,
 				minutes: date.format( 'mm' ),
 				seconds: date.format( 'ss' ),
 				milliseconds: date.format( 'SSS' ),
@@ -3485,19 +3492,19 @@ return /******/ (function(modules) { // webpackBootstrap
 					}
 				}
 				return React.createElement('div', { key: type, className: 'rdtCounter' }, [
-					React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ) }, '▲' ),
+					React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ), onContextMenu: this.disableContextMenu }, '▲' ),
 					React.createElement('div', { key: 'c', className: 'rdtCount' }, value ),
-					React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ) }, '▼' )
+					React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), onContextMenu: this.disableContextMenu }, '▼' )
 				]);
 			}
 			return '';
 		},
 
 		renderDayPart: function() {
 			return React.createElement('div', { key: 'dayPart', className: 'rdtCounter' }, [
-				React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▲' ),
+				React.createElement('span', { key: 'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▲' ),
 				React.createElement('div', { key: this.state.daypart, className: 'rdtCount' }, this.state.daypart ),
-				React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours') }, '▼' )
+				React.createElement('span', { key: 'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'toggleDayPart', 'hours'), onContextMenu: this.disableContextMenu }, '▼' )
 			]);
 		},
 
@@ -3613,6 +3620,11 @@ return /******/ (function(modules) { // webpackBootstrap
 			};
 		},
 
+		disableContextMenu: function( event ) {
+			event.preventDefault();
+			return false;
+		},
+
 		padValues: {
 			hours: 1,
 			minutes: 2,

dist/react-datetime.min.js

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