我可以让时间选择器在输入字段中单击时触发吗?

Can I get timepicker to fire on a click in the input field?

本文关键字：单击 字段 时间 选择器 输入 我可以      更新时间：2023-09-26

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

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

我的问题是我有很多用于日期的小input字段，所以我需要摆脱字形，只onclick input字段本身。

我已经包含了我的小测试页面，以防其他人在挣扎。我没有意识到我需要时间.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能力已经到了尽头。如果有人有更整洁的解决方案，我将不胜感激。

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

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

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

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

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

allowInputToggle: true//如果此属性设置为 true，这将允许打开 两个图标单击上的日期时间选择器下拉列表 与输入字段单击一样。

使用

allowInputToggle : true;

默认值：假

如果为 true，则选取器将显示在文本框焦点和图标单击上，当 在按钮组中使用。

相关文章：