diff --git a/example/app.jsx b/example/app.jsx index 06a74b6..8bb8cb8 100755 --- a/example/app.jsx +++ b/example/app.jsx @@ -390,6 +390,28 @@ const App = React.createClass({ + + + +

Placeholder

+ +
+ + + + Custom Placeholder + + Help + + + + + Custom placeholder onfocus + + Help + + + ; } }); diff --git a/src/index.jsx b/src/index.jsx index d71e97b..b37aeca 100644 --- a/src/index.jsx +++ b/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} diff --git a/test/core.test.jsx b/test/core.test.jsx index 1bc9e46..b841608 100755 --- a/test/core.test.jsx +++ b/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
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, 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
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, 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
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, 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); + })); +}); \ No newline at end of file