Bootstrap DateTimePicker 仅显示时间答案

【问题标题】：Boostrap DateTimePicker show time onlyBootstrap DateTimePicker 仅显示时间
【发布时间】：2017-07-26 09:49:55
【问题描述】：

我需要bootstrap datepicker的帮助

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        </script>
    </div>
</div>

代码有效，但它显示的是日期而不是时间。

【问题讨论】：

您只需要显示时间或日期或什么？
是的，只显示时间:)
你需要编辑format为format:'HH:mm'
$('.datetime').datetimepicker({ format: 'HH:mm:ss });

标签： datepicker eonasdan-datetimepicker

【解决方案1】：

您需要编辑format 选项以仅显示时间：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'HH:mm'
                });
            });
        </script>
    </div>
</div>

【讨论】：

您好，非常感谢您的帮助，但它仍然只显示日期。时间不存在 :(
代码只显示时间尝试再次检查代码并运行代码 sn-p

【解决方案2】：

$(document).ready(function(){
  $("#datetimepicker").datetimepicker({
    pickDate: false,
    minuteStep: 15,
    pickerPosition: 'bottom-right',
    format: 'HH:ii p',
    autoclose: true,
    showMeridian: true,
    startView: 1,
    maxView: 1,
  });
  $(".datetimepicker").find('thead th').remove();
  $(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
  $('.switch').css('width','190px');
  });

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
  <div class="form-group">
    <input class="form-control" type="text" id="datetimepicker" readonly>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>

【讨论】：

【解决方案3】：

这适用于我的应用程序：

$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });

【讨论】：

【解决方案4】：

你应该试试这个

<div class="well">
  <div id="datetimepicker3" class="input-append">
    <input data-format="hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker3').datetimepicker({
      pickDate: false
    });
  });
</script>

【讨论】：

您好，感谢您的回复。它只显示输入框，当我点击日历时不会弹出谢谢

【解决方案5】：

添加到

showSeconds:false

$('#kt_timepicker_2').timepicker({
            minuteStep: 1,
            format: 'HH:mm',
            defaultTime: '',
            showMeridian: false,
            snapToStep: true,
            showSeconds:false});

【讨论】：

【解决方案6】：

下载https://www.malot.fr/bootstrap-datetimepicker/demo.php中的zip文件它有 Time only 选择器代码。

我这里也复制了

<div class="form-group">
    <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
        <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <input class="form-control" size="16" type="text" value="" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
        </div>
    <input type="hidden" id="dtp_input3" value="" /><br/>
</div>


<script>
    $('.form_time').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>

【讨论】：