Home Bootstrap How to set bootstrap timepicker using datetimepicker library

How to set bootstrap timepicker using datetimepicker library

by Shahriar Sagor

Today now in this example i will give you how to add timepicker in our php application or html etc. Now here this is a full example for you. Just you need to copy and past bellow the code then you will find timepicker. Here you have no need to install anything. Here I will use just datetimepicker library for timepicker on that way we can also set datepicker too. We know in bootstrap datetimepicker is very popular library. So if we also want to build date and timepicker both then also we can set you can see in the bellow example.

Here I can set format “HH:mm:ss” but you can also add your custom format as like as “HH:mm” etc as you want but just try this example.

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>

Read Also : How to convert Object into Array in PHP?

Thanks for read. I hope it help you. For more you can follow us on facebook.

close

You may also like