Boostrap DateTimePicker show time only

Asked 26/7, 2017 at 9:49 Answered 28/4, 2020 at 23:2

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

The code works, however it shows date instead of time.

Manx answered 26/7, 2017 at 9:49 Comment(4)

you need to show time only or date or what? – Adamandeve 26/7, 2017 at 9:52

Yes show time only :) – Manx 26/7, 2017 at 9:55

you need to edit format to format:'HH:mm' – Adamandeve 26/7, 2017 at 10:1

$('.datetime').datetimepicker({ format: 'HH:mm:ss }); – Themistocles 26/7, 2017 at 10:10

You need to edit the format option to show time only:

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

Adamandeve answered 26/7, 2017 at 10:7 Comment(2)

Hi thanks a lot for your help, but it still only shows Date. The Time is just not there :( – Manx 26/7, 2017 at 16:3

The Code is Shows time Only Try checked the code again and run code snippet – Adamandeve 27/7, 2017 at 6:38

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

Cryan answered 30/10, 2017 at 8:52 Comment(0)

this works in my application:

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

Tillio answered 3/9, 2018 at 16:13 Comment(0)

You should try this

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

Wiles answered 26/7, 2017 at 10:8 Comment(1)

Hello, thanks for the reply. It only displays input box, when I click the calender wont pop up THanks – Manx 26/7, 2017 at 16:5

Add to

showSeconds:false

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

Patti answered 28/4, 2020 at 23:2 Comment(0)

Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php It has the Time only picker code.

I have also copied it here

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

Chalaza answered 2/4, 2020 at 11:45 Comment(0)

Recommended topics

Hot tags