如何在HTML5手机中打开日期字段的日历？

Question

我正在使用HTML5和jQuery mobile创建一个移动应用程序.我有一个包含"日期"类型字段的表单:

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

当用户点击该字段时,浏览器本机日历显示.我需要的是,通过点击calender_logo图像显示该日历.

我尝试使用jQuery设置焦点,但它不起作用:

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

有人可以帮忙吗？

谢谢!

Answer 1

您的日历徽标可以包含在指向该字段的标签中。您只需为该字段提供一个 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>

如果用户单击标签，大多数浏览器都会聚焦该字段。