12

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

This is the initial state of app with type=text and placeholder working problem!! Empty button appears when clicked on image1 calendar appears when clicked on white button

Community
  • 1
  • 1
gates
  • 4,465
  • 7
  • 32
  • 60
  • Do you just want to get the date field filled when the user calls the site on which he has to enter it? Tell us more about the function or the thing, you want to achieve with that. I don't understand, what you exactly have. Maybe provide a screenshot or things like that. – Sithys Jul 07 '15 at 06:45
  • The user will click on the input button, which in initial state is type="text", and has a placeholder="Next Action Date", when clicked on it, onFocus will get fired and make a white button with no text on it appear. So the user has to click it again so that he will get the calendar. Is there anything I can clarify? – gates Jul 07 '15 at 06:48
  • No, i don't understand why you do this as complicated as you could solve your problem?! What do you want the button to be? A Calendar in which the user can select a date? You want a placeholder for that Button or sth like this? I'm going to do a fiddle – Sithys Jul 07 '15 at 06:51
  • 1
    Please refer the updated question! – gates Jul 07 '15 at 06:53
  • Okay, the user clicks on "Next Action Date", the field gets empty (white) and the user has to click again, so that the calendar shows up, i got that right? – Sithys Jul 07 '15 at 06:55
  • exactly! you are right – gates Jul 07 '15 at 06:56
  • 2
    http://jsfiddle.net/L94e5kee/2/ look at this fiddle and check it out with your mobile phone please. Is that sth that would work for you? – Sithys Jul 07 '15 at 06:58
  • I am sorry man, that cordova is black box for me. I don't know yet, how to build apk file out of it. – gates Jul 07 '15 at 07:10

3 Answers3

2

You can try firing focus or click event:

_onFocus: function() {
     e.currentTarget.type = "date";
     e.currentTarget.focus(); // or .click();
}
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • I think you are near, but still it is not working. I tried both focus and click as you mentioned. But the logic is flawless – gates Jul 07 '15 at 06:44
  • Are you testing with `click()` ? Maybe with jquery `trigger()` function is more compatible, I don't know. I promise you I investigate it right now – Marcos Pérez Gude Jul 07 '15 at 06:54
  • Yes, I tested with e.currentTarget.focus() as well as e.currentTarget.click(). But trigger is something is different right, code will make the trigger happen, but here is user is making onFocus and onBlur happen. Just correct me if I am wrong! – gates Jul 07 '15 at 07:02
  • Is there a way that we could chain like this e.currentTarget.click().type("date"); This is not working though! But something to see this way? – gates Jul 07 '15 at 07:16
  • I think that's useful: http://stackoverflow.com/a/30895180/5035890 in this answer user tells that firing `F4` keyboard event launches datepicker in chrome. You can test it in mobile. Tell us if is your solution! – Marcos Pérez Gude Jul 07 '15 at 07:25
  • Did you tried? Try with your touch device this fiddle: http://jsfiddle.net/v2d0vzrr . If this works, you can try in your code – Marcos Pérez Gude Jul 07 '15 at 07:41
  • No, that does not up calendar – gates Jul 07 '15 at 09:16
  • I haven't idea of how to make it. Sorry. I think that's a native behaviour of browsers to launch the datepicker with a custom event, but I'm not sure – Marcos Pérez Gude Jul 07 '15 at 09:26
  • And it gives me error, dispatchEvent is not a function – gates Jul 07 '15 at 09:26
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82574/discussion-between-gates-and-marcos-perez-gude). – gates Jul 07 '15 at 09:26
  • `dispatchEvent` must be attached to a correct DOM object. `document.getElementById("datepicker").dispatchEvent(event)` – Marcos Pérez Gude Jul 07 '15 at 09:30
1

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.

paulshen
  • 374
  • 1
  • 2
  • 7
0

try onfocus=""

<input placeholder="select date" type="text" onfocus="(this.type='date')">

http://codepen.io/anon/pen/zGaQax

Otherwise, I will make a place holder with ng-show, instead of change input tag. Input tag should always be "date" if you want to use native selection of date. (which is always should do)

Robert
  • 1
  • 1
  • 2