Boostrap DateTimePicker show time only
Andrew Mclaughlin
I need help with bootstrap datepicker
<div> <div> <div class='col-sm-6'> <div> <div class='input-group date' id='datetimepicker3'> <input type='text' /> <span> <span></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.
46 Answers
You need to edit the format option to show time only:
<link href="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<script src="" ></script>
<script src=""></script>
<script src="" type="text/javascript" ></script>
<script src=""></script>
<div> <div> <div class='col-sm-6'> <div> <div class='input-group date' id='datetimepicker3'> <input type='text' /> <span> <span></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker3').datetimepicker({ format: 'HH:mm' }); }); </script> </div>
</div> 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>').text('Pick Time')); $('.switch').css('width','190px'); });<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="" rel="stylesheet">
</head>
<body> <div> <input type="text" readonly> </div>
<script src=""></script>
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src=""></script>
</body>
</html> You should try this
<div> <div> <input type="text"></input> <span> <i> </i> </span> </div>
</div>
<script type="text/javascript"> $(function() { $('#datetimepicker3').datetimepicker({ pickDate: false }); });
</script> 1 this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false }); Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({ minuteStep: 1, format: 'HH:mm', defaultTime: '', showMeridian: false, snapToStep: true, showSeconds:false}); Download the zip file in It has the Time only picker code.
I have also copied it here
<div> <label for="dtp_input3">Time Picking</label> <div> <input size="16" type="text" value="" readonly> <span><span></span></span> <span><span></span></span> </div> <input type="hidden" 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>