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); + })); });