Disabled state.

Author: wehriam

example/app.jsx

@@ -50,14 +50,26 @@ const App = React.createClass({
         </Col>
       </Row>
       <Row>
-        <Col xs={12}>
+        <Col xs={6}>
           <h2>Change Handler</h2>
         </Col>
+        <Col xs={6}>
+          <h2>Disabled</h2>
+        </Col>
       </Row>
       <Row>
         <Col sm={6}>
           <FormGroup controlId="change_handler">
+            <ControlLabel>Change Handler</ControlLabel>
             <DatePicker onChange={this.handleChange} placeholder="Placeholder" value={this.state.date} id="change_handler_example" />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={6}>
+          <FormGroup controlId="disabled">
+            <ControlLabel>Disabled</ControlLabel>
+            <DatePicker disabled={true} onChange={this.handleChange} placeholder="Placeholder" value={this.state.date} id="disabled_example" />
+            <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>
       </Row>
@@ -147,35 +159,44 @@ const App = React.createClass({
         </Col>
       </Row>
       <Row>
-        <Col sm={3}>
-          <FormGroup>
-            <ControlLabel>Clear Button</ControlLabel>
-            <DatePicker placeholder="Placeholder" clearButtonElement={<Glyphicon glyph="star" />} />
-            <HelpBlock>Help</HelpBlock>
-          </FormGroup>
-        </Col>
-        <Col sm={3}>
+        <Col sm={4}>
           <FormGroup>
             <ControlLabel>Previous / Next Buttons</ControlLabel>
             <DatePicker placeholder="Placeholder" previousButtonElement={<Glyphicon glyph="star" />}  nextButtonElement={<Glyphicon glyph="star" />}  />
             <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>
-        <Col sm={3}>
+        <Col sm={4}>
           <FormGroup>
             <ControlLabel>Padding</ControlLabel>
             <DatePicker placeholder="Placeholder" cellPadding="10px" />
             <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>
-        <Col sm={3}>
+        <Col sm={4}>
           <FormGroup>
             <ControlLabel>Day and Month Labels</ControlLabel>
             <DatePicker placeholder="Placeholder" dayLabels={spanishDayLabels} monthLabels={spanishMonthLabels} />
             <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>
       </Row>
+      <Row>
+        <Col sm={6}>
+          <FormGroup>
+            <ControlLabel>Clear Button</ControlLabel>
+            <DatePicker placeholder="Placeholder" clearButtonElement={<Glyphicon glyph="star" />} />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={6}>
+          <FormGroup controlId="no_clear_button">
+            <ControlLabel>No Clear Button</ControlLabel>
+            <DatePicker placeholder="Placeholder" showClearButton={false} />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+      </Row>
       <Row>
         <Col xs={12}>
           <h2>Placement</h2>
@@ -289,19 +310,6 @@ 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>;
   }
 });

src/index.jsx

@@ -123,6 +123,7 @@ export default React.createClass({
     monthLabels: React.PropTypes.array,
     onChange: React.PropTypes.func,
     onClear: React.PropTypes.func,
+    disabled: React.PropTypes.bool,
     weekStartsOnMonday: React.PropTypes.bool,
     clearButtonElement: React.PropTypes.oneOfType([
       React.PropTypes.string,
@@ -156,6 +157,7 @@ export default React.createClass({
       calendarPlacement: "bottom",
       dateFormat: dateFormat,
       showClearButton: true,
+      disabled: false
     }
   },
   getInitialState() {
@@ -399,13 +401,14 @@ export default React.createClass({
         value={this.state.inputValue || ''}
         ref="input"
         type="text"
+        disabled={this.props.disabled}
         placeholder={this.state.focused ? this.props.dateFormat : this.state.placeholder}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         onChange={this.handleInputChange}
         style={{width: "100%"}}
       />
-      {this.props.showClearButton && <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.props.disabled ? null : this.clear} style={{cursor:(this.state.inputValue && !this.props.disabled) ? "pointer" : "not-allowed"}}><div style={{opacity: (this.state.inputValue && !this.props.disabled) ? 1 : 0.5}}>{this.props.clearButtonElement}</div></InputGroup.Addon>}
     </InputGroup>;
   }
 });