how to open calender for a date field in HTML5 mobile?

Question

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!

Answer 1

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.