Allow flippable prop for DatePicker and TimePicker

Author: donnieberg

components/date-picker/index.jsx

@@ -20,6 +20,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Datepicker';
 const propTypes = {
   abbrWeekDayLabels: React.PropTypes.array,
+  /**
+   * If true, allows popover to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
   /**
    * Date formatting function
    */
@@ -45,6 +49,7 @@ const propTypes = {
 };
 const defaultProps = {
   abbrWeekDayLabels: ['S','M','T','W','T','F','S'],
+  flippable: true,
   formatter (date) {
     if(date){
       return (date.getMonth()+1) +
@@ -142,7 +147,7 @@ module.exports = React.createClass({
   popover() {
     if(this.state && this.state.isOpen){
       const date = this.state.strValue?this.parseDate(this.state.strValue):this.state.value;
-      return <Popover className='slds-dropdown' targetElement={this.refs.date} onClose={this.handleClose}>
+      return <Popover className='slds-dropdown' flippable={this.props.flippable} targetElement={this.refs.date} onClose={this.handleClose}>
         <DatePicker
           onChange={this.handleChange}
           selected={this.state.selected}

components/time-picker/index.jsx

@@ -21,6 +21,10 @@ import {KEYS,EventUtil} from '../../utilities';
 const displayName = 'Timepicker';
 const propTypes = {
   constrainToScrollParent: React.PropTypes.bool,
+  /**
+   * If true, allows dropdown to appear above input field based on available space with scroll position.
+   */
+  flippable: React.PropTypes.bool,
 
   /**
    * Time formatting function
@@ -46,6 +50,7 @@ const propTypes = {
 
 };
 const defaultProps = {
+  flippable: true,
   formatter (date) {
     if(date){
       return date.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'});
@@ -200,12 +205,12 @@ module.exports = React.createClass({
     return (
       !this.props.disabled && this.state.isOpen?
         <Popover
-          className="slds-dropdown slds-dropdown--left "
+          className="slds-dropdown slds-dropdown--left"
           closeOnTabKey={true}
           constrainToScrollParent={this.props.constrainToScrollParent}
           inheritTargetWidth={this.props.inheritTargetWidth}
           dropClass="slds-picklist"
-          flippable={true}
+          flippable={this.props.flippable}
           onClose={this.handleCancel.bind(this)}
           targetElement={this.refs.triggerbutton}>
           {this.getPopoverContent()}