Add position prop

README.md

@@ -56,6 +56,7 @@ Below we have all the props that we can use with the `<DateTime>` component. The
 | **dateFormat**   | `boolean` or `string`  | `true` | Defines the format for the date. It accepts any [Moment.js date format](http://momentjs.com/docs/#/displaying/format/) (not in localized 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, see [available units docs](#specify-available-units). |
 | **timeFormat**   | `boolean` or `string`  | `true` | Defines the format for the time. It accepts any [Moment.js time format](http://momentjs.com/docs/#/displaying/format/) (not in localized 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, see [available units docs](#specify-available-units). |
 | **input** | `boolean` | `true` | Whether to show an input field to edit the date manually. |
+| **position** | `string` | `down` | Whether to show the picker above or below the input feild. `up` to show above the input feild. |
 | **open** | `boolean` | `null` | Whether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. |
 | **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).
 | **utc** | `boolean` | `false` | When true, input time values will be interpreted as UTC (Zulu time) by Moment.js. Otherwise they will default to the user's local timezone.

css/react-datetime.css

@@ -16,6 +16,10 @@
   box-shadow: 0 1px 3px rgba(0,0,0,.1);
   border: 1px solid #f9f9f9;
 }
+.rdtUp{
+  position: absolute;
+  top: -306px;
+}
 .rdtOpen .rdtPicker {
   display: block;
 }

src/DateTime.js

@@ -89,13 +89,23 @@ export default class Datetime extends React.Component {
 		return (
 			<ClickableWrapper className={ this.getClassName() } onClickOut={ this._handleClickOutside }>
 				{ this.renderInput() }
-				<div className="rdtPicker">
+				<div className={this.getClassNames()}>
 					{ this.renderView() }
 				</div>
 			</ClickableWrapper>
 		);
 	}
 
+	getClassNames() {
+		let defaultClassName='rdtPicker';
+		if (this.props.position) {
+			const mPosition=this.props.position.toLowerCase();
+			if (mPosition==='up') return defaultClassName+' rdtUp';
+			return defaultClassName;
+		}
+		return defaultClassName;
+	}
+
 	renderInput() {
 		if ( !this.props.input ) return;
 

src/playground/App.js

@@ -14,8 +14,8 @@ class App extends React.Component {
 
 	render() {
 		return (
-			<div>
-				<Datetime />
+			<div style={{marginTop:'48vh'}}>
+				<Datetime position='up' />
 			</div>
 		);
 	}