Added functionality to support the clear button not being visible (#37)

Added test case
Updated README
Updated examples

Author: Nift

README.md

@@ -105,6 +105,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `string` or `ReactClass`
     * **Example:** `"×"`
+  * `showClearButton` - Toggles the visibility of the clearButton
+    * **Optional**
+    * **Type:** `bool` 
+    * **Example:** `false`
   * `onClear` - Defines what happens when clear button is clicked.
     * **Optional**
     * **Type:** `function`

example/app.jsx

@@ -289,6 +289,19 @@ const App = React.createClass({
           </FormGroup>
         </Col>
       </Row>
+      <Row>
+        <Col xs={12}>
+          <h2>No clear button visible</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={6}>
+          <FormGroup controlId="no_clear_button">
+            <DatePicker placeholder="Placeholder" value={this.state.date} 
+            id="no_clear_button_example" showClearButton={false}/>
+          </FormGroup>
+        </Col>
+      </Row>
     </Grid>;
   }
 });

lib/index.js

@@ -171,10 +171,12 @@ exports.default = _react2.default.createClass({
     onClear: _react2.default.PropTypes.func,
     weekStartsOnMonday: _react2.default.PropTypes.bool,
     clearButtonElement: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    showClearButton: _react2.default.PropTypes.bool,
     previousButtonElement: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     nextButtonElement: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     calendarPlacement: _react2.default.PropTypes.string,
     dateFormat: _react2.default.PropTypes.string // 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'
+
   },
   getDefaultProps: function getDefaultProps() {
     var language = typeof window !== "undefined" && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
@@ -187,7 +189,8 @@ exports.default = _react2.default.createClass({
       previousButtonElement: "<",
       nextButtonElement: ">",
       calendarPlacement: "bottom",
-      dateFormat: dateFormat
+      dateFormat: dateFormat,
+      showClearButton: true
     };
   },
   getInitialState: function getInitialState() {
@@ -449,7 +452,7 @@ exports.default = _react2.default.createClass({
         onBlur: this.handleBlur,
         onChange: this.handleInputChange
       }),
-      _react2.default.createElement(
+      this.props.showClearButton && _react2.default.createElement(
         _reactBootstrap.InputGroup.Addon,
         { onClick: this.clear, style: { cursor: this.state.inputValue ? "pointer" : "not-allowed" } },
         this.props.clearButtonElement

src/index.jsx

@@ -128,6 +128,7 @@ export default React.createClass({
       React.PropTypes.string,
       React.PropTypes.object
     ]),
+    showClearButton: React.PropTypes.bool,
     previousButtonElement: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.object
@@ -138,6 +139,7 @@ export default React.createClass({
     ]),
     calendarPlacement: React.PropTypes.string,
     dateFormat: React.PropTypes.string  // 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'
+
   },
   getDefaultProps() {
     const language = typeof window !== "undefined" && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
@@ -152,7 +154,8 @@ export default React.createClass({
       previousButtonElement: "<",
       nextButtonElement: ">",
       calendarPlacement: "bottom",
-      dateFormat: dateFormat
+      dateFormat: dateFormat,
+      showClearButton: true,
     }
   },
   getInitialState() {
@@ -383,7 +386,7 @@ export default React.createClass({
       onChange={this.onChangeMonth}
       monthLabels={this.props.monthLabels}
       dateFormat={this.props.dateFormat} />;
-    return <InputGroup ref="inputGroup" bsClass={this.props.bsClass} bsSize={this.props.bsSize} id={this.props.id ? this.props.id + "_group" : null}>
+    return <InputGroup ref="inputGroup"  bsClass={this.props.showClearButton ? this.props.bsClass : ""} bsSize={this.props.bsSize} id={this.props.id ? this.props.id + "_group" : null}>
       <Overlay rootClose={true} onHide={this.handleHide} show={this.state.focused} container={() => this.props.calendarContainer || ReactDOM.findDOMNode(this.refs.overlayContainer)} target={() => ReactDOM.findDOMNode(this.refs.input)} placement={this.props.calendarPlacement} delayHide={200}>
         <Popover id="calendar" title={calendarHeader}>
           <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate} displayDate={this.state.displayDate} onChange={this.onChangeDate} dayLabels={this.state.dayLabels} weekStartsOnMonday={this.props.weekStartsOnMonday} />
@@ -400,8 +403,9 @@ export default React.createClass({
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         onChange={this.handleInputChange}
+        style={{width: "100%"}}
       />
-      <InputGroup.Addon onClick={this.clear} style={{cursor:this.state.inputValue ? "pointer" : "not-allowed"}}>{this.props.clearButtonElement}</InputGroup.Addon>
+      {this.props.showClearButton && <InputGroup.Addon onClick={this.clear} style={{cursor:this.state.inputValue ? "pointer" : "not-allowed"}}>{this.props.clearButtonElement}</InputGroup.Addon>}
     </InputGroup>;
   }
 });

test/core.test.jsx

@@ -184,6 +184,26 @@ describe("Date Picker", function() {
     assert.notEqual("Mx", -1);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should render without clear button element", co.wrap(function *(){
+    const id = UUID.v4();
+    const clearButtonElement = <div id="clear-button-element"></div>;
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker
+            id={id}
+            clearButtonElement={clearButtonElement}
+            showClearButton={false}
+            />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    assert.equal(document.getElementById("clear-button-element"), null);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
   it("should go to the previous and next month.", co.wrap(function *(){
     const id = UUID.v4();
     const App = React.createClass({