5

I am creating a mobile app using HTML5 and jQuery mobile. I have a form containing a field of the type "date":

<form id="registrationForm">
   <div data-role="fieldcontain">
       <input type="date" name="dateOfBirth"/>
   </div>
   <img id="calendar_logo"/>
</form>

When the user taps the field, the browser native calender shows. What i need, is for that calender to show upon a click on the calender_logo image.

I tried setting the focusin with jQuery, but it does'nt work:

$('#calendar_logo').click(function(){
        $("#registrationForm input[name='dateOfBirth']").focusin();
});

Can anybody please help?

thank you!

yogev
  • 159
  • 9
  • check this link http://demos.jquerymobile.com/1.4.0/datepicker/ – mcmac Jan 06 '14 at 09:57
  • Thanks, but i don't want to use jQuery's plugin for this. I want the native browser's date picker to show. – yogev Jan 06 '14 at 10:00
  • sorry but I don't get it, you use jquery mobile, you post jquery function, so if you want create cross browser calendar you will be need jquery or other framework. Maybe this link will be helpful http://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome – mcmac Jan 06 '14 at 10:27
  • have you tried `click` instead of `focusin`? – sv_in Jan 06 '14 at 10:53
  • is this what you mean? Try the down arrow in the date box: http://jsfiddle.net/wuZ7R/ – Tiago Jan 06 '14 at 10:55
  • mcmac - sorry, maybe i should have explained myself a little better. I DON'T want a cross broswer calender. I want the integral "date picker" window to pop up when you press the calender_logo – yogev Jan 06 '14 at 11:07
  • loco - you know how you click the little black arrow, and the calender pops up? i want the same thing happen when i click my calender logo image. – yogev Jan 06 '14 at 11:13
  • sv_in - is "click" also an action? not just an event? either way, it doe'nt work... – yogev Jan 06 '14 at 11:14

1 Answers1

2

Your calendar logo could be wrapped in a label tag that points to the field. You just need to give the field an ID.

<form id="registrationForm">
   <div data-role="fieldcontain">
       <input type="date" id="dateOfBirth" name="dateOfBirth"/>
   </div>
    <label for="dateOfBirth">
        <img id="calendar_logo"/>
    </label>
</form>

Most browsers will focus the field if the user clicks on the label.

ThiagoPXP
  • 5,362
  • 3
  • 31
  • 44