1

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

Community
  • 1
  • 1
gates
  • 4,465
  • 7
  • 32
  • 60

5 Answers5

3

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";
},
Dave Pile
  • 5,559
  • 3
  • 34
  • 49
  • Still the problem persists man, I did the capitalisation. They are not (onFocus and onBlur) getting loaded! – gates Jul 06 '15 at 13:12
  • Works fine, except there is one problem. I need to click the date field two times. First time the type="text" and placeholder is "Next Action Date". When I used onFocus type="date". So If i click at Next Action Date, onFocus is getting fired, and again a white button field appears which does not anything. The whole problem is with this empty button. I don't want this button. So when I click this button Calendar will appear. Is there anyway that I could just click the placeholder Next Action Date and make the calendar appear? I tried onClick too. But no result, it is also taking two steps – gates Jul 07 '15 at 05:41
  • I dont think so (take a look here http://stackoverflow.com/questions/24975667/html-input-type-date-open-calendar-by-default ) . This is kind of a different issue now and possibly will vary depending on browser (Android version). To be honest I dont think writing code to switch input type like this is a great idea and could cause problems. I was just answering your question about why onfocus and onblur was not working in React – Dave Pile Jul 07 '15 at 06:24
  • Yea even I felt the same, but having a button with no text on it did not seem nice. – gates Jul 07 '15 at 06:25
  • This doesn't work on Safari for some reason. – Boz Sep 17 '22 at 01:16
2

this is simpler

<input
   type="text"
   onFocus={
    (e)=> {
      e.currentTarget.type = "date";
      e.currentTarget.focus();
     }
   }
   placeholder="dd/mm/yyyy"
/>
marquitobb
  • 380
  • 3
  • 7
1

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

Cheery
  • 11
  • 3
0

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

shiva
  • 5,083
  • 5
  • 23
  • 42
Ranjith Varma
  • 473
  • 3
  • 11
  • Please check the link in ps of my question – gates Jul 06 '15 at 11:07
  • Ok checked but it seems that he also trying to say that you should change the type ! and your onfocus and onblur is doing the same thing , if you are using his logic then you should change the type to text onblur – Ranjith Varma Jul 06 '15 at 11:11
  • Even then the problem is not fixed. onfocus and onblur are not even loading in react – gates Jul 06 '15 at 11:18
  • Can you please try to replace onchange with onKeydown – Ranjith Varma Jul 06 '15 at 11:20
  • Dude, my problem is that onfocus and onblur are not even loading, in my case onfocus would make the type=date, so this is not getting fired – gates Jul 06 '15 at 11:25
0
<input
  type="text"
  className="form-control"
  onFocus={(e) => (e.currentTarget.type = "date")}
  onBlur={(e) => (e.currentTarget.type = "text")}
  placeholder="plz select your date"
/>
Dhrupad Patel
  • 61
  • 1
  • 4