Boostrap DateTimePicker 只显示时间

Question

Boostrap DateTimePicker 只显示时间

11

<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>

代码可以工作，但它显示的是日期而不是时间。

- iDeal

你需要仅显示时间还是日期或其他内容？ - Feras Al Sous

只显示时间 :) - iDeal

你需要编辑格式为'HH:mm' - Feras Al Sous

$('.datetime').datetimepicker({ format: 'HH:mm:ss' }); - Aamir

6个回答

15

$(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>

- user4318530

4

这在我的应用程序中有效：

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

- francesco sabatini

3

你应该尝试这个

<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>

- Ravikumar

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

2

添加到

showSeconds:false（不显示秒）

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

- Ömer Can KULLEŞ

1

在 https://www.malot.fr/bootstrap-datetimepicker/demo.php 下载zip文件，其中包含仅限时间选择器代码。

我也将其复制到这里了。

<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>

- Chougule Vinay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Feras Al Sous · Accepted Answer

您需要编辑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>