Bootstrap Timepicker using Datetimepicker JS Example

By Hardik Savani April 27, 2023 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:

Read Also: How to use Bootstrap Datepicker in Laravel?
<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>

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts