diff --git a/README.md b/README.md
index b78a8bd..2e1bbec 100755
--- a/README.md
+++ b/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`
diff --git a/example/app.jsx b/example/app.jsx
index 36e0d9e..0029cfa 100755
--- a/example/app.jsx
+++ b/example/app.jsx
@@ -97,6 +97,30 @@ const App = React.createClass({
+
+
+ Auto Focus
+
+
+ Different placeholder on focus
+
+
+
+
+
+ Auto-focused
+
+ Help
+
+
+
+
+ With format placeholder
+
+ Help
+
+
+
Styles
diff --git a/lib/index.js b/lib/index.js
index 04f36fc..db274cb 100644
--- a/lib/index.js
+++ b/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
diff --git a/src/index.jsx b/src/index.jsx
index 540f1a8..64017ec 100644
--- a/src/index.jsx
+++ b/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}
diff --git a/test/core.test.jsx b/test/core.test.jsx
index e2e7e54..5344f26 100755
--- a/test/core.test.jsx
+++ b/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
+
+
;
+ }
+ });
+ yield new Promise(function(resolve, reject){
+ ReactDOM.render(, 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
+
+
;
+ }
+ });
+ yield new Promise(function(resolve, reject){
+ ReactDOM.render(, 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
+
+
;
+ }
+ });
+ yield new Promise(function(resolve, reject){
+ ReactDOM.render(, container, resolve);
+ });
+ const inputElement = document.querySelector("input.form-control");
+ TestUtils.Simulate.focus(inputElement);
+ assert.equal(inputElement.placeholder, "bar");
+ ReactDOM.unmountComponentAtNode(container);
+ }));
});