Velvet Star Monitor

Standout celebrity highlights with iconic style.

general

Boostrap DateTimePicker show time only

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

4

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy