Add option to disable calendar popover

README.md

@@ -116,6 +116,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `bool`
     * **Example:** `false`
+  * `calendarDisabled` - Whether or not the calendar popover will be disabled.
+    * **Optional**
+    * **Type:** `bool`
+    * **Example:** `false`
   * `onChange` - Focus callback function.
     * **Optional**
     * **Type:** `function`

example/app.jsx

@@ -129,6 +129,13 @@ const App = createReactClass({
             <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>
+        <Col sm={6}>
+          <FormGroup controlId="calendar_disabled">
+            <ControlLabel>Calendar Disabled</ControlLabel>
+            <DatePicker calendarDisabled={true} onChange={this.handleChange} placeholder="Placeholder" value={this.state.date} id="calendar_disabled_example" />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
       </Row>
       <Row>
         <Col xs={6}>

src/index.jsx

@@ -267,6 +267,7 @@ export default createReactClass({
     onFocus: PropTypes.func,
     autoFocus: PropTypes.bool,
     disabled: PropTypes.bool,
+    calendarDisabled: PropTypes.bool,
     weekStartsOnMonday: (props, propName, componentName) => {
       if (props[propName]) {
         return new Error(`Prop '${propName}' supplied to '${componentName}' is obsolete. Use 'weekStartsOn' instead.`);
@@ -328,6 +329,7 @@ export default createReactClass({
       showClearButton: true,
       autoFocus: false,
       disabled: false,
+      calendarDisabled: false,
       showTodayButton: false,
       todayButtonLabel: 'Today',
       autoComplete: 'on',
@@ -676,13 +678,8 @@ export default createReactClass({
           noValidate={this.props.noValidate}
           />;
 
-    return <InputGroup
-      ref="inputGroup"
-      bsClass={this.props.showClearButton ? this.props.bsClass : ''}
-      bsSize={this.props.bsSize}
-      id={this.props.id ? `${this.props.id}_group` : null}>
-      {control}
-      <Overlay
+    const overlay = !this.props.calendarDisabled
+      && <Overlay
         rootClose={true}
         onHide={this.handleHide}
         show={this.state.focused}
@@ -704,10 +701,18 @@ export default createReactClass({
             maxDate={this.props.maxDate}
             roundedCorners={this.props.roundedCorners}
             showWeeks={this.props.showWeeks}
-           />
+          />
         </Popover>
-      </Overlay>
-      <div ref="overlayContainer" style={{position: 'relative'}} />
+      </Overlay>;
+
+    return <InputGroup
+      ref="inputGroup"
+      bsClass={this.props.showClearButton ? this.props.bsClass : ''}
+      bsSize={this.props.bsSize}
+      id={this.props.id ? `${this.props.id}_group` : null}>
+      {control}
+      {overlay}
+      {!this.props.calendarDisabled && <div ref="overlayContainer" style={{position: 'relative'}} />}
       <input ref="hiddenInput" type="hidden" id={this.props.id} name={this.props.name} value={this.state.value || ''} data-formattedvalue={this.state.value ? this.state.inputValue : ''} />
       {this.props.showClearButton && !this.props.customControl && <InputGroup.Addon
         onClick={this.props.disabled ? null : this.clear}

test/core.test.jsx

@@ -623,6 +623,24 @@ describe("Date Picker", function() {
     assertIsoStringsHaveSameDate(value, originalValue);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should disable the calendar.", co.wrap(function *(){
+    const id = UUID.v4();
+    const App = createReactClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} calendarDisabled={true} />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    const popover = document.querySelector(".date-picker-popover");
+    assert.equal(popover, null);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
   it("should display the correct day of the week in the calendar.", co.wrap(function *(){
     const id = UUID.v4();
     let value = null;