How to set bootstrap timepicker using datetimepicker library example code

By Hardik Savani | May 3, 2016 | | 22229 Viewer | Category : Javascript Bootstrap jQuery


In this example i give you how to add timepicker in your php application or html etc. this is full example if you just copy and past bellow code then you can find timepicker. you no need to install anything. I use datetimepicker library for timepicker that way you can also set datepicker too. bootstrap datetimepicker is very popular library. So if you also want to build date and timepicker both then also you can set you can see bellow example.

I set format "HH:mm:ss" but you can also add your custom format like "HH:mm" etc as you want but try this....

Example:

<html lang="en">

<head>

<title>Bootstrap Timepicker Example</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

</head>

<body>


<div class="container" style="margin-top: 20px">

<div style="position: relative">

<input class="form-control" type="text" id="time"/>

</div>

</div>


<script>

$('#time').datetimepicker({

format: 'HH:mm:ss'

});

</script>


</body>

</html>






We are Recommending you: