11

I need help with 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>

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

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
iDeal
  • 201
  • 2
  • 4
  • 7

6 Answers6

15

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>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
Feras Al Sous
  • 1,073
  • 1
  • 12
  • 23
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>
4

this works in my application:

$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
ascripter
  • 5,665
  • 12
  • 45
  • 68
francesco sabatini
  • 41
  • 1
3

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>
Ravikumar
  • 613
  • 1
  • 9
  • 22
  • Hello, thanks for the reply. It only displays input box, when I click the calender wont pop up THanks – iDeal Jul 26 '17 at 16:05
2

Add to

showSeconds:false

$('#kt_timepicker_2').timepicker({
            minuteStep: 1,
            format: 'HH:mm',
            defaultTime: '',
            showMeridian: false,
            snapToStep: true,
            showSeconds:false});
Ömer Can KULLEŞ
  • 21
  • 1
1

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>
Chougule Vinay
  • 61
  • 1
  • 7