I have one input field whose type is date and placeholder is "Enter your date". But what happened was placeholder does not show up in the mobile app. (we are building the mobile app using html, css, bootstrap and react.js and porting via cordova"). So I am following this link, to get the label appeared and when clicked date pop should appear. But this seems to be not working, when inspected the element in chrome, onfocus and onblur seem to be disappearing. Is there anyway to make it work in react.

<ElementsBasket name='nextActionDate' 
                      data={this.props.newLead.get('actions').get('nextActionDate')}>
    <div className="form-group">

       <input type="text" className="form-control" onfocus="(this.type='date')" onblur="(this.type='date')"
                       placeholder="Type your date here.." 
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
     </div>
</ElementsBasket>

ps: I am following this link Not showing placeholder for input type="date" field

I have one input field whose type is date and placeholder is "Enter your date". But what happened was placeholder does not show up in the mobile app. (we are building the mobile app using html, css, bootstrap and react.js and porting via cordova"). So I am following this link, to get the label appeared and when clicked date pop should appear. But this seems to be not working, when inspected the element in chrome, onfocus and onblur seem to be disappearing. Is there anyway to make it work in react.

<ElementsBasket name='nextActionDate' 
                      data={this.props.newLead.get('actions').get('nextActionDate')}>
    <div className="form-group">

       <input type="text" className="form-control" onfocus="(this.type='date')" onblur="(this.type='date')"
                       placeholder="Type your date here.." 
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
     </div>
</ElementsBasket>

ps: I am following this link Not showing placeholder for input type="date" field

• javascript
• cordova
• reactjs

5 Answers 5

In React your events should be called onFocus and onBlur (note capitalisation)

https://facebook.github.io/react/docs/events.html

edit:

The other issue is that you are setting the handlers to a string - onFocus="(this.type='date')" and they should be a function. So set them like you set your onChange event -

 <input type="text" onFocus = {this._onFocus} onBlur={this._onBlur}

Now this refers to the object that contains your render function so you need to implement the appropriate function in that object. eg.

_onFocus: function(e){
    e.currentTarget.type = "date";
},
_onBlur: function(e){
    e.currentTarget.type = "text";
    e.currentTarget.placeholder = "Enter a Date";
},

this is simpler

<input
   type="text"
   onFocus={
    (e)=> {
      e.currentTarget.type = "date";
      e.currentTarget.focus();
     }
   }
   placeholder="dd/mm/yyyy"
/>

Basically the date type appears with default placeholder i.e. mm/dd/yyyy, that's why our placeholder attribute is not displayed as it is in text type.

So we can use event handlers onFocus and onBlur to make it work. We can add these handlers in arrow function structure like this -

<input
  type="text"
  onFocus={(e) => (e.currentTarget.type = "date")}
  onBlur={(e) => (e.currentTarget.type = "text")}
  placeholder="No date found"
/>

output will be like this

ReactDOM.render(
    <input
      type="text"
      className="form-control"
      onFocus={(e) => (e.currentTarget.type = "date")}
      onBlur={(e) => (e.currentTarget.type = "text")}
      placeholder="No date found"
    />,
  document.getElementById("react")
);

.form-control {
  padding: 10px;
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Hope it helps you, thanks

Obviously you can't bring in the place holder when the input type is Date , one way to solve this issue is dynamically changing the input type on-focus , but that is not a good practice , my suggestion is not to go with the default date pickers instead you can use the drop downs

You can also refer this question .Hope this helps you :)

<input
  type="text"
  className="form-control"
  onFocus={(e) => (e.currentTarget.type = "date")}
  onBlur={(e) => (e.currentTarget.type = "text")}
  placeholder="plz select your date"
/>