javascript - 如何在 HTML5 移动设备中为日期字段打开日历？

Question

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

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

当用户点击该字段时，将显示浏览器 native 日历。我需要的是在单击 calender_logo 图像时显示该日历。

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

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

有人可以帮忙吗？

谢谢!

Answer 1

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

如果用户点击标签，大多数浏览器都会关注该字段。