[Feature] Add useFixedPosition prop to render picker outside an "overflow: hidden" div

README.md

@@ -80,6 +80,7 @@ Below we have all the props that we can use with the `<DateTime>` component. The
 | **closeOnTab** | `boolean` | `true` | When `true` and the input is focused, pressing the `tab` key will close the datepicker.
 | **timeConstraints** | `object` | `null` | Add some constraints to the timepicker. It accepts an `object` with the format `{ hours: { min: 9, max: 15, step: 2 }}`, this example means the hours can't be lower than `9` and higher than `15`, and it will change adding or subtracting `2` hours everytime the buttons are clicked. The constraints can be added to the `hours`, `minutes`, `seconds` and `milliseconds`.
 | **closeOnClickOutside** | `boolean` | `true` | When the calendar is open and `closeOnClickOutside` is `true` (its default value), clickin outside of the calendar or input closes the calendar. If `false` the calendar stays open.
+| **useFixedPosition** | `boolean` | `false` | Forces the picker element to render in a fixed window position, calculating it's coordinates based on it's wrapper. Useful for cases when the datepicker is rendered inside a div with hidden overflow that otherwise would be cropping the component.
 
 ## Imperative API
 Besides controlling the selected date, there is a navigation through months, years, decades that react-datetime handles for us. We can interfere in it, stopping view transtions by using the prop `onBeforeNavigate`, but we can also navigate to a specific view and date by using some imperative methods.

react-datetime.d.ts

@@ -186,6 +186,12 @@ declare module ReactDatetime {
      When true the picker get closed when clicking outside of the calendar or the input box. When false, it stays open.
      */
     closeOnClickOutside?: boolean;
+    /*
+    Forces the picker element to render in a fixed window position, calculating it's coordinates based
+    on it's wrapper. Useful for cases when the datepicker is rendered inside a div with hidden overflow
+    that otherwise would be cropping the component.
+    */
+    useFixedPosition?: boolean;
   }
 
   interface DatetimeComponent extends React.ComponentClass<DatetimepickerProps> {

src/DateTime.js

@@ -50,6 +50,7 @@ export default class Datetime extends React.Component {
 		renderDay: TYPES.func,
 		renderMonth: TYPES.func,
 		renderYear: TYPES.func,
+		useFixedPosition: TYPES.bool,
 	}
 
 	static defaultProps = {
@@ -83,13 +84,17 @@ export default class Datetime extends React.Component {
 	constructor( props ) {
 		super( props );
 		this.state = this.getInitialState();
+		this.wrapper = React.createRef();
+		this.picker = React.createRef();
 	}
 
 	render() {
+		this.props.useFixedPosition && this._updatePickerFixedPosition();
+
 		return (
 			<ClickableWrapper className={ this.getClassName() } onClickOut={ this._handleClickOutside }>
 				{ this.renderInput() }
-				<div className="rdtPicker">
+				<div ref={this.picker} className="rdtPicker" style={this.props.useFixedPosition && { position: 'fixed' }}>
 					{ this.renderView() }
 				</div>
 			</ClickableWrapper>
@@ -112,7 +117,7 @@ export default class Datetime extends React.Component {
 
 		if ( this.props.renderInput ) {   
 			return (
-				<div>
+				<div ref={this.wrapper}>
 					{ this.props.renderInput( finalInputProps, this._openCalendar, this._closeCalendar ) }
 				</div>
 			);
@@ -127,6 +132,14 @@ export default class Datetime extends React.Component {
 		return this.props.renderView( this.state.currentView, this._renderCalendar );
 	}
 
+	_updatePickerFixedPosition() {
+		if (this.picker.current && this.wrapper.current) {
+			const wrapperBounds = this.wrapper.current.getBoundingClientRect();
+			this.picker.current.style.left = `${wrapperBounds.left}px`;
+			this.picker.current.style.top = `${wrapperBounds.top + wrapperBounds.height}px`;
+		}
+	}
+
 	_renderCalendar = () => {
 		const props = this.props;
 		const state = this.state;