Apply zIndex prop and overlay className

Author: paulcurley

src/DateTimeField.js

@@ -13,6 +13,7 @@ export default class DateTimeField extends Component {
     daysOfWeekDisabled: [],
     size: Constants.SIZE_MEDIUM,
     mode: Constants.MODE_DATETIME,
+    zIndex: 999,
     onChange: (x) => {
       console.log(x);
     }
@@ -46,6 +47,7 @@ export default class DateTimeField extends Component {
     direction: PropTypes.string,
     showToday: PropTypes.bool,
     viewMode: PropTypes.string,
+    zIndex: PropTypes.number,
     size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]),
     daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number)
   }
@@ -321,16 +323,17 @@ export default class DateTimeField extends Component {
   }
 
   renderOverlay = () => {
+
     const styles = {
       position: "fixed",
       top: 0,
       bottom: 0,
       left: 0,
       right: 0,
-      zIndex: "999"
+      zIndex: `${this.props.zIndex}`
     };
     if (this.state.showPicker) {
-      return (<div onClick={this.closePicker} style={styles} />);
+      return (<div className='bootstrap-datetimepicker-overlay' onClick={this.closePicker} style={styles} />);
     } else {
       return <span />;
     }

src/__tests__/DateTimeField-test.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import TestUtils from "react-addons-test-utils";
 
 jest.dontMock("moment");
@@ -19,6 +20,14 @@ describe("DateTimeField", function() {
      expect(input.value).toBe("06/05/90 7:30 AM");
     });
 
+    it("allows a custom zIndex to be applied to overlay", function() {
+      const component = TestUtils.renderIntoDocument(<DateTimeField zIndex={1234} />);
+	  const input = TestUtils.findRenderedDOMComponentWithClass(component, "input-group-addon");
+	  TestUtils.Simulate.click(input);
+      const overlay = TestUtils.findRenderedDOMComponentWithClass(component, "bootstrap-datetimepicker-overlay");
+      expect(ReactDOM.findDOMNode(overlay).style.zIndex).toBe('1234');
+     });
+
   });
 
   describe("When changing props", function() {