fix: don't change placeholder when focused

example/app.jsx

@@ -390,6 +390,28 @@ const App = React.createClass({
           </FormGroup>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={12}>
+          <h2>Placeholder</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={6}>
+          <FormGroup>
+            <ControlLabel>Custom Placeholder</ControlLabel>
+            <DatePicker placeholder="Custom Placeholder" />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={6}>
+          <FormGroup>
+            <ControlLabel>Custom placeholder onfocus</ControlLabel>
+            <DatePicker placeholder="Placeholder" focusedPlaceholder="Custom Focused Placeholder" />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+      </Row>
     </Grid>;
   }
 });

src/index.jsx

@@ -223,6 +223,7 @@ export default React.createClass({
     cellPadding: React.PropTypes.string,
     autoComplete: React.PropTypes.string,
     placeholder: React.PropTypes.string,
+    focusedPlaceholder: React.PropTypes.string,
     dayLabels: React.PropTypes.array,
     monthLabels: React.PropTypes.array,
     onChange: React.PropTypes.func,
@@ -313,6 +314,7 @@ export default React.createClass({
     state.focused = false;
     state.inputFocused = false;
     state.placeholder = this.props.placeholder || this.props.dateFormat;
+    state.focusedPlaceholder = this.props.focusedPlaceholder || this.props.dateFormat;
     state.separator = this.props.dateFormat.match(/[^A-Z]/)[0];
     return state;
   },
@@ -581,7 +583,7 @@ export default React.createClass({
         onKeyDown: this.handleKeyDown,
         value: this.state.inputValue || '',
         required: this.props.required,
-        placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+        placeholder: this.state.focused ? this.state.focusedPlaceholder : this.props.placeholder,
         ref: 'input',
         disabled: this.props.disabled,
         onFocus: this.handleFocus,
@@ -601,7 +603,7 @@ export default React.createClass({
           style={this.props.style}
           autoFocus={this.props.autoFocus}
           disabled={this.props.disabled}
-          placeholder={this.state.focused ? this.props.dateFormat : this.state.placeholder}
+          placeholder={this.state.focused ? this.state.focusedPlaceholder : this.props.placeholder}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onChange={this.handleInputChange}

test/core.test.jsx

@@ -1061,4 +1061,62 @@ describe("Date Picker", function() {
     assert.equal(document.querySelector("table thead tr:first-child td small").innerHTML, "Sat");
     ReactDOM.unmountComponentAtNode(container);
   }));
-});
+  it("should set a placeholder.", co.wrap(function *(){
+    const id = UUID.v4();
+    const value = new Date().toISOString();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} value={value} placeholder="Placeholder" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputGroup = document.getElementById(`${id}_group`);
+    const input = inputGroup.querySelector('input');
+    assert.equal(input.placeholder, 'Placeholder');
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should set a dateFormat placeholder on focus.", co.wrap(function *(){
+    const id = UUID.v4();
+    const value = new Date().toISOString();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} value={value} placeholder="Placeholder" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputGroup = document.getElementById(`${id}_group`);
+    const input = inputGroup.querySelector('input');
+    assert.equal(input.placeholder, 'Placeholder');
+    TestUtils.Simulate.focus(input);
+    assert.equal(input.placeholder, 'DD/MM/YYYY');
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should set a focusedPlaceholder on focus.", co.wrap(function *(){
+    const id = UUID.v4();
+    const value = new Date().toISOString();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} value={value} placeholder="Placeholder" focusedPlaceholder="focusedPlaceholder" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputGroup = document.getElementById(`${id}_group`);
+    const input = inputGroup.querySelector('input');
+    assert.equal(input.placeholder, 'Placeholder');
+    TestUtils.Simulate.focus(input);
+    assert.equal(input.placeholder, 'focusedPlaceholder');
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+});