Add a separate prop for format placeholders

README.md

@@ -130,6 +130,14 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `string`
     * **Examples:** `"MM/DD/YYYY"`, `"YYYY/MM/DD"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"`
+  * `placeholder` - Placeholder to show for empty non-focused input.
+    * **Optional**
+    * **Type:** `string`
+    * **Examples:** `"Event date"`
+  * `formatPlaceholder` - Placeholder to show for focused input.
+    * **Optional**
+    * **Type:** `string`
+    * **Examples:** `"month/day/year"`
   * `clearButtonElement` - Character or component to use for the clear button.
     * **Optional**
     * **Type:** `string` or `ReactClass`

example/app.jsx

@@ -97,6 +97,30 @@ const App = React.createClass({
           </FormGroup>
         </Col>
       </Row>
+      <Row>
+        <Col xs={6}>
+          <h2>Auto Focus</h2>
+        </Col>
+        <Col xs={6}>
+          <h2>Different placeholder on focus</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={6}>
+          <FormGroup>
+            <ControlLabel>Auto-focused</ControlLabel>
+            <DatePicker autoFocus onChange={this.handleChange} weekStartsOnMonday placeholder="Placeholder" />
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+        <Col sm={6}>
+          <FormGroup>
+            <ControlLabel>With format placeholder</ControlLabel>
+            <DatePicker onChange={this.handleChange} weekStartsOnMonday placeholder="Placeholder" formatPlaceholder="month/day/year"/>
+            <HelpBlock>Help</HelpBlock>
+          </FormGroup>
+        </Col>
+      </Row>
       <Row>
         <Col xs={12}>
           <h2>Styles</h2>

lib/index.js

@@ -217,6 +217,7 @@ exports.default = _react2.default.createClass({
     style: _react2.default.PropTypes.object,
     cellPadding: _react2.default.PropTypes.string,
     placeholder: _react2.default.PropTypes.string,
+    formatPlaceholder: _react2.default.PropTypes.string,
     dayLabels: _react2.default.PropTypes.array,
     monthLabels: _react2.default.PropTypes.array,
     onChange: _react2.default.PropTypes.func,
@@ -517,10 +518,12 @@ exports.default = _react2.default.createClass({
       monthLabels: this.props.monthLabels,
       dateFormat: this.props.dateFormat });
 
+    var placeholder = this.state.focused ? this.props.formatPlaceholder || this.props.dateFormat : this.state.placeholder;
+
     var control = this.props.customControl ? _react2.default.cloneElement(this.props.customControl, {
       onKeyDown: this.handleKeyDown,
       value: this.state.inputValue || '',
-      placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+      placeholder: placeholder,
       ref: 'input',
       disabled: this.props.disabled,
       onFocus: this.handleFocus,
@@ -537,7 +540,7 @@ exports.default = _react2.default.createClass({
       style: this.props.style,
       autoFocus: this.props.autoFocus,
       disabled: this.props.disabled,
-      placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+      placeholder: placeholder,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       onChange: this.handleInputChange

src/index.jsx

@@ -175,6 +175,7 @@ export default React.createClass({
     style: React.PropTypes.object,
     cellPadding: React.PropTypes.string,
     placeholder: React.PropTypes.string,
+    formatPlaceholder: React.PropTypes.string,
     dayLabels: React.PropTypes.array,
     monthLabels: React.PropTypes.array,
     onChange: React.PropTypes.func,
@@ -499,11 +500,15 @@ export default React.createClass({
       monthLabels={this.props.monthLabels}
       dateFormat={this.props.dateFormat} />;
 
+    const placeholder = this.state.focused
+      ? this.props.formatPlaceholder || this.props.dateFormat
+      : this.state.placeholder
+
     const control = this.props.customControl
       ? React.cloneElement(this.props.customControl, {
         onKeyDown: this.handleKeyDown,
         value: this.state.inputValue || '',
-        placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+        placeholder,
         ref: 'input',
         disabled: this.props.disabled,
         onFocus: this.handleFocus,
@@ -521,7 +526,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={placeholder}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onChange={this.handleInputChange}

test/core.test.jsx

@@ -840,4 +840,51 @@ describe("Date Picker", function() {
     assert.equal(inputElement.style.backgroundColor, backgroundColor);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should set the plaheholder", co.wrap(function *(){
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker placeholder="foo" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    assert.equal(inputElement.placeholder, "foo");
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should show dateFormat as placeholder when focused", co.wrap(function *(){
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker dateFormat="YYYY-MM-DD" placeholder="foo" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    assert.equal(inputElement.placeholder, "YYYY-MM-DD");
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should show formatPlaceholder when focused", co.wrap(function *(){
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker formatPlaceholder="bar" placeholder="foo" />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    assert.equal(inputElement.placeholder, "bar");
+    ReactDOM.unmountComponentAtNode(container);
+  }));
 });