CODEWITHSUNDEEP
javascriptcordovareactjs
gates
gates

Reputation: 4613

Date field does not appear properly In react

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

Upvotes: 1

Views: 11254

Answers (5)

Dhrupad Patel
Dhrupad Patel

Reputation: 61

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

Upvotes: 0

Ranjith Varma
Ranjith Varma

Reputation: 473

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 :)

Upvotes: 0

Cheery
Cheery

Reputation: 11

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

Hope it helps you, thanks

Upvotes: 1

marquitobb
marquitobb

Reputation: 438

this is simpler

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

Upvotes: 3

Dave Pile
Dave Pile

Reputation: 5774

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";
},

Upvotes: 4

Related Questions