Reducing 2 steps to 1step when clicked on input type=date

Question

So I am using input type="date" in cordova type mobile application. For some reason, placeholder won't show up if the input type is date. So an empty button like thing appears, when clicked calendar would appear. So I am trying to follow a hack in which input type="text" has a placeholder "Next Action Date". And onfocus I am changing the type to date. And onblur I am changing back to type="text" and make a placeholder again. So this process is partly solving the problem, which I am trying to solve. Which to make that white button thing disappear. But in my current code, I have to follow two steps

1. First is to click on placeholder, then onfocus will get fired and makes the white thing to appear
2. Second is I have to click on the white thing to make the calendar appear

I don't want this second step to appear. Here is my code

<ElementsBasket name='nextActionDate' 
    data={this.props.newLead.get('actions').get('nextActionDate')}>
        <div className="form-group">
         <input type="text" className="form-control" onFocus={this._onFocus} onBlur={this._onBlur} placeholder="Next Action Date"        
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
        </div>
</ElementsBasket>



_onFocus: function(e){
       e.currentTarget.type = "date";
    },


    _onBlur:function(e){
      e.currentTarget.type="text"
      e.currentTarget.placeholder = "Next Action Date";
    },

Also I tried onclick, which also took two steps. I have followed this link Not showing placeholder for input type="date" field

PS: White thing is a button with no text, when clicked would give a calendar

Answer 1

You can try firing focus or click event:

_onFocus: function() {
     e.currentTarget.type = "date";
     e.currentTarget.focus(); // or .click();
}

Answer 2

Try overlaying the date input over the placeholder input and setting the date input to CSS opacity: 0. Therefore, when the user tries to click the placeholder input, they actually click the date input.

Here is an example JSBin. http://jsbin.com/rozusihade/edit?css,js,output

Notice the onDateInputFocus and onDateInputBlur callbacks that update the date input's appearance.