Question

我花了两个小时试图让任何新的时间戳工作（之前使用的https://github.com/weareoutman/clockpicker这很棒，但总是在手机上关闭屏幕。）

大多数似乎都是针对Bootstrap 2.x而我无法工作。终于得到了https://github.com/Eonasdan/bootstrap-datetimepicker（在手机上不是很好但是......）

我的问题是我有很多小input个字段用于日期，因此我需要删除字形图，而onclick字段本身只需要input。

我已经包含了我的小测试页，以防其他人在挣扎。我没有意识到我需要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>

编辑：这太奇怪了。摆脱了glyphicon。将另一个span放在input周围。工作但边界很难看。尝试通过将其更改为adxxdon来禁用input-group-addon class并完美地工作（没有圆角）。然后我尝试了没有class，它停止了工作。因此看起来regex内的某种span正在进行中。

我的JS / CSS能力结束了。如果有人有更整洁的解决方案，我将不胜感激。

Answer 1

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

Answer 2

这很容易。请参阅文档：）

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

Answer 3

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

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

allowInputToggle: true //如果此属性设置为true，则允许打开日期时间选择器下拉列表同时点击图标在输入字段上单击。

Answer 4

使用

allowInputToggle : true;

默认：false

如果为true，则选择器将在文本框焦点上显示，并且在在按钮组中使用。

我可以在输入字段中点击一下来获取时间戳吗？

4 个答案: