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