我可以让 timepicker 在输入字段中单击时触发吗？答案

【问题标题】：Can I get timepicker to fire on a click in the input field?我可以让 timepicker 在输入字段中单击时触发吗？
【发布时间】：2014-12-03 09:53:02
【问题描述】：

我花了几个小时试图让任何新的时间选择器工作（以前使用 https://github.com/weareoutman/clockpicker 这很棒，但在手机上总是消失）。

大多数似乎都适用于 Bootstrap 2.x，但我无法正常工作。终于让https://github.com/Eonasdan/bootstrap-datetimepicker 去了（在手机上不是很好，但是...）

我的问题是我有很多小的 input 日期字段，所以我需要去掉 glyphicon，只在 input 字段本身上删除 onclick。

我已经包含了我的小测试页面，以防其他人遇到困难。我没有意识到我需要 moment.js，这花了我 30 分钟的时间。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
        <link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
        <script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>        
        <script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    </head>
    <body>
<div class="container">

    <div class="row">
        <div class='col-sm-6'>
            <form class="form">
            <div class="form-group">
                <div class='input-group date' id='datetimepicker4'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>

        </form>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({
                    pickDate: false,  minuteStepping:5, 
                });
            });
        </script>
    </div>
</div>        
</html>

编辑：这太奇怪了。摆脱了字形图标。将另一个span 放在input 周围。有效，但有一个丑陋的大边框。尝试通过将 input-group-addon class 更改为 adxxdon 来禁用它，并且效果很好（没有圆角）。然后我尝试不使用 class 并且它停止工作。所以看起来span 中的某种regex 正在发生。

我的 JS/CSS 能力已经到了尽头。如果有人有更整洁的解决方案，我将不胜感激。

【问题讨论】：

标签： javascript jquery twitter-bootstrap datepicker timepicker

【解决方案1】：

这很容易。只需参考文档:)

http://eonasdan.github.io/bootstrap-datetimepicker/#example6

【讨论】：

谢谢你们（女孩）。根本没看到。

【解决方案2】：

根据documentation，这应该没什么大不了的。

【讨论】：

【解决方案3】：

只需在 javascript 中使用一个属性，如下所示

<script type="text/javascript">
        $(function () {
            $('#datetimepicker4').datetimepicker({
                pickDate: false,  
                minuteStepping:5, 
                allowInputToggle: true
            });
        });
</script>

allowInputToggle: true //如果这个属性设置为true，这将允许打开两个图标单击上的 datetimepicker 下拉列表就像点击输入字段一样。

【讨论】：

【解决方案4】：

使用

allowInputToggle : true;

默认值：假

如果为真，选择器将显示在文本框焦点和图标点击时在按钮组中使用。

【讨论】：