HTML5 按钮在移动设备上触发日期输入答案

【问题标题】：HTML5 button to trigger date input on mobileHTML5 按钮在移动设备上触发日期输入
【发布时间】：2017-02-28 11:45:22
【问题描述】：

我有一个 HTML5 设计，我希望能够使用按钮来显示日期，但我想使用 HTML5 输入 type="date" 来选择日期。

这是我的代码：

<button type="button" id="btnDate" class="btn btn-primary">
    <span class="glyphicon glyphicon-calendar"></span> <span class="date">27 Jul 2015</span>
</button>
<input type="date" class="hidden" id="tbDate" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnDate").click(function () {
            $("#tbDate").focus();
        });
    });             
</script>

我已经尝试过 focus() 和 click() - 都不起作用...有什么想法吗？

【问题讨论】：

为什么隐藏输入？你想点击按钮然后在输入按钮日期中显示？
@Zl3n 我根本不希望显示输入 - 只显示按钮，但我希望按钮触发移动设备的原生日期选择器。
@series0ne 您使用的是哪种移动操作系统/浏览器？
@Vucko - iOS，但它也需要在 Android 和 Windows Mobile 上完美运行
@series0ne 好吧，type=date 有一个bed support (caniuse)，尤其是对于移动浏览器。我建议您尝试使用this answer。

标签： javascript jquery html

【解决方案1】：

请用您的手机浏览。

<label for="dateInput">click button</label>
<input type="date" id="dateInput" />

【讨论】：

错误，您的示例中没有按钮。只有一个标签和一个文本框。也许您在某个地方错过了一步？
标签标签而不是按钮。（来自谷歌翻译）
从手机打开时没有运行代码sn-p的选项。

【解决方案2】：

您需要将val() 设置为input。希望对您有所帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="btnDate" class="btn btn-primary">
    <span class="glyphicon glyphicon-calendar"></span> <span class="date">27 Jul 2015</span>
</button>
<input type="date" class="hidden" id="tbDate" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnDate").click(function () {
          var date = new Date("2015, 07, 27");
          var setDate = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-"+("0" + date.getDate()).slice(-2);
            $("#tbDate").val(setDate);
        });
    });             
</script>

【讨论】：

为什么是这个答案？这不会触发<input='date' /> 来选择问题中询问的日期。
他想要一个按钮来输入日期。我是这么理解的。
他想要一个按钮来显示日期，但他说“我想使用 HTML5 输入 type="date" 来选择日期。”