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设置focusin，但它不起作用：

$('#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>

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

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

1 个答案: